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

Mark Claus Nunes
Jul 6, 2016 · 6 min read

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.

UI Lab

O melhor lugar para ser um UI Designer melhor 🦄

Mark Claus Nunes

Written by

Web Designer e Front-End Developer vivendo na Inglaterra. www.instagr.am/mark.claus 📷

UI Lab

UI Lab

O melhor lugar para ser um UI Designer melhor 🦄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade