As cores ficam com toda a atenção quando um clube monta o site. Alguém segura a camisa na frente da tela, a diretoria discute o tom exato de grená, e as fontes ficam do jeito que vieram no modelo.
É uma oportunidade perdida. A tipografia está em todas as páginas, em cada título, em cada tabela de jogos e em cada botão. As fontes certas fazem o site parecer do seu clube antes que alguém leia uma palavra. As erradas fazem o site parecer um modelo pronto ou, pior, parecer diferente na tela de cada visitante.
Este guia explica por que a fonte que você escolheu às vezes não é a fonte que os visitantes veem, como escolher uma dupla que combine com um clube, como fazer referência ao logo sem copiá-lo, tamanhos que funcionam no celular e o que conferir antes de enviar uma fonte própria.
A fonte que você escolheu nem sempre é a que os visitantes veem
Uma página da web não carrega as fontes dentro dela. Ela indica o nome de uma fonte, e o navegador do visitante precisa encontrá-la. Se o site fornece o próprio arquivo da fonte, todo mundo a vê. Se a página só indica o nome, o navegador procura a fonte no aparelho do visitante e, quando ela não está instalada, troca por outra sem avisar.
É por isso que o site de um clube pode ficar perfeito no notebook do tesoureiro, que por acaso tem a fonte instalada de um curso de design, e sem graça em todos os celulares no campo. Ninguém percebe até alguém comparar capturas de tela.
Então a primeira regra é simples: escolha entre as fontes que o seu site realmente fornece. Uma boa plataforma para clubes só oferece fontes que consegue entregar a todos os visitantes, ou deixa bem claro quais não consegue.
Escolha duas fontes, não cinco
A maioria dos bons sites de clube usa duas fontes: uma para os títulos e outra para todo o resto. Alguns usam uma única fonte em dois pesos. Quase nenhum precisa de três.
- A fonte dos títulos carrega a personalidade. Pode ser forte, condensada, um pouco diferente. Só precisa ser legível em tamanhos grandes.
- A fonte do texto carrega a informação: horários de treino, taxas, o formulário de inscrição. Precisa ser simples, aberta e fácil de ler em tamanhos pequenos no celular.
Fontes de destaque altas e condensadas ficam ótimas num banner de abertura e cansam num parágrafo. Guarde essas fontes para os títulos e deixe uma fonte simples fazer o trabalho de leitura.
Duplas que combinam com um clube
Estas combinações usam fontes de licença aberta, fáceis de encontrar, e cada uma combina com um tipo de clube:
- Títulos em Oswald com texto em Open Sans. Condensada e esportiva em cima, simpática embaixo. Uma escolha segura para futebol, vôlei e a maioria dos esportes coletivos.
- Títulos em Bebas Neue com texto em Inter. Títulos só em maiúsculas, com cara de placar, sobre uma fonte de texto muito legível. Mantenha os títulos curtos, porque a Bebas Neue não tem minúsculas.
- Títulos em Montserrat com texto em Source Sans 3. Limpa e moderna, funciona para quase qualquer clube.
- Títulos em Playfair Display com texto em Lato. Mais tradicional: combina com um clube de remo, golfe, bocha ou tênis com uma longa história.
- Títulos em Roboto Slab com texto em Roboto. Sólida e prática, com um ar esportivo levemente antigo graças às serifas retangulares.
- Títulos em Merriweather com texto em Nunito. Acolhedora e acessível, boa para clubes comunitários, de categorias de base e sociais.
Se estiver em dúvida, escolha primeiro a fonte do texto. Uma fonte de texto que se lê bem no celular importa mais do que o título perfeito.
Faça referência ao logo, não copie
É tentador usar a fonte do logo no site inteiro. Muitas vezes não dá: fontes de logo costumam ser comerciais, compradas uma única vez por quem desenhou o escudo, e a licença raramente cobre um site. Mesmo quando cobre, uma fonte criada para um escudo costuma ser ruim para parágrafos.
Um caminho melhor é lembrar o caráter do logo. Se o escudo usa uma maiúscula pesada e condensada, escolha uma fonte de títulos condensada. Se usa uma serifa tradicional, escolha uma fonte de títulos com serifa. Os visitantes percebem o ar de família, não o desenho exato das letras. O nosso guia sobre como criar o logo do clube trata do logo em si.
Tamanhos, espaçamento e o teste do celular
As fontes são só metade da aparência do texto. A outra metade é tamanho e espaço.
- Texto com pelo menos 16 pixels. Qualquer coisa menor dá trabalho para ler no celular debaixo do sol.
- Títulos que se ajustam à tela. Um título que fica bem no notebook pode quebrar em quatro linhas no celular. Definir um tamanho mínimo e um máximo, para que os títulos diminuam suavemente em telas pequenas, resolve isso sem precisar de um design para celular e outro para computador.
- Espaço uniforme entre as seções. Escolha um espaçamento para o site inteiro em vez de ir acrescentando espaços página por página. Espaçamento apertado combina com um site movimentado, cheio de notícias; espaçamento mais folgado combina com um site de fotos grandes.
- Cartões uniformes. Os cartões de eventos, notícias e contato devem compartilhar o mesmo estilo de borda e sombra, para que o site pareça um só design.
Depois faça o teste do celular. Abra o site no celular mais simples da diretoria, ao ar livre, e leia os horários de treino. Se precisar apertar os olhos, aumente o texto. O guia de site acessível para clubes trata de contraste e tamanhos legíveis com mais detalhes.
Usando a fonte própria do clube
Alguns clubes têm uma fonte que é realmente deles: uma tipografia encomendada pelo clube ou comprada para a marca. Usá-la no site pode valer a pena. Confira três coisas antes.
- A licença. Uma licença de fonte para computador permite usar a fonte em documentos e impressos. Normalmente ela não permite colocar o arquivo da fonte num site, de onde cada visitante faz o download. Procure uma licença "web" ou "webfont", ou pergunte à fundição que a criou. Se a fonte veio junto com o logo, pergunte ao designer o que foi comprado.
- O formato do arquivo. Sites usam arquivos WOFF2. Se você tem arquivos TTF ou OTF, vai precisar convertê-los, e a licença também tem de permitir isso.
- Os pesos. Você precisa de um arquivo separado para cada peso que usar, normalmente regular e negrito. Sem um arquivo em negrito, o navegador simula o negrito engrossando o regular, e o resultado fica borrado.
Se qualquer um dos três for um problema, escolha a fonte de licença aberta mais parecida. Ninguém na cantina vai notar a diferença, e ninguém vai mandar ao clube uma fatura de licença.
Confira em todo lugar antes de publicar
Uma troca de fonte mexe em todas as páginas ao mesmo tempo, então confira bem a prévia antes de publicar. Olhe uma página com texto longo, uma tabela de jogos, um formulário e uma página cheia de botões, não só o banner da página inicial. Confira a visualização no celular. Confira os títulos no título de página mais longo que vocês têm. Se a sua plataforma consegue mostrar cada tipo de seção no novo estilo antes de salvar, use esse recurso.
Como funciona no ClubHelix
O editor de tema oferece cerca de vinte famílias de fontes de licença aberta, incluindo todas as fontes citadas nas duplas acima, além das fontes do sistema. Cada uma é fornecida pelos nossos próprios servidores, para que todo visitante veja a fonte que você escolheu. Padrão do tema, no topo da lista, devolve um campo à fonte padrão.
No plano Pro, você pode enviar as fontes próprias do clube como arquivos WOFF2, de até 500 KB cada, um arquivo por peso. Antes do envio, você confirma que o clube tem licença para usar a fonte em um site. Se a sua organização mudar para um plano inferior, as fontes enviadas são mantidas, mas deixam de ser usadas, e voltam quando você retornar ao Pro.
O mesmo tema define o espaço entre as seções, a sombra e a borda dos cartões e os tamanhos mínimo e máximo dos títulos e do texto, para que se ajustem entre o celular e o computador. A aba Guia de estilo mostra cada tipo de seção que você pode adicionar a uma página no tema que está editando, incluindo as alterações que você ainda não salvou. A página de temas e identidade visual mostra tudo o que o tema controla, e a página de planos mostra o que cada plano inclui. Para estilos além do tema, veja o nosso guia de CSS personalizado para sites de clubes.
Perguntas frequentes
Por que a fonte do nosso site fica diferente no meu celular?
Normalmente porque o site indica o nome de uma fonte, mas não a fornece, e o seu celular troca por uma que ele tem. Escolha uma fonte que o próprio site entrega, e ela vai ficar igual em todos os aparelhos.
Quantas fontes o site de um clube deve usar?
Duas: uma para os títulos e outra para o texto. Uma única fonte em dois pesos também funciona bem. Mais de duas costuma parecer bagunçado e deixa a página mais lenta.
Podemos usar a fonte do logo do clube?
Só se a licença cobrir o uso na web, o que as licenças para computador normalmente não fazem. Se não cobrir, escolha uma fonte de licença aberta com um ar parecido para os títulos e mantenha o logo como imagem.
As fontes hospedadas funcionam com outros idiomas além do inglês?
Elas cobrem o alfabeto latino, que inclui a maioria dos idiomas da Europa Ocidental, o português entre eles. As fontes hospedadas vêm em estilos normais (não itálicos), e o itálico é desenhado pelo navegador a partir do estilo normal.
Que arquivo precisamos para enviar a nossa própria fonte?
Um arquivo WOFF2 para cada peso que você quer usar, como regular e negrito, e uma licença que permita o uso em um site. Converta os arquivos TTF ou OTF para WOFF2 antes.
Quer que o site do seu clube tenha a cara do seu clube? Comece grátis com o ClubHelix e escolha as suas fontes hoje mesmo.
