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 (CLIQUE 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
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
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
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
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
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
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:
https://www.chiefofdesign.com.br/tipografia-para-web-parte-01/
https://www.chiefofdesign.com.br/guia-tipografia-parte-01/
https://www.chiefofdesign.com.br/guia-tipografia-parte-02/
https://www.chiefofdesign.com.br/guia-tipografia-parte-03/
https://www.chiefofdesign.com.br/tipografia-para-conversao/
https://www.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/
