Como estruturar uma hierarquia tipográfica eficaz
Publicados: 2022-03-11Organizar efetivamente o conteúdo dentro de um design para que seja fácil de entender e consumir é um dos trabalhos mais importantes de um designer. E como grande parte do trabalho dos designers de conteúdo é baseada em texto, criar uma hierarquia tipográfica eficaz é uma das coisas mais importantes que um designer pode aprender.
Embora praticar e experimentar a criação de uma hierarquia eficaz seja a melhor maneira de realmente dominar a habilidade, há uma série de diretrizes que os designers devem aprender primeiro, antes de começar por conta própria. Afinal, é impossível quebrar as regras de forma eficaz sem primeiro saber quais são.
O que é hierarquia tipográfica?
Designers iniciantes às vezes subestimam a necessidade de usar uma hierarquia de tipografia. Ainda veja este exemplo:
A mesma informação está sendo transmitida em ambos os lados, mas à esquerda, é impossível dizer que há um cabeçalho, subcabeçalho e corpo de texto. À direita, fica imediatamente aparente que há uma hierarquia nas informações fornecidas.
A hierarquia tipográfica mostra ao leitor em quais informações se concentrar - o que é mais importante e o que é simplesmente apoiar os pontos principais.
Há uma variedade de coisas que compõem a hierarquia tipográfica na web. Esses incluem:
Tamanho. O tamanho geralmente é a primeira coisa que os novos designers procuram ao tentar criar uma hierarquia tipográfica. E por uma boa razão: é imediatamente e facilmente identificável pelos leitores. Maior = mais importante, menor = menos importante. Mas o tamanho pode se tornar uma muleta quando há tantas outras opções para criar hierarquia.
Peso. Tornar um tipo de letra mais ousado ou mais fino é outra maneira facilmente reconhecível de criar uma hierarquia facilmente identificável mesmo por não designers.
Cor. A cor é muitas vezes negligenciada como forma de criar uma hierarquia, mas é uma opção fantástica. Mesmo o uso de tons mais claros e mais escuros de uma determinada cor pode criar uma hierarquia mais distinta. Criar mais contraste entre o tipo e o plano de fundo também pode aumentar a hierarquia tipográfica.
Contraste. Além de cores contrastantes, o contraste entre diferentes tamanhos, pesos e estilos de tipos também é fundamental para criar hierarquia tipográfica. Uma diferença de apenas um ou dois pontos no tamanho do tipo não criará contraste suficiente para tornar a hierarquia aparente para a maioria dos usuários. Em vez disso, os designers devem usar tamanhos, pesos e estilos facilmente distinguíveis para criar contraste facilmente entre itens como cabeçalhos ou corpo de texto.
Caso. Embora a capitalização do corpo do texto geralmente não seja uma boa ideia do ponto de vista da legibilidade, usar caracteres maiúsculos em títulos ou subtítulos pode ajudar a diferenciar títulos diferentes ou outros tipos.
Posição e Alinhamento. O posicionamento de títulos e subtítulos, juntamente com outros tipos que um designer deseja destacar, pode ter muito impacto sobre onde o tipo se enquadra em uma hierarquia. O tipo de centralização, por exemplo, tende a destacá-lo. Definir o tipo fora das margens regulares de uma página também pode fazer com que esse tipo se destaque na hierarquia de uma página.
Como criar hierarquia tipográfica (e organizar visualmente seu design)
Os designers têm muitas opções quando se trata de criar uma hierarquia tipográfica. Mas apenas saber o que é necessário para criar uma hierarquia não ajudará necessariamente os designers a criar uma hierarquia eficaz.
Uma das primeiras coisas a considerar é quantos níveis de hierarquia um design deve ter. Como regra geral, todo design deve incluir três níveis de hierarquia: título, subtítulo e corpo do texto. A partir daí, cabe ao designer considerar níveis adicionais que possam ser necessários. Isso pode incluir legendas, subtítulos adicionais, citações e metainformações (para coisas como autores ou datas em um artigo).
A partir daí, é fundamental descobrir como distinguir entre as diferentes partes da hierarquia. Não é preciso dizer, mas os títulos devem ser mais proeminentes do que os subtítulos, que devem ser mais proeminentes do que a cópia do corpo. As legendas geralmente devem ser menos proeminentes do que a cópia do corpo, e as aspas devem estar em algum lugar entre a cópia do corpo e os subtítulos.
Tamanho do tipo
As escalas tipográficas tradicionais existem para ajudar os designers a começar. Mas estes são apenas um ponto de partida, e os designers devem se sentir à vontade para experimentar diferentes pesos e estilos, desviando-se dessas balanças tradicionais. A maioria baseia sua escala no tamanho do corpo do texto e expande a partir daí.
A escala tipográfica clássica de The Elements of Typographic Style é familiar para a maioria dos designers, pois tende a ser o padrão que a maioria dos programas de processamento de texto oferece ao selecionar tamanhos de fonte. A escala é:
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60 e 72.
Existem exemplos de escala tipográfica adicionais que seguem várias equações matemáticas para calcular tamanhos crescentes.
Os designers tendem a usar como padrão um tamanho de corpo de texto de 12 pontos, mas aumentar para 14 ou 16 (ou até 24) pode aumentar a legibilidade, dependendo do tipo de letra usado. O site pessoal de Jeffrey Zeldman, por exemplo, usa um tamanho de fonte de 24px para a cópia do corpo, enquanto Vogue.com usa um tamanho de texto de 19px.
Antes de finalizar a escala real, porém, os designers devem certificar-se de que os tipos de letra usados no design foram finalizados. Tipos de letra diferentes podem parecer significativamente maiores ou menores, mesmo quando são tecnicamente do “mesmo” tamanho.
Escolhendo tipos de letra de coordenação
O que muitas vezes diferencia um design “profissional” de esforços mais amadores é a combinação de tipos de letra. A combinação eficaz de fontes é parte do instinto e parte da ciência, mas existem algumas diretrizes que os designers podem seguir para combinar fontes de diferentes famílias.
Primeiro, misturar serifas com sem serifas é significativamente mais fácil do que combinar duas serifas ou duas sem serifas. Mas não é tão simples como pegar qualquer serif e qualquer sans serif e juntá-los em um design.
Considere o contexto em que os tipos de letra serão usados. Por exemplo, se o design deve ser leve e divertido, certifique-se de que os tipos de letra se encaixam nesse clima. Se o design for mais sério, os tipos de letra devem refletir isso. Em outras palavras, o humor de qualquer tipo de letra que está sendo combinado deve corresponder.
Os designers também devem usar o contraste a seu favor. Combinar tipos de letra finos e grossos geralmente funciona melhor do que combinar dois que são muito semelhantes em peso.
Procure fontes com alturas x semelhantes (a distância entre a linha de base e a linha média das letras minúsculas em uma fonte). Isso ajuda a evitar conflitos entre os tipos de letra. Outras coisas que ajudam a evitar conflitos incluem kerning e formas de caracteres semelhantes. Fontes com letras muito redondas não devem ser combinadas com fontes mais quadradas.
Embora as diretrizes possam ser úteis na criação de combinações de fontes, nada substituirá a experimentação e a prática. Os designers devem gastar tempo experimentando tipos de letra e praticar combiná-los sempre que puderem. Encontrar algumas combinações de fontes alternativas que podem funcionar em vários contextos também é útil para projetos em que o orçamento e os recursos disponíveis não permitem muitas tentativas e erros.
Com essas diretrizes em mãos, os designers podem seguir o processo de quatro etapas que a fonte de tipografia da Web Better Web Type define para criar combinações eficazes:
- Encontre uma fonte âncora para o seu texto principal
- Encontre algumas fontes secundárias para possíveis combinações
- Avalie as combinações
- Elimine/escolha combinações de fontes
Considerações adicionais
Experimentar diferentes estilos e pesos depois de selecionar os tipos de letra finais pode criar níveis adicionais de hierarquia sem ter que criar títulos principais superdimensionados. Manter os tipos de letra aproximadamente do mesmo tamanho, mas deixando o título mais importante em negrito, enquanto o menos importante em itálico cria uma hierarquia visual definida.
O mesmo pode ser feito com a cor. Um subtítulo em uma cor de destaque se destacará mais do que um subtítulo da mesma cor do corpo do texto. Os designers devem brincar com a cor em seus subtítulos para separar o texto mais importante sem depender apenas do tamanho do tipo.
O espaçamento também pode ser usado para separar títulos e subtítulos importantes. Criar mais espaço ao redor dos títulos para que eles se destaquem do corpo do texto os torna ainda mais proeminentes. Por outro lado, os subtítulos com espaçamento igual ao do corpo do texto tornam-se menos importantes.
Até mesmo o espaçamento entre caracteres pode ser usado para criar hierarquia. O espaçamento entre caracteres pode tornar uma linha específica mais proeminente. Isso é particularmente eficaz quando combinado com letras maiúsculas. Os designers devem ter cuidado para não exagerar, pois também pode parecer amador se usado em demasia.
Conclusão
Experimentação e prática são as melhores maneiras de dominar a hierarquia tipográfica, mas aprender essas diretrizes ajudará os designers a começar com o pé direito. Aprender como tamanho, cor, espaçamento, peso e outros fatores contribuem para uma hierarquia eficaz é o primeiro passo.
Uma vez que esses fundamentos estejam estabelecidos na mente de um designer (e prática), eles podem criar de forma mais intuitiva hierarquias visuais que seguem ou quebram as “regras” conforme necessário para criar designs únicos que sejam inspirados e agradáveis para os usuários.
• • •
Leia mais no Blog Toptal Design:
- Projetando para legibilidade - Um guia para tipografia da Web (com infográfico)
- Compreendendo as nuances da classificação de tipo de letra
- Fundamentos do Design – Um Guia para a Hierarquia Visual (com Infográfico)
- Estilos de fonte para Web e design de impressão
- Impulsione seu UX com hierarquia visual clara