9 dicas para uma melhor hierarquia tipográfica
Todo projeto requer um sistema e hierarquia para elementos de texto. Pense em todos os pequenos pedaços de texto usados em todo o design - manchetes, cópia do corpo, elementos de navegação, informações legais, legendas e assim por diante.
Mas como você cria essa hierarquia para que cada elemento de texto flua sem problemas para o próximo? Hoje, passo a passo na criação de um sistema de hierarquia de tipografia que pode ser usado para praticamente qualquer projeto de design. (E estamos combinando as dicas com belos exemplos de ótima tipografia para ajudá-lo a reunir um pouco de inspiração.)
Explore o Envato Elements
1. Comece com uma cópia confortável do corpo
Embora você possa começar com um tratamento interessante, o ponto de partida é realmente o meio. Estabeleça primeiro um tipo de letra, tamanho e espaçamento confortável para a cópia do corpo principal.
Isso deve fazer sentido, porque essa é a maior parte do texto no design. Quer você esteja criando um site ou folheto, esse conceito é o mesmo. A legibilidade ideal para a cópia do corpo está entre 50 e 60 caracteres por linha (ou coluna), de acordo com o Instituto Baymard. Esta diretriz ajudará você a definir uma escala para o texto legível e responsável por diferentes tipos de tipos de letra (como regular versus condensado versus laje).
2. Crie uma balança
Depois de saber como será a cópia do corpo, você poderá definir uma escala para todos os outros elementos de texto no design. Pode ser fácil ignorar certos blocos de texto; faça uma lista de todos os usos diferentes para o texto em seu projeto.
- Cópia do corpo
- Manchetes
- Subtítulos
- Legendas
- Citações em bloco
- Elementos de navegação
- Informações de rodapé
- Cópia legal ou isenções de responsabilidade
Agora crie uma escala que determina o tipo de letra, o tamanho e o uso de cada um desses elementos. (E construa-o no seu CSS para sites ou arquivos de estilos para documentos de trabalho.) Existem várias maneiras de criar a escala, mas a porcentagem de tamanho pode ser um bom ponto de partida. Você também pode estabelecer uma escala com base na matemática por trás de uma grade de linha de base ou visualmente.
Aqui está uma escala simples para começar:
- Tamanho da cópia do corpo
- Os títulos são o tamanho da cópia do corpo vezes 220%
- Subtítulos são o tamanho da cópia do corpo vezes 150%
- Os elementos de navegação são o tamanho da cópia do corpo vezes 80%
- Rodapé / cópia legal é o tamanho do corpo vezes 80%
3. Pense do maior para o menor, de cima para baixo
Essa regra é bem simples: o texto maior e mais importante deve estar na parte superior e os tamanhos devem diminuir à medida que você lê a página ou a tela.
Isso não quer dizer que você não possa quebrar essa regra de vez em quando com um pouco de requinte no design, mas deve sempre ser o ponto de partida para o desenvolvimento da hierarquia tipográfica. (Quem realmente vai rolar até o final de uma página da Web para o título e depois voltar ao topo para começar a ler?)
4. Estabelecer regras para o espaço
Tão importante quanto o tamanho das letras é o espaço entre e ao redor. Os fatores para determinar o espaço incluem avanço (ou altura da linha), recuos (ou não), envoltórios e sarjetas e alinhamento.
Considere proporções de espaçamento que espelham a escala usada para dimensionar o texto. O tamanho da tela também é muito importante aqui. As telas maiores são legíveis com espaçamento mais apertado do que as telas pequenas. (É por isso que muitos projetos têm especificações de espaçamento muito mais flexíveis para dispositivos como telefones celulares e regras mais rígidas para desktops.)
Assim como nos tamanhos dos tipos de letra, as regras de espaçamento devem ser definidas com antecedência para toda a estrutura de design. O espaçamento limpo e consistente é uma das pequenas coisas que podem criar ou quebrar um design.
5. Defina regras para negrito e itálico
Embora negrito e itálico não sejam elementos ou tamanhos de tipos diferentes, o uso é importante. (Apenas imagine como será o design se todas as outras palavras estiverem em negrito.)
Isso torna as diretrizes para negrito e itálico especialmente importantes. Porém, em vez de olhar para tamanho ou espaço, a consideração é muito mais contextual. As especificações de uso podem indicar que apenas tantas palavras ou frases (ou palavras ou frases específicas) podem ter esse tratamento. É um erro comum usar em negrito e itálico; quando duvidar, não use.
6. Crie um "Z"
O padrão de leitura comum tem a forma de um Z. Quer você esteja projetando um idioma que leia da esquerda para a direita ou da direita para a esquerda (gire o Z), os usuários lerão de um canto da linha até o final e depois voltarão para no canto inicial e do outro lado da linha em um padrão repetitivo.
Use esse fluxo natural ao colocar elementos de texto na tela. Essa forma de Z é o motivo pelo qual a maioria das marcas coloca seu logotipo no canto superior esquerdo. É o primeiro ponto que o olho pousa ao ler.
7. Considere o peso visual
O tamanho não é o único fator quando se trata do tamanho de um elemento de texto na tela. O peso visual é igualmente importante e pode afetar a maneira como você cria uma escala tipográfica.
Os tipos de letra parecerão maiores quando:
- Eles incluem pesos de traçado espessos
- Eles incluem floreios ou enfeites
- Eles são largos
- São tipos de letra base inovadores
- Eles têm alturas x mais altas
- Eles são usados como todos os caps
Os tipos de letra parecerão menores quando:
- Eles estão condensados
- Eles incluem larguras de traçado leves ou finas
- Há pouco contraste com o fundo
- Eles são usados com letras minúsculas
8. Crie acentos
Há certas palavras que você deseja destacar que ficam um pouco fora da escala tipográfica normal. Adicionar um acento às letras pode fazer com que ela se destaque sem precisar ajustar o tamanho ou o tipo de letra real.
Acentos comuns incluem:
- Cor
- Sublinhado
- Realçar
- Texto em um botão ou forma
- Animação simples
- Mudança de maiúsculas e minúsculas de outro tipo do mesmo tamanho
O lado bom de qualquer sotaque dentro de uma hierarquia de tipos é que ele é imediatamente atraído pela atenção. Esses elementos devem ser usados com moderação para obter o maior impacto e os elementos-chave no design.
9. Use o "Teste ocular"
Finalmente, toda regra tem uma exceção (ou duas). É aí que entra o "teste do olho". Basta olhar para a balança na tela. Como o texto se parece com você? Existe um fluxo lógico? É fácil de ler?
Se parecer de alguma forma, considere fazer ajustes na balança. Dependendo do tipo de letra usado e de outros elementos no design - das fotos às cores e ao contraste - a escala exigirá ajustes da sua parte. É apenas um ponto de partida quando você não tem certeza do que deseja fazer.
E peça outros olhos também. Crie uma ou duas versões com hierarquias diferentes para ver qual versão obtém a melhor resposta. O design é uma arte visual, tornando o "exame oftalmológico" uma opção imprecisa, mas bastante confiável.
Conclusão
Depois de definir uma hierarquia tipográfica para um projeto, a melhor coisa a fazer é documentá-la. Estabeleça a escala com CSS para sites ou crie arquivos de estilos ao trabalhar em projetos impressos.
Para projetos ou marcas de maior escala, coloque a escala e as especificações por escrito em um guia de estilo. Criar uma hierarquia de tipos requer um pouco de trabalho no back-end, mas torna a conclusão do projeto mais rápida, fácil e sem mencionar mais consistente, à medida que você avança nos projetos subseqüentes.
