Tipografia não é só escolher uma fonte…
Tags: tipografia, fonte, ui, ux
Published: 2023-07-26 15:00:00

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. 
<br>

- 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.
<br>

- 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.
<br>

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

- 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.
<br>

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

- 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.
<br>

- 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](https://www.siegemedia.com/contrast-ratio#).

**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.
![serifada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvebar5rk85k7r8v2l8w.png)

- 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.
![Sem Serifa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zvx5uqcnxvo3zqg4xtq.png)

- 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.
![Serifa Grossa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkm5s2x9q6tlp3lb2mnx.png)

- 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.
![Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62hilzx7qmvg6arr5rbw.png)

- 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. 
![Blackletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43zm4h9c0m46mbvi395h.png)

- 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.
![Display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7pv9k49s8bjo8eust5s.png)