Tipografia para web – Parte 02

10 dicas para que você melhore a aplicação da tipografia nos seus layouts web tornando-os mais eficazes e atraentes.

tipografia-para-web-02

Eae, tudo bele?

Por mais que vejamos vídeos, animações e postamos nossas fotos em redes sociais, a web continua sendo dominada por textos. E mesmo em sites onde outras formas de conteúdos não textuais predominam precisamos de textos para comunicar, direcionar ações e hierarquizar informações.

E é aí que entra a tipografia.

Neste contexto apresentarei algumas dicas de tipografia para web para que você se sinta mais confortável na hora de projetar seus layouts.

Sugiro também uma leitura complementar da trilogia sobre Guia sobre Tipografia(CLIQUEI AQUI PARA LER) que temos aqui no blog. Neste artigo temos algumas questões abordadas na trilogia citada só que adequadas a aplicação na web. Ok?

Vamos as dicas?

1 – Defina bem a hierarquia das informações

globo

Por que seus projetos web devem ter a hierarquia das informações bem definida? Porque isso indicará por onde começa a leitura e como proceder.

Imagine um portal com todos os textos em tamanhos e espaçamentos idênticos. Eles formariam blocos de textos uniformes e você não identificaria o que é título, o corpo do texto de uma notícia, entre outros. Tudo isso porque falta hierarquia.

A tipografia pode fornecer a hierarquia desejada. Você pode destacar uma parte do texto através de separações, da variação de cor, do tamanho do corpo, do peso do tipo, do contraste.

Ao destacar partes de um texto você traz uma ordem que orienta o leitor definindo a função de cada trecho, a importância e a sequência a seguir.

2 – Garanta um alinhamento seguro

forecaster

Os tipos de alinhamento mais comuns são: à esquerda, centralizado, à direita e justificado.

Para nós que moramos no ocidente é natural a direção de leitura começar pelo canto superior esquerdo e depois seguir para esquerda. Seguindo esta lógica é interessante alinhar os textos a esquerda para facilitar a leitura já que todas as linhas são iniciadas em um mesmo local de forma regular. Quando estamos lendo e pulamos de linha, a linha sequente estará alinhada com as anteriores.  Já o mesmo não ocorre com blocos de textos alinhados à direita o que dificulta muita a leitura, principalmente em textos longos.

De uma forma geral o alinhamento mais seguro para a maioria dos casos e mais usado é o alinhamento à esquerda (Veja imagem acima).

Com essas informações você pode estar imaginando que o alinhamento justificado, por manter a esquerda um alinhamento regular, também é indicado para construção de sites. Porém pode ser um engano. Apesar da aparência organizada que este alinhamento oferece, o resultado no navegador é uma justificação forçada com lacunas entre palavras. Portanto, estude bem e tenha parcimônia ao utilizar esse tipo de alinhamento na web.

No caso de textos centralizados eles podem ser usados de forma segura para compor títulos, subtítulos e citações.

3 – Atente-se aos fatores de leiturabilidade e legibilidade

Já foi dito no Guia de Tipografia parte 3 que dentre os vários fatores que analisamos para escolher um tipo, temos a Legibilidade e Leiturabilidade.

E esses fatores nunca estiveram tão juntos quanto quando planejamentos para web.

Legibilidade: diz respeito ao reconhecimento das letras individualmente.

Leiturabilidade:  diz respeito ao reconhecimento e a fluência dos tipos em sentenças, como frases e parágrafos.

Um texto pode ser legível, com boa identificação das letras, porém em caso de um texto longo a dificuldade para a leitura pode ser alta devido a escolha inadequada da fonte.

Tome cuidado com a escolha da fonte. Se pergunte se o projeto é “para ver ou se é para ler” (saiba mais aqui Guia de Tipografia parte 3 )

O conteúdo textual de um site é grande parte “para ler” ou seja, quando você constrói um site você deve ser preocupar com a leiturabulidade. E neste caso as fontes mais tradicionais, e principalmente sem serifa são mais indicadas.

Agora caso existam seções do site que necessitam transmitir através da tipografia um maior impacto visual, como por exemplo, um logotipo, um título ou chamada, você pode classificar o projeto como “para ver”. Com isso o foco será mais na legibilidade do que na leiturabilidade. Nestes casos fontes cursivas e do tipo fantasia podem ser uma boa opção.

4 – Cores e contrastes – Cuidados com as combinações de fundos e textos

paavola

Quando o Designer trabalha com Tipografia e cor todo cuidado é necessário para manter/tornar o conteúdo visível e sem causar qualquer tipo de tensão durante a leitura.

Garanta que a cor do seu tipo se difere da cor de fundo. Por que encontramos tantos sites com cor de fundo branco e e o texto cinza escuro ou preta? Porque essa combinação é tão diferente que gera o contraste suficiente para facilitar a leitura. Simples assim.

Enfatizo também que o contraste não é somente em relação a matiz. Quando falamos sobre cores entendemos que o contraste é a distinção que percebemos em relação a matiz, saturação ou luminosidade da cor. (para saber mais acesse o nosso artigo Guia sobre Cores) 

Então certifique-se que existe sempre um contraste em relação a essas propriedades das cores quando fizer a combinação de textos e cor de fundo de interfaces.

5 – Evite utilizar mais de três famílias tipográficas

onea

Não exagere na quantidade de fontes quando fizer suas escolhas. Na maioria dos casos, use no máximo até três fontes diferentes, sendo o ideal duas ou uma. O risco de seu projeto se tornar um trabalho tosco é grande quando você não toma esse cuidado.

Como já disse em outro artigo: nada de coisas escalafobéticas, hein Galucho! Usar vários tipos diferentes pode resultar em um trabalho poluído, “amador” e desagradável.

Na imagem acima temos o exemplo de um site que possui somente com uma fonte e trabalha apenas com variações de peso e tamanho para gerar contraste e hierarquização.

6 – Prefira combinações de tipos que tenham contraste

Usar  famílias do mesmo estilo, mesmo sendo diferentes  como por exemplo Arial e Helvetica,  podem causar pouco contraste e tornando assim a combinação quase que homogênea. Procure utilizar, por exemplo, uma fonte sem serifa (Arial) e uma serifada (Georgia) causando assim um maior contraste e uma melhor visual.  e caso prefira realmente utilizar famílias do mesmo estilo, procure variar no peso, tamanho, inclinação e também na cor do texto.

7 – Usualmente Sans serif trabalha bem no corpo de texto e Serif em títulos

wikipedia

Apesar de uma pesquisa realizada usabilitynews.org. indicar que tipo serifados como Georgia e Times News Romam serem mais atraentes, para o corpo de texto web a melhor aposta é sempre no tipo de letra sem serifa, pois é muito mais fácil de ler na tela.

Tanto que a fonte Verdana, que é do tipo sem serifa, foi projetada especialmente para exibição em tela de computador. Fontes serifadas têm uma maior chance de apresentar mal, tornando-se borrada ou mesmo pixelizada.

Claro que hoje em dia temos tecnologia avançada (como telas de retina, 4k, maiores resoluções e etc) e os tipos serifados não prejudicam tanto a leitura como antigamente, mas a escolha sem serifa sempre será mais segura.

Na maioria dos casos deixe os tipos serifados para títulos, subtítulos e textos curtos que precisam chamar atenção. O site do Wikipédia (imagem a cima) é um bom exemplo disso.

Títulos e outros blocos menores de texto dispostos em fontes serifadas criam um equilíbrio quando dispostos juntos a blocos maiores sem serifa.

Mas é evidente que optar por tipos sem serifas no corpo de texto e serifadas nos títulos não deve ser encarado como um dogma ou uma regra rígida. Use o bom senso.

8 – Cuidados para não estreitar e nem aumentar demais o espaço entre linhas

A entrelinha é o espaço entre duas linhas de texto. Através da propriedade CSS line-height você pode definir o espaço entre as linhas. Quanto maior o valor mais você aumenta o espaço entre linhas e o inverso ocorre quando você diminui o valor.

Devemos tomar cuidado para não aumentar muito correndo o risco de transformar os textos praticamente em “tópicos” ou estreitar tornando o texto um emaranhado de letras inelegíveis.

Procure sempre manter este espaço de forma harmoniosa.

9 – Promova uma largura dos blocos de texto mais adequada

tableless

Blocos de textos muito largos podem dificultar a leitura e cansar o olho mais rapidamente. Por isso deve-se ter um cuidado com a adequada composição do texto. Normalmente quantidade por linha ideal está entre 10 a 15 palavras.

Você pode saber mais sobre o assunto  conferindo nosso guia sobre tipografia – parte 03(CLIQUE AQUI)

10 – Tenha cuidado com conteúdos copiados de softwares de edição de textos

Muito cuidado ao copiar textos de softwares de edição de textos para seu HTML ou CMS como, por exemplo, o WordPress. Isso pode resultar em caracteres estranhos.

Esses softwares de edição de textos, tipo Word, podem estar usando uma codificação de caracteres diferente de UTF-8. Como HTML trabalha com UTF-8 ele interpretará mal o texto da copiado e colado destes editores transformando caracteres específicos em combinações bizarras de letras aleatórias e sinais.

E como resolver esse problema?

A melhor maneira de evitar isso é para converter o texto copiado colando em um editor de texto simples, tipo o bloco de notas, em seguida, copiá-lo de lá e colá-lo no CMS ou editor HTML.

Conclusão

Tipografia com certeza é uma das parte mais importantes de um layout web. Saber utiliza-lá com bom senso, boa estética e com boa função é o ideal para qualquer projeto.

Espero que essas dicas lhe ajudem a estruturar a tipografia de um layout para web de forma harmonioso obedecendo alguns princípios primordiais que promovem uma boa leitura aos usuários.

Confira também nossos outros artigos sobre tipografia que temos aqui no Chief:

http://chiefofdesign.com.br/tipografia-para-web-parte-01/
http://chiefofdesign.com.br/guia-tipografia-parte-01/
http://chiefofdesign.com.br/guia-tipografia-parte-02/
http://chiefofdesign.com.br/guia-tipografia-parte-03/
http://chiefofdesign.com.br/tipografia-para-conversao/
http://chiefofdesign.com.br/5-formas-interessantes-de-causar-um-impacto-visual-atraves-da-tipografia/

E você? Também tem alguma dicas sobre tipografia na web? Deixe seu comentário!

Forte abraço!

Até mais.

Referências:

http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

http://www.creativebloq.com/typography/rules-web-typography-learn-rules-type-setting-web-2131890

http://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.

  • Alexandre Costa

    Fala David. Curto muito o conteúdo aqui do Chief e realmente recomendo para amigos e parceiros de trabalho. Mas há um tempo, venho percebendo que os erros de digitação/edição nos textos têm quase atrapalhado a leitura. Não quero ser o chato, reclamão, etc. Mas um texto revisado deixaria o conteúdo muito mais interessante para os leitores e de fácil entendimento também. Abraço.

    • Olá Alexandre.

      Obrigado pelo comentário. Procuramos sempre trazer o melhor para vocês. Infelizmente por termos algumas limitações (ser um projeto praticamente solo, tempo, etc) sei que temos coisas a melhorar.

      Estamos trabalhando para corrigir o que encontrarmos de errado e melhorar a qualidade dos posts.

      Valeu pelo toque. :)

      Abraço!