5 dicas sobre tipografia para melhorar o seu projeto // Niag Alves

Um breve resumo sobre a tipografia.

A tipografia se iniciou na época dos homens das cavernas, bem antes deles começarem a falar, onde pintavam nas paredes para avisar que iriam sair, avisar sobre algo que viram ou até mesmo se tinha perigo por perto.

Algum tempo depois se iniciou no Egito que também desenhavam em paredes e mais além veio a revolução de Gutenberg que foi um grande avanço para a tipografia no qual começou aparecer diversos tipos de fontes. Aqui um breve vídeo explicativo:

Por que tipografia?

O design é 95% tipografia, o segredo é escolher a fonte mais adequada para o seu projeto.
A tipografia deve ter uma conexão com as imagens que vão ser utilizadas no seu projeto, não adianta nada utilizar fontes com peso muito alto e ter imagens que não combinem ou até mesmo utilizar fontes diferentes das que estão sendo utilizadas nos logos. Isso vai deixar com que seu projeto fique feio e confuso para os usuários.
É fácil de aprender! Não existe nenhum pré-requisito para aprender, basta tirar algumas horas do seu tempo para focar nisso e depois soltar a imaginação criando seu próprio protótipo e ir testando as variadas formas de fontes existentes que estão disponíveis para você. Um bom lugar para buscar fontes é no Google Fonts. Às vezes a única coisa que falta para o seu projeto melhorar é uma tipografia bem definida.

Tamanho de fonte?

Legibilidade é importante, utilizar fontes pequenas para textos muito grandes podem comprometer o conteúdo e elegância do seu projeto. Textos no tamanho entre 14px e 18px já estão em um padrão interessante. Vale lembrar dos espaçamentos, NUNCA se esqueça dos espaçamentos, não podem ser muito separados, mas também não podem ficar tão juntos, pois assim fica adaptável e fácil de ler em qualquer dispositivo.

Largura de textos?

Não faça com que o usuário precise ir da esquerda até o final da tela (direita) para ler um texto ou uma noticia, isso torna a leitura cansativa, determine tamanhos para os blocos de textos utilizando max-width. Outra sugestão é por 13 palavras por linha é recomendado para um bom corpo de texto.

Alinhamentos:

Alinhamento a direita: Pouco utilizado na web, a leitura não é tão simples e cada linha começa em pontos diferentes, mas se bem utilizada em um projeto pode ficar bonito.
Alinhamento centralizado:: Utilizado em títulos e pequenos blocos de textos como por exemplo: produtos de um site ou apresentação de um serviço. Textos centralizados não irão facilitar a leitura de textos longos, pois o início de cada linha é diferente então, esqueça!
Alinhamento justificado: Não é recomendado para web! Pode gerar espaçamentos enormes e diversos problemas relacionados a leitura.

Dicas de cores:

Utilize branco ou preto no corpo do texto: Escalas de cinza ou cores próximas ao branco ou preto.
Tons de cinza para hierarquia: Tons de cinza você pode decidir o que o usuário deve ver primeiro.
Não utilize fundos com cores saturadas: Evite sempre as cores padrões das paletas como red, blue, green, outras.
Comunique com as cores: Defina uma paleta de cor para o projeto que exista uma interação. Por exemplo: Uma cor para links e botões. Um site com bastante combinações de cores você pode encontrar aqui.
Tom sobre Tom: Pode ser uma forma de criar um visual mais bonito e atraente.
A cor do cliente não precisa estar em todo o projeto: Utilizá-la em títulos, links e outras partes pode ser uma alternativa.
Texto em cima de imagens: Utilize o preto ou branco. Dependendo da claridade da imagem podemos adicionar uma sobreposição.