Especial Tipografia para Web

A tipografia domina a web: cerca de 95% dela é tipografia. O web designer inteligente sabe disso e, portanto, vai se dedicar muito cuidadosamente para a obtenção de uma boa tipografia em qualquer site que esteja trabalhando. Em sua busca para fazer tipo funcional e atraente para o leitor, ele tem que considerar um monte de diferentes fatores ao planejar a arquitetura de informação do site. Que tipo de fontes são as mais legíveis? Quais fontes são fáceis para os leitores a percorrer? Devido a todas estas perguntas e considerações, não é assim tão fácil definir a tipografia para um site na primeira tentativa. No entanto, temos a seguir as melhores práticas de tipografia:

Títulos

Os títulos são sem dúvida muito importante, visto que a maioria das pessoas só leem manchetes na Internet. Então você tem que fazer o tipo de letra dos títulos se destacar para chamar sua atenção e persuadi-lo a ler mais. De acordo com o estudo da Smashing Magazine a partir de 2013, é quase um empate entre fontes sans-serif e serif para os títulos, com 51% das posições usando sans-serif e pouco mais de 47% usando serif. Fontes serif tornaram-se cada vez mais popular nos últimos anos, principalmente devido à crença de que elas se destacam nas manchetes e proporcionam estrutura legível aos visitantes do site. Sobre a questão da popularidade, as duas fontes com serifa mais populares para manchetes são Geórgia e Chaparral Pro enquanto as duas fontes sans-serif mais populares para manchetes são Arial e Freight Sans Pro. Enquanto você certamente pode experimentar com seus próprios tipos de letra para os títulos em seu site, saiba que a popularidade dessas fontes é por causa do feedback positivo de leitores.

Corpo

O corpo do seu site torna-se a parte mais importante do seu conteúdo, mesmo que menos pessoas o leiam (em comparação à leitura de manchetes).  O vencedor, claro, quando se trata de do corpo de texto é serif. De acordo com o mesmo estudo, 61,5% dos sites utilizam fontes com serifa em seu corpo de texto. As fontes com serifa utilizadas com mais frequência para corpo de texto são a Geórgia e a Chaparral Pro, quase espelhando as proporções para os títulos. Na frente do sans-serif, as fontes sans-serif mais frequentemente utilizados para corpo de texto são Arial e Helvetica. Vale ressaltar que o estudo também determinou que a maioria dos sites atualmente não usa quaisquer fonte padrão como a sua principal fonte. Cerca de 39% do corpo do texto e 66% das manchetes nos sites analisados ​​no estudo não usam fontes padrão. Uma teoria para este achado um pouco surpreendente é que serviços como Fontdeck e Typekit torná-lo mais fácil do que nunca para as marcas para se destacarem de uma forma única de seus concorrentes. Sim, você pode optar pelo seguro e escolher uma “segura” fonte padrão, mas muitos sites têm corajosamente optado contra isso. Eles estão descobrindo que seus usuários são muito receptivos a fontes não convencionais, desde que eles não firam a experiência do usuário.

Fundos

O estudo Smashing Magazine descobriu que a maioria dos sites preferidos utilizam um contraste de claro-escuro, ou seja, texto mais escuro sobre um fundo de cor clara. No entanto, é  importante ressaltar que esse contraste está ficando menos “duro”. Por exemplo, alguns sites estão experimentando um texto cinza-escuro num fundo bege. Em tal esquema, o contraste é menos pronunciado, mas ainda fornece aos leitores uma experiência de leitura confortável, que facilita a digitalização/cópia de cada linha. Não é novidade que o velho favorito de texto preto em um fundo branco ainda é o “padrão ouro”. Além de ser muito fácil de ler por causa do contraste, o efeito preto-sobre-branco também remete ao formato de cor clássica nos jornais, o que também explica a sua popularidade na Internet.

Tamanho da fonte dos títulos

A tendência é definitivamente maior é melhor, pelo menos tanto quanto as manchetes na web. 38 pixels é a média nos dias de hoje para as manchetes. Isso é realmente um aumento de 10 tamanhos de pixel desde o último estudo do Smashing Magazine em 2009. Claramente, para atrair principalmente os usuários que leem basicamente só os títulos, mais e mais sites tiveram de recorrer ao aumento do tamanho das suas manchetes. Se você estiver curioso, o blog de BootstrapBay usa a fonte Roboto em 28 pixels para as manchetes, 24 pixels para os títulos e 16 pixels para o corpo de texto. Porém, os tamanhos de fonte mais utilizada para manchetes variam de 20 a 32 pixels, colocando blog do BootstrapBay no meio do que é popular.

Tamanho da fonte do corpo de texto

mesma tendência vale para as fontes do corpo de texto: maior é melhor. No estudo, quase o mesmo número de sites utilizados 14 e 16 pixels para cópia de corpo. Em comparação com o estudo de 2009 da tipografia web por Smashing Magazine, isto representa um aumento de dois tamanhos de pixel, que usavam 12 e 14 pixels para o corpo naquela época. Mais uma vez, o blog de BootstrapBay é um exemplo de melhor prática tipografia que evoluiu com os tempos: 16 pixels para a o corpo. Comprimento de linha A regra, em geral, é que um comprimento da linha mais longa deve ser igual a uma altura da linha superior. Quando você multiplica o tamanho da fonte do seu corpo cópia por 1,46, você terá a altura da linha ideal para o seu site. Você pode, então, adaptar para que o estilo de sua fonte.Quando você toma este produto e, em seguida, multiplicar por 24.9, você é deixado com o comprimento da linha ideal do seu site. Qualquer layout eficiente precisa levar em consideração seus elementos para não se parecer muito confuso.

Quantos caracteres por linha?

O estudo constatou que a maioria dos sites hoje, na verdade, média 83,9 caracteres uma linha com resolução widescreen. Por que é assim? É provável que os designers tentem equilibrar tamanhos de fonte com a quantidade de texto mostrado em exposições estreitas. Se você aumentar o número de caracteres além dessa média, isto iria resultar em uma experiência de leitura mais difícil, os tamanhos de fonte teriam que cair para acomodar o número de caracteres por linha.

Tipografia Responsiva

Em 42% dos sites no estudo havia tipografia responsiva. Considerando que o “design responsivo” tem apenas cerca de quatro anos de idade. As tendências da web ditam alteração de design com freqüência e rapidez, mas estes dados mostram que algumas tendências são muito consistentes e confiáveis, como por exemplo também, a crescente mudança no tamanhos de fonte, tanto para títulos e corpo.

Fonte: 1

Para saber mais: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s