Como grande parte do conteúdo disponível na Web é texto, é essencial que os web designers entendam os princípios básicos da boa tipografia. Ter esse conhecimento permite que os projetistas se comuniquem com mais eficiência, permitindo que eles criem melhores designs e sites mais fáceis de usar.

Para designers mais experientes, a definição de texto pode ser natural, mas, para aqueles que estão apenas começando, decidi criar uma lista dos básicos que você deve ou não fazer. Essa lista não apenas lhe ensinará os fundamentos, mas também poderá usá-la como uma lista de verificação para trabalhar em projetos futuros. Aqui vai:

Estabelecer uma hierarquia tipográfica

Uma hierarquia tipográfica pode ser estabelecida usando uma variedade de métodos, como tamanho, peso, cor e contraste. Sua finalidade é dar estrutura às páginas e orientar o usuário através do conteúdo. Sem uma hierarquia clara, o texto torna-se muito mais difícil de digitalizar e, portanto, geralmente mais difícil de ler. Basta dar uma olhada nos exemplos abaixo. À esquerda, o texto tem um tamanho e um peso, por isso é difícil diferenciar entre títulos e texto do corpo. Enquanto isso, à direita, temos o mesmo conteúdo, mas com uma hierarquia tipográfica clara, por isso é muito mais fácil distinguir entre os diferentes elementos.

Aqui eu usei apenas tamanho e peso para estabelecer minha hierarquia, mas para obter resultados ainda melhores, você pode experimentar também cores e contrastes.

hierarquia

Não faça o texto muito pequeno

Nem todo mundo tem visão 20-20, por isso é importante ter certeza de que o texto do seu corpo é grande o suficiente para as pessoas lerem confortavelmente. Pessoalmente eu recomendaria não menor que um tamanho de 14pt.

Tamanho do texto

Escolha uma fonte apropriada para o corpo do texto

Outro fator importante quando se trata do texto do seu corpo é a legibilidade. Embora um tipo de letra como o Satisfy possa ser adequado a um design com uma estética feita à mão, o uso de um tipo de letra como este para o texto do seu corpo terá um impacto negativo nos usuários. Isso é porque é muito mais difícil de ler do que sua serifa normal ou sem serifa. Veja os exemplos abaixo e você perceberá o quanto o seu cérebro tem que trabalhar mais para entender as palavras à esquerda em comparação com as da direita.

escolha de fonte

NÃO use muitas fontes diferentes em uma página

Serviços como Typekit e Google Fonts podem oferecer acesso a milhares de fontes, mas isso não significa que você precise usá-los todos. Como você pode ver no exemplo abaixo, a menos que seja feito muito bem, usar várias fontes pode ser muito perturbador. É por isso que geralmente recomendo não usar mais do que 2 ou 3.

muitas fontes

Dê sua sala de texto para respirar

A falta de espaço em branco entre cada linha pode afetar a legibilidade, pois dificulta o rastreamento do olho de uma linha para a próxima. No entanto, esse problema pode ser facilmente resolvido aumentando-se as alturas de linha, mas tenha cuidado para não exagerar, muito espaço também pode afetar a legibilidade de maneira negativa.

altura da linha

NÃO faça uso contínuo de todas as tampas

As pessoas não estão acostumadas a ler grandes blocos de texto em letras maiúsculas e, por isso, é realmente mais difícil para as pessoas lerem. Não só isso, mas as pessoas costumam associar todas as tampas com gritos ou agressão e quando se trata de cópia de marketing pode se deparar com bastante spam. Devido a isso, é importante pensar em como e quando você usará todas as letras maiúsculas e certifique-se de usá-lo com moderação.

todas as tampas

NÃO tente limitar os parágrafos a 40 a 60 caracteres por linha

Se uma linha for muito longa, o leitor gradualmente começa a perder o foco e pode ter dificuldade em ler de uma linha para a outra. Se uma linha é muito curta, faz com que o olho do leitor retorne com muita frequência, o que perturba seu ritmo. Isso também pode fazer com que eles comecem a ler a próxima linha muito cedo, fazendo com que eles percam as palavras da linha anterior. É por isso que o tamanho ideal da linha para o corpo do texto é cerca de 40-60 caracteres por linha.

caracteres por linha

NÃO use grandes quantidades de texto centralizado

O texto centralizado é difícil de ler porque as bordas do bloco de texto são desiguais, o que dificulta a digitalização, pois cada linha tem um ponto de partida diferente. Blocos de texto centralizados também são difíceis de alinhar a outros objetos na página e são geralmente considerados bastante amadores. É por isso que, como todas as letras maiúsculas, é melhor usar o texto centralizado com moderação, optando pelo texto alinhado à esquerda como padrão.

texto centrado

Verifique se há contraste suficiente entre o texto e o plano de fundo

O contraste é outro aspecto da tipografia que pode afetar a legibilidade. Se não houver contraste suficiente entre o texto e o plano de fundo, o conteúdo poderá ficar ilegível.

contraste

Você tem algo a acrescentar? Que dicas você daria aos novos designers que estão começando? Deixe-nos saber nos comentários.