Blog

Para acertar as letras

guia de fontes

Conselhos básicos para acertar nas tendências, aplicar técnicas e escolher as melhores fontes para seus websites

Escolher uma boa fonte não é só uma questão de arte. Mesmo programadores e desenvolvedores precisam ficar, não apenas nos códigos mais eficientes, como também na melhor tipografia. Uma parte generosa de um site é composta de textos, o que já é um bom motivo para levar os tipos de letras à sério. E engana-se aquele que acredita que tipografia é só uma questão de leitura. A fonte é essencial na interface de sites e aplicativos. Errar nesse quesito significa sacrificar a experiência de navegação. Para saber por onde começar, a Revista W preparou um guia rápido com os primeiros passos para escolher a tipografia certa para o seu projeto na web.

Qual letra faz o seu tipo?

Existem alguns tipos de famílias de fontes entre as opções para projetos digitais. A própria W3C oferece uma extensa documentação sobre fontes para internet que tarzem também algumas especificações importantes sobre o tema e definem as categorias existentes.

Serifadas (Serif)

As fontes serifadas são aquelas que possuem mais detalhes como pequenos traços nas extremidades de cada letra. São como a Times New Roman, Bookman, Georgia, Garamond, entre outras. Por muito tempo foi difundido que tipografias desta família eram mais indicadas para projetos em papel, por conta da legibilidade. As fontes não serifadas se tornaram a opção comum para web por serem consideradas “mais fáceis” de renderizar no browser. Isso é válido quando estamos falando de um font-size de 12 pontos. Para valores de tamanho maiores, os dois tipos de fontes ficam parecidos na tela, no quesito legibilidade.

Não serifadas (Sans-serif)

Estas são as fontes feitas de linhas simples, sem detalhes, ou qualquer tipo de “enfeite”. Algumas das fontes do momento na web são Helvetica, Arial e Futura. Esses tipos são usados mais em projetos descolados e modernos. Eles ganharam o voto de confiança de web designers porque podem ser combinados com diferentes visuais. É claro que esta não é uma regra e, dependendo do caso, até uma mistura de tipografias, se bem equilibrada, pode funcionar.

Decorativas

Em termos de criatividade existem outros tipos de fontes que podem ser listadas. Elas estão presentes em elementos mais visuais como logos, botões e se integram mais ao design do site. As cursivas são um exemplo, como a Lucida Handwriting e Brush Script. Outro grupo tipográfico são as fontes Fantasia, que têm um estilo mais divertido, como a Curlz MT, a Papyrus e a Impact. Normalmente esses tipos não tem uma legibilidade tão boa para projetos digitais. Pelo menos não para grandes blocos de texto em uma página. Nesse caso, o bom senso é o melhor amigo do profissionais que está por trás da criação.

Monospace

Caracteres do tipo monospace são simétricos. Eles foram projetados para posuírem a mesma largura fixa. Um bom programador ou desenvolvedor vai se lembrar desse tipo porque são fontes comuns para códigos. Alguns exemplos são a Courier, Andale Mono e Monaco.

 

Tamanhos e hierarquias

Pensar no tamanho das fontes levanta uma série de detalhes que vão além do simples “favorece ou não a leitura”. Para se ter uma ideia, pensar nisso tem a ver com algo maior, que é o ritmo vertical do seu site, ou seja, a estrutura que irá conduzir o usuário pela página. Em primeiro lugar, não tente transportar as indicações do papel para a tela. O tamanho padrão para tipografia na web, que é exigido pelo browser é de 16px. A razão para este valor tem a ver com a distância da pessoa para a plataforma, no caso, do internauta para a tela do computador. Este é o tamanho mais confortável para que a leitura seja agradável levando em conta esta distância.

Pense nisso também quando optar pelo tamanho das fontes para smartphones, que normalmente ficam mais próximos dos olhos do usuário do que o monitor ou do notebook. Em geral, se estiver na dúvida escolha o 16px sem medo.

Unidades

Na internet as três unidades de medidas mais utilizadas são o pixel, a porcentagem e o EM. Este último é chamado de quadratim e corresponde ao tamanho do corpo quadrado da letra M maiúscula d uma fonte. O EM se popularizou principalmente por conta do aumento de projetos responsivos para web, um dos benefícios da medida que serão mostrados mais adiante nesta reportagem. A porcentagem também tem sido amplamente usada para sites adaptáveis a múltiplas telas por simplificar o ajuste dos elementos aos diversos tamanhos de telas de dispositivos. Já o pixel é a medida mais tradicional, que corresponde ao menor ponto possível em uma tela. lembrando que a densidade de pixels varia de acordo com o tipo de mídia.

Mas qual seria a melhor opção? Bem, dadas as informações sobre cada medida fica claro que se você está trabalhando em um site responsivo é melhor apostar em EM ou em medidas de porcentagem. O EM tem uma vantagem básica sobre o pixel que é a capacidade de redimensionamento. Caso o usuário queira dar zoom em um texto, poderá fazê-lo sem que tudo fique desfocado. No caso do responsivo, o EM facilita tudo porque não precisa da definição de breakpoints e garante a legibilidade de um texto em qualquer tamanho de tela.

esquema tipo

Para sites com muito conteúdo

Blocos de texto exigem reflexões sobre tamanhos e alinhamento:

• Alinhamento: Este aspecto também é uma questão de leitura. Há um bom motivo para grande parte dos textos serem à esquerda ou justificados. Essas opções facilitam a forma como estamos acostumados a ler, da esquerda para a direita, acompanhando as linhas. Isso explica porque blocos de texto alinhados à direita são difíceis de ler (começaríamos a ler de um ponto irregular). Textos justificados podem criar lacunas entre as palavras que também atrapalham a leitura. Os centralizados podem ser usados quando há pouco texto envolvido.

• Blocos de texto: Pense na composição do seu texto considerando o tamanho das linhas. Caso elas fiquem muito largas ou estreitas, isso pode prejudicar a experiência de leitura do visitante do seu site. Algo em torno de 60 a 90 caracteres por linha pode ser um bom começo. Mas tudo isso pode variar. Veja se o espaço em questão se harmoniza com o resto da página. O tipógrafo Robert Bringhurst acredita que se você multiplicar o tamanho da fonte em pixel por 30 o resultado será a largura ideal. (um texto de 16 px terá uma coluna de 480 px). Em todo caso, nada como visualizar um bloco de texto interagindo com o resto do design da página para uma boa análise nesse sentido.

Outros elementos

Existem muitas outras questões importantíssimas que precisam ser levadas em conta no quesito tipografia. Este é apenas um pequeno guia de algo que poderia render reportagens enormes, livros ou teses de mestrado. Pode não parecer logo de cara, mas a tipografia já é um estudo complexo no papel, e na web não seria diferente. O peso de uma fonte, por exemplo, que define se uma fonte terá estilo Light, Medium ou Bold, que são caraterizados pela grossura dos caracteres e nem todas as famílias possuem todos os pesos. Esse tipo de variação pode ser usado para demarcar hierarquia do conteúdo, como usar bold para títulos e light para textos, por exemplo.

O contraste com o fundo da página é outra questão importante, e diz respeito à cor tanto da fonte, como do background, algo crucial para a legibilidade. Imagine escolher uma textura para o fundo de um site que não cai bem com a fonte? Esses e outros requisitos fazem parte da tarefa de escolher a tipografia certa. Que esta pequena pincelada no assunto possa estimulá-lo a pesquisar mais e o faça levar as letras mais à sério.

 

Publicado originalmente na edição 162 (de janeiro de 2014) da Revista W

Comente