Tipografia: o espaço é tão importante quanto as palavras

O texto é dos um elementos mais importantes em qualquer design, a seleção de fontes, o tamanho e cores podem fazer toda a diferença de como o design pode ser lido. Tão importante quanto as letras em si, é o espaçamento delas e a maneira como você trabalha com os blocos de textos.

Eu mesmo tinha muitas dúvidas de como fazer a seleção desses elementos e decidi focar os meus estudos para entender qual seria a melhor construção tipográfica. Descobri que existem vários fatores muito interessantes sobre o assunto, mas para não tornar esse texto muito longo gostaria de compartilhar 7 princípios que podem melhorar a hierarquia e leitura do texto no seu design.

1. Medida

A medida é o comprimento de uma linha de texto. Aos olhos de um leitor, linhas longas ou curtas podem ser cansativo e perturbador.

Medida longa: Se uma linha de texto é muito longa os olhos do leitor terão curto tempo de foco no texto. Isto é porque o comprimento da linha faz com que seja difícil avaliar onde começa e termina. Isso também atrapalha na hora de mudar de linha quando podemos confundir com a próxima.

Medida curta: Se uma linha é muito curta os olhos vão ter que viajar de volta muitas vezes, quebrando o ritmo de leitura. Linhas muito curtas também tendem a estressar os leitores, fazendo-os começar na próxima linha antes de terminar a atual.

Para facilitar a leitura de textos longos é sugerido entre 40–75 caracteres, incluindo espaços.

Uma maneira simples de calcular a medida é usar o método de Robert Bringhurst que multiplica o tamanho do tipo por 30. Então, se o tamanho do tipo é 16pt, o cálculo seria feito dessa maneira:

30 x 16 = 480pt

Que daria cerca de 68 caracteres por linha.

Caracteres por linha (CPL)

Refere-se ao número máximo de caracteres que podem aparecer em uma única linha, utilizar a quantidade correta é a chave para a legibilidade do texto. Para encontrar a quantidade exata de CPL é necessário fazer vários cálculos, sem dizer que são contados diversos fatores como por exemplo o tipo e tamanho da fonte utilizada, mas para facilitar nossa vida já existe um site que faz tudo isso pra gente:

2. Leading / Entre linhas

Leading é o espaço entre as linhas do tipo, para conteúdos com várias linhas, você deve certificar-se que a distância entre elas têm espaçamento apropriado para fazê-los legíveis.

Muitos fatores afetam o Leading, como tipo de letra, tamanho, peso. Quanto mais largo a medida do corpo de texto, mais necessário é o Leading. Além disso quanto maior o tamanho do tipo menos Leading é necessário.

Para a maioria de texto, o espaçamento de linha ideal é:

  • Áreas de trabalho: 1,5 vezes o tamanho do tipo
  • Dispositivos móveis: 1,75 a 2 vezes o tamanho do tipo

Portanto, se você definir o tipo em 16pt, um leading de 24pt deve funcionar bem na web. O site Grid Lover em poucos passos vai te ajudar a descobrir o leading para todos os tamanhos de fontes no seu projeto, vale a pena experimentar:

*Curiosidade: Leading vem da época do tipo de metal quando tipógrafos inseriam finas tiras de Lead (chumbo) para aumentar o espaçamento entre linhas, para legibilidade ou efeitos estilísticos.

3 . Ritmo

O ritmo é apenas um padrão repetido. Quanto mais consistente o padrão, melhor o ritmo.

No design, o ritmo é a estrutura que orienta o olho de um leitor através do conteúdo. Um bom ritmo vertical, faz o layout ser mais equilibrado, bonito e seu conteúdo mais legível. O objetivo é criar uma relação harmoniosa entre todos os conteúdos (incluindo imagens e texto) no seu site. Caso você se interesse por esse assunto esse texto pode lhe ajudar a entender isso melhor:

4. Viúvas e Órfãos

Viúva é uma linha muito curta no fim do parágrafo que cai no início da página seguinte ou da coluna, assim, separado do resto do texto. Ela é considerada inadequada porque deixa muito espaço em branco entre os parágrafos ou na parte inferior de uma página. Isso interrompe a atenção do leitor e diminui a legibilidade.

Órfão é uma única palavra, parte de uma palavra ou linha muito curta, exceto que ele apareça no início de uma coluna ou página.

Viúvas e Órfãos interrompem os olhos do leitor e afetam a legibilidade. Tome cuidado extra para evitar estes dois elementos, ajustando a sua cópia como adicionando ou excluindo palavras.

5. Ênfase

É o exagero de palavras em um texto com fontes e estilos diferentes do resto do texto para enfatizá-las. Ela ajuda a orientar o leitor a tomar nota das palavras e frases-chave. Itálico ou negrito são as maneiras mais comuns utilizadas para dar ênfase. Não importa qual você escolher, tente limitar-se a utilizar apenas uma. Várias combinações são perturbadoras e provocam desconforto visual.

6. Escala

O estabelecimento de uma escala modular é a melhor maneira de determinar tamanhos tipográficos. A escala é importante porque estabelece a hierarquia tipográfica e melhora a legibilidade criando harmonia e coesão dentro do texto.

Existem muitas escalas diferentes no mundo, dentre elas o Golden Ratio e Perfect fifth. Ao longo da história, essas escalas têm sido utilizada para a arquitetura, música, escrita e design.

Esse site ajuda a criar uma escala modular:

7. Trapos / Rags

Refere-se à margem vertical irregular de um bloco de texto. Ao definir o tipo com uma margem irregular, preste atenção para a forma que o final das linhas vão formar. Um bom alinhamento de Rag entra e sai de linha para linha com pequenas diferenças. Um Rag mal formulado cria formas de distração com espaços em branco na margem, isso pode ser desconfortável aos olhos e distrair o leitor. A única solução para evitar isso é através de ajustes manuais no bloco de texto.

Conclusão

Digo por experiência própria que essas dicas funcionam muito bem, mas vale lembrar que para toda regra existe a sua excessão e que em alguns caso nós temos a liberdade de tentar algo diferente. Como eu disse anteriormente esse são só alguns dos princípios e espero que isso tenha lhe inspirado para buscar conhece-los mais a fundo. Bons estudo a todos!

___
Obrigado por apertar o ♥ se você gostou desse artigo, isso vai me inspirar a escrever mais sobre isso! Espalhe o amor ☻.

Texto revisado por Mariana Oliveira.