Curso Web Design | 10 dicas de Tipografia e Diagramação para web

---

10 dicas de Tipografia e Diagramação para web Posted: 19 Jun 2013 11:28 PM PDT 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. 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. 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: 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. 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”: 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. 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. 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. 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. 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? 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!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610