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
.
