Tipografia não é só escolher uma fonte…

O título pode parecer meio clickbait, mas é bem real na verdade. Em 2006 a empresa Information Architect Inc, publicou um post com o seguinte título "Web Design é 95% Tipografia" e mesmo quase 2 décadas depois de publicado esse artigo é bem atual. Grande parte do conteúdo dos sites são texto e a tipografia desempenha um papel fundamental na comunicação visual, pois a forma que um texto é apresentado influencia a legibilidade e a compreensão da mensagem.

Tipografia vai muito além de simplesmente escolher uma fonte e aplicá-la em todo o texto. Irei listar abaixo alguns dos principais tópicos que devemos considerar ao formatar um texto para web.

Variáveis tipográficas

• Escala: Um dos principais itens para montar uma boa hierarquia de informações através de 4 a 6 variações. Uma boa dica é sempre repetir a escala em itens iguais seja título, subtítulo ou corpo de texto. O ponto a levar como atenção é que essa escala deve ter um bom contraste variando o tamanho da fonte.
  
  

• Tamanho: O principal ponto aqui é a legibilidade das informações, uma fonte de tamanho bem pequena pode afetar a transmissão da informação e perde todo o propósito da mensagem. Sempre trabalhar com pequenos trechos, um texto muito longo pode comprometer a leitura e torná-la cansativa.
  
  

• Altura de linha: Esse tópico depende muito da fonte e o tamanho que você pretende usar no texto. Porém existe um truque que pode ser aplicado na maiorias das fontes, basta você pegar o tamanho da fonte e multiplicar por 1,5. O resultado é a altura da linha que você pode aplicar na formatação, verificando sempre se o texto fica harmônico não existe regra.
  
  

• Largura do texto: Aqui a quantidade ideal de palavras por linha no corpo de texto seria 13, textos longos dificultam e muito a leitura.
  
  

• Alinhamento: 90% dos textos presentes na web estão alinhados a esquerda. Ela facilita a leitura e por padrão o CSS já faz esse alinhamento. O alinhamento a direita não é muito interessante pois sempre inicia uma linha em um novo ponto, dificultando a leitura. outra dica é sempre que possível alinhar o texto a elementos já existentes no site.
  
  

• Negrito: Muito utilizado para destacar e para trazer um forte contraste. Existem diversas variações, dentre elas a bold, demi bold, black e heavy.
  
  

• Itálico: Muito utilizado para dar ênfase. Ele é derivado da escrita cursiva e existem os tipos itálicos que só fazem a variação do caractere e o oblíquo inclinam a letras, mas sem nenhuma variação.
  
  

• Cores: A principal função da cor na tipografia é dar contraste e uma boa leitura depende desse contraste com as dicas acima aplicadas. Um site que recomendo para fazer teste de cor de fundo e cor de texto é o Siege Media.

Classificações tipográficas

• Serifadas: Um fonte clássica e elegante, muito atrelada a coisas históricas. Tem boa legibilidade, suas itálicas possuem estilo próprio, além de serem indicadas para o corpo de texto e títulos. Algumas das mais conhecidas são: Georgia, Palatino, Playfair Display e FF Tisa Pro.
  

• Sem serifas: Uma fonte mais neutra, porém moderna. Muito usada em materiais impressos. Possuem boa legibilidade e leiturabilidade.
  Não possuem itálicas e sim obliquas e são indicadas para corpo de texto e títulos. Algumas das mais conhecidas são: Helvetica, Roboto, Proxima Nova e Brandon Grotesque.
  

• Serifas grossas: Uma fonte mais impactante e estrutural, pois são criadas a partir de formas geométricas. Muito usada para compor títulos, anúncios, marcas, botões e etc. Algumas das mais conhecidas são: Clarendon, Josefin Slab, Adelle e Chaparral.
  

• Script: Uma fonte mais "natural", parecem feitas a mão. São suaves e geralmente possuem ligaturas. Muito usada em eventos como natal, casamento, páscoa e etc. Não possuem boa leiturabilidade, por isso é indicada para títulos. Algumas das mais conhecidas são: Lavanderia, Salamander, Lobster e Grafolita Script.
  

• Blackletter: Uma fonte com estilo mais medieval. Elas existem desde o século XII e foram utilizadas na primeira prensa tipográfica. Muito usada para representar contexto histórico, tradição, mas tem pouca leiturabilidade por isso é mais visto em títulos e marcas. Algumas das mais conhecidas são: New Rocker, Lucida Blackletter, Cabazon.
  

• Display: Uma fonte sem uma característica padrão, geralmente são criadas de acordo com a necessidade do projeto. Muito utilizada em títulos e marcas pela pouca leituralibidade. Alguma das mais famosas são: Amatic, BlackCasper, Capture It e Silkscreen.