anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

10 dicas de Tipografia e Diagramação para web

capa

Grande parte do conteúdo disponível na web é composta por texto. Portanto, é essencial para web designers iniciantes compreenderem os princípios básicos da tipografia e da diagramação para web. Possuir esse conhecimento faz com que a comunicação em uma página seja muito mais eficaz, permitindo criar projetos melhores e sites mais bonitos, com uma leitura mais agradável.

Para os designers mais experientes, definir o texto e seus padrões pode ser uma tarefa natural. Bons hábitos como ler bastante – e inclua aí não somente a leitura de livros, mas também de revistas, jornais e outros sites – e prestar atenção na composição visual, na utilização das famílias tipográficas e na utilização do corpo do texto no espaço da página, ajudam muito a desenvolver o senso estético. Mas se você está começando ou ainda não presta muita atenção nesses detalhes, preste atenção nesta lista básica com 10 dicas básicas e importantes sobre o assunto. Espero que ela lhe auxilie e que você possa utilizá-la como referência em seus trabalhos.

1) Crie elementos de identificação para o texto

Uma das maneiras mais simples e corretas para estruturar páginas web é o de criar elementos de identificação através de uma variedade de métodos, como: o tamanho da fonte, o estilo (negrito, itálico, sublinhado etc), sua cor, entre outros métodos. Através desses elementos é possível orientar o usuário guiando-o na leitura do texto. Nos exemplos abaixo o texto á esquerda é de um único tamanho e não tem qualquer elemento diferenciador entre os blocos. No lado direito, temos o mesmo conteúdo, mas com elementos nítidos de diferenciação, o que acaba tornando-os mais fáceis de distinguir dentro da estrutura.

Hierarquia

Você também pode alcançar resultados interessantes fazendo modificações nas cores ou através do contraste entre elementos.

2) Cuidado com o tamanho

Nem todo mundo tem visão 20-20, por isso é importante ter certeza de que o corpo do seu texto é grande o suficiente para as pessoas possam ler sem dificuldade. Devemos sempre ter me mente que o texto de uma página web pode ser acessado por pessoas de 8  a 80 anos e portanto a visibilidade deve servir a todos os grupos de usuários. Por esse e outros motivos não é recomendada a criação de textos com tamanho de letra menor do que 14 pt.

tamanho do texto

3) Use fontes legíveis

Outro fator importante quando se trata de seu corpo de texto é a legibilidade. Embora um tipo decorado possa atender um projeto com uma estética artesanal, usando um tipo cheio de detalhes você poderá causar um impacto negativo em seus usuários. Isso é porque esses tipos são muito mais difíceis de ler do que a média de tipos com serifa ou sem-serifa, como pode observado na figura a seguir:

Serifas e sem serifas

4) Use no máximo 3 fontes por página

Serviços como Typekit e o Google Fonts podem lhe fornecer acesso a milhares de fontes, mas isso não significa que você tenha que usar todas! Como você pode ver no exemplo abaixo, a menos que você deseje um efeito muito específico, usar vários tipos de letras pode resultar em um trabalho muito poluído e desagradável. É por isso que recomenda-se o uso de 2 ou 3 fontes por página, no máximo, para a composição dos textos da página.

varias fontes

5) Espaços em branco também contam

A falta de espaço entre cada linha pode afetar a legibilidade porque embaralha a visão e dificulta a passagem de uma linha para outra durante a leitura . Não deixe de observar se a falta de espaço está influenciando negativamente na visualização do bloco de texto. Aumente o espaçamento quando for necessário.  E cuidado: excesso de espaço também torna a leitura fragmentada e afeta a maneira como vai ser lido. Observar a clareza do todo pode ser uma boa opção para resolver a questão. Observe a figura abaixo e perceba como o exemplo à esquerda parece mais “pesado”:

espaçamento

6) Não faça uso contínuo de letras maiúsculas

As pessoas não estão acostumadas a ler grandes blocos de texto com letras maiúsculas em conjunto. Por isso é realmente difícil pensar em uma utilização desse tipo para as pessoas lerem. Não só somente isso: as pessoas em geral costumam associar maiúsculas como formas de expressar gritos ou agressividade em um texto. Portanto, é importante pensar sobre como e quando você vai usar letras maiúsculas e a certeza de que você irá usá-las com moderação.

maisuculas x minusculas

7) Não crie parágrafos com mais de 40 a 60 caracteres por linha

Se a linha for muito longa, o leitor começa gradualmente a perder o foco e muitas vezes pode ter dificuldade para prosseguir de uma linha para outra. Isso ainda pode produzir um cansaço visual muito grande para quem acompanha a leitura de um canto a outro da tela. Por outro lado, se uma linha é muito curta, isso pode fazer com que os olhos do leitor façam um movimento repetitivo muito rápido, o que pode causar perturbações no ritmo da leitura. Por isso que o comprimento da linha ideal para o corpo do texto é em torno de 40 a 60 caracteres por linha. É uma boa medida para tornar o seu texto mais harmônico e menos cansativo.

comprimento da linha

8) Cuidado com alinhamento centralizado do texto

Ler textos centralizados deixa o seu layout muito irregular e a não ser que seja isso mesmo que você deseja, deve pensar bem antes de fazê-lo. Blocos de texto centralizados também dificultam na hora de alinhar o texto a outros objetos na página (e muitas vezes passam a sensação de que o diagramador é bastante amador). É por isso que, assim como no caso das letras maiúsculas, você deve usar o texto centralizado com cautela.  Procure adotar sempre o alinhamento padrão (à esquerda) como referência.

alinhamentos

9) Preste atenção ao contraste

Todos sabemos que o contraste serve para destacar, definir e mesmo direcionar a visão para um determinado elemento da página ou ainda definir a direção ou orientação de leitura de um texto. Ele também está diretamente ligado a legibilidade. Pense nele como um elemento importante para dar ênfase ou mesmo dar clareza aos elementos de sua página. Portanto, tenha muito cuidado ao definir as cores dos tipos e procure destacá-los das cores do fundo.

contraste

10) Nunca use fontes manuscritas em letra maiúscula

Sim, eu sei e a maioria das pessoas sabe, mas ainda vejo estudantes realizando essa “proeza”: escrever uma palavra (e às vezes parágrafos inteiros!) com uma fonte manuscrita em letras maiúsculas. Que barbaridade! Basta um pouco do bom e velho senso crítico para perceber na imagem abaixo que isso não dá certo… portanto NUNCA faça uma besteira dessas, ok?

manuscritas

Gostou das dicas? Tem alguma outra dica para acrescentar ou sugerir algo para designers que estão começando? Deixe o seu comentário no espaço abaixo dando a sua sugestão e lembre-se: o blog do Web design é feito para você! Queremos saber a sua opinião e receber mais sugestões sobre posts.

Um grande abraço, continuem estudando e… até a próxima semana!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Tipografia para Mangás e Animes
Tipografia para Mangás e Animes Olá pessoal! Nesse clima da ANIME FAN FEST venho trazer aqui