Um guia completo de tipografia para a web

Entenda os princpios da tipografia na web e saiba como melhorar a leitura dos usurios.

Mesmo que voc seja exclusivamente desenvolvedor front-end ou programador e passe

bem longe de qualquer assunto relativo a design importante saber um pouco sobre

tipografia. Afinal, a maior parte do contedo da web texto. Alguns at argumentam

que 95% da informao disponvel na internet est em linguagem escrita Estatsticas polmicas a parte, o fato que fundamental comearmos a tratar a tipografia no

apenas como algo bonitinho e sim como uma parte fundamental da user interface.

Se a maior parte do tempo que um usurio gasta em um site lendo o contedo nossa

obrigao fazer disto uma tarefa fcil e agradvel. A regra fundamental de no faa o usurio pensar deve tambm ser estendida a tipografia. Podemos adicionar no faa o usurio forar a vista, no faa o usurio colar a cara no monitor para entender o seu contedo Um site deve ser fcil de usar e para isto ele precisa ser fcil de ler. E usar desculpas do tipo Ah, mas ele pode aumentar o tamanho do texto pelo browser demagogia pura. Imaginar que todo usurio final sabe configurar o tamanho do texto

uma iluso confortvel. Minha tia demora para encontrar o cone do jogo de pacincia

na rea de trabalho e me liga toda vez que precisa espetar o pen drive na entrada USB Conhecer tipografia garantir que o seu usurio tenha uma boa experincia de

navegao independente de seu nvel de conhecimento tcnico e, consequentemente,

que seu cliente no perca visitas. Para isto necessrio conhecer alguns conceitos

bsicos. E pode ser at divertido No vou vomitar regras neste artigo nem ensinar como criar e escolher fontes. A minha inteno aqui fornecer algumas dicas tericas e

prticas sobre como melhorar a experincia de leitura na internet. Vamos a elas!

(E no. Simplesmente ficar longe da Comics Sans no te faz um expert em tipografia

para a internet.)

Alinhamento

A nossa direo natural de leitura no ocidente comea pelo canto superior esquerdo e

depois caminha para a direita. Este um dos motivos pelos quais textos alinhados a

esquerda ou justificados so mais fceis de ler, j que todas as linhas so iniciadas em

um mesmo ponto.

Blocos de texto alinhados a direita so difceis de ler j que o ponto inicial de cada linha

completamente irregular. Textos centralizados tambm possuem o mesmo problema,

mas podem ser usados para destacar blocos curtos de informaes como ttulos e

citaes.

O caso de textos justificados um pouco mais complexo. O problema principal aqui

que na internet no existe hifenizao. Por conta disto lacunas (tambm conhecidas

como rios) so criadas entre as palavras o que torna a leitura muito desagradvel. Ou

seja, justifique apenas textos bem curtos que voc possui um controle total. Palavra por

palavra. Se algo dinmico esquea pois muitas vezes o cliente final no vai ter este

tipo de cuidado.

claro que nenhuma destas regras inquebrvel. Mas para quebrar regras necessrio

primeiro conhece-las bem. Ento se estiver na dvida sobre qual alinhamento escolher

faa o seguro e alinhe esquerda sem justificar.

Classificao de Tipos

A tipografia para internet dividida em 5 famlias genricas de fonte. Existem outras

divises e categorias utilizadas em design. Mas como o foco aqui internet, s vou

destrinchar o que est valendo para a web. As imagens dos exemplos abaixo foram

retiradas da documentao da W3C no esboo CSS Font Modules Level 3.

Serif

So os tipos que contem serifas, ou seja, pequenos traos, ornamentos e/ou

prolongamentos que ocorrem no fim das hastes das letras.

Exemplos de tipos: Times New Roman, Baskerville, Bookman, Century, Georgia,

Garamond e Rockwell.

Sans-serif

Literalmente sem serifa. Este conjunto de tipos possui caracteres com hastes simples, sem nenhum tipo de ornamento.

Exemplos de tipos: Helvetica, Arial, Futura, Gill Sans, Univers e Frutiger

Cursive

As fontes desta familia possuem caracteres inclinados, ligados e/ou conectados

remetendo a escrita manuscrita. Tambm conhecida como Script ou Brush.

Exemplos de tipos: Comic Sans MS, Blackadder ITC, Lucida Handwriting, Brush

Script

Fantasy

So fontes puramente decorativas, mas que ainda representam caracteres. Normalmente

no possuem uma boa legibilidade.

Exemplos de tipos: Papyrus, Impact, Haettenschweiler, Copperplate

Monospace

Todos os caracteres das fontes monospace possuem a mesma largura fixa. Este tipo

frequentemente utilizado para cdigos de computador.

Exemplos de tipos: Courier, Prestige Elite, Fixedsys e Monaco

Algumas fontes podem entrar em mais de uma categoria. Por exemplo a Courier

monospace E serifada.

Qual famlia escolher

No vou entrar muito neste mrito por que isto j seria contedo suficiente para no

apenas um artigo mais livros inteiros sobre o assunto Mas, considerando a internet como meio, muitas vezes a escolha recai entre as duas principais categorias serifa e

sem-serifa. Afinal, ningum em s conscincia vai utilizar um tipo fantasy ou cursive

para longos blocos de texto na web. Eu espero. Por um tempo existiu um mito de que

fontes sem serifa tem a legibilidade melhor na internet por que os browsers renderizam

as serifas com menos nitidez Mas isto s valido se voc for considerar um font-size menor que 12 pontos. Em tamanhos maiores as duas categorias ficam empatadas e o que

deve ditar a escolha o estilo geral do design da pgina. Se voc no designer e no

faz ideia como escolher, o tipgrafo Oliver Reichestein criou uma analogia interessante:

Os tipos serifados so como padres e os sem serifa so como hackers. Vou explicar

melhor Um no exatamente melhor que o outro, mas padres possuem uma viso de mundo mais autoritria, enquanto hackers so mais democrticos. uma dica

interessante, mas no leve isto to a srio. No da para resumir toda a histria da

tipografia em uma analogia. Combinar os dois tipos de fonte tambm pode causar um

efeito de contraste interessante.

Tamanho

Se voc fez trabalhos para escola ou faculdade provavelmente se lembra daquelas

regrinhas da ABNT para diagramao de texto como tipo Times New Roman, tamanho

12, espaamento entrelinha 1.5. E isto bom. Para um papel. O computador no um

papel. O tamanho padro de texto de um browser 16px. Este no um nmero

aleatorio. Ele foi escolhido por uma razo. Quando lemos um livro ou um trabalho

acadmico seguramos o papel a uma distncia bem prxima dos olhos. Quando

mexemos em um computador desktop ou notebook a distncia em relao a tela muito

maior. Por isto necessrio que o texto esteja em um tamanho confortvel em relao a

esta distncia. E isto deve ser customizado de acordo com a mdia, afinal, esta distncia

de leitura tambm vai variar em um smartphone, tablet, televiso E todos estes fatores devem ser levados em conta. No geral, quanto maior a distancia do leitor em relao ao

meio maior dever ser o tamanho da letra. Se estiver na dvida faa o seguro e utilize 16

px.

A unidade de medida ideal

Existem diversas medidas para texto aceitas para tipografia na internet. So elas ponto

(1/72 de uma polegada), pica (12 pontos), milmetro, porcentagem, EM e pixel. Vou me

focar nas duas ltimas j que so as mais utilizadas para a web.

Para quem no sabe 1 EM (ou um quadratim) uma medida relativa e corresponde ao

tamanho do corpo quadrado da letra M de uma fonte. J um pixel uma medida

absoluta e corresponde ao menor ponto possvel em uma tela digital (a densidade de

pixels pode variar de acordo com a mdia, mas isto papo para outra hora).

Em todos os meus trabalhos para internet eu utilizo a medida EM para textos. Isto pode

ser encarado como uma questo pessoal, mas eu tenho alguns argumentos a favor do

EM. E no muitos em favor dos pixels

Usabilidade. Pode ser minoria mas existe sim quem queira alterar o tamanho do texto

pelo browser. Principalmente pessoas com algum tipo de deficincia visual. Voc no

quer que o seu layout quebre nesta hora, certo? E no caso de zoom? O texto fatalmente

ficar rasterizado se voc utilizar qualquer medida absoluta como o caso dos pixels.

Design responsivo. Sempre surge um aparelho novo para complicar a vida dos devs.

Por mais que estejamos preparados para smarthphones, tablets e computadores, o que

fazer quando surge algo fora destes padres? Sair por a editando o cdigo de todos os

sites que voc j desenvolveu? Largar o cliente na mo? Ficar caando break points em

pixels um trabalho sem fim e desnecessrio Utiizar EM garantir que seu texto possuir boa legibilidade independente do tamanhos de tela.

Proporo. Eu sou designer e desenvolvedora front-end. Mas existem pessoas que

dedicam suas vidas inteiras a tipografia e no a toa. uma cincia complexa e no to

subjetiva assim. Principalmente quando o assunto proporo e distncia, a questo

deixa de ser gosto pessoal e passa a ser matemtica. Por isso, mesmo no caso de

paddings e margens, quando se trata de textos melhor utilizar EM. Isto acontece por

que 1 EM exatamente igual ao valor quadrado da fonte ou seja, sua margem vai ficar

simtrica e proporcional. E mesmo que voc altere a famlia tipogrfica, no ser

necessrio tambm alterar as distncias.

E uma dica

Esta regrinha meio manjada mas sempre bom relembrar. Voc est com preguia de

calcular? Finja que EMs so pixels com um ponto no meio! Padronize para o CSS a

regra { font-size: 62.5%; }. Desta maneira 1 EM equivaler a 10 pixels. Com a base

decimal fica muito mais fcil de realizar a converso. Se voc precisar de 12 pixels, por

exemplo, s colocar 1.2em, 16 pixels sero 1.6 em, etc

1. html { 2. font-size: 62.5%; 3. }

Largura dos blocos de texto

necessrio tambm um cuidado especial com a composio do texto. Se o tamanho

das linhas for muito largo ou muito estreito isto dificulta a leitura e cansa o olho mais

rpido. De 10 a 15 palavras por linha a quantidade ideal. Ou cerca de 65 caracteres

(incluindo espaamento).

O escritor e tipgrafo Robert Bringhurst criou uma regra til que voc pode utilizar se

se voc quiser uma medida ainda mais precisa para a largura. Basta multiplicar o

tamanho da sua fonte em pixels por 30 que voc ter a largura ideal. Por exemplo se o

tamanho do texto 16px multiplique por 30 que voc ter a largura certa para a sua

coluna (no caso 480px). Considerando um font-size de 62.5% o resultado final ficaria

assim:

1. p { 2. font-size: 1.6em; 3. max-width: 480px; 4. }

Peso

O peso a grossura dos caracteres de um tipo. Este atributo definido pela propriedade

font-weight. Pode ser normal, bold (negrito), bolder (mais negrito) e lighter (mais fino).

Ou ainda, se estas opes estiverem disponveis na fonte que voc escolheu, variar entre

um valor numrico de 100 a 900. Sendo a correspondncia:

100 Thin 200 Extra Light (Ultra Light) 300 Light 400 Normal 500 Medium 600 Semi Bold (Demi Bold) 700 Bold 800 Extra Bold (Ultra Bold) 900 Black (Heavy)

Cuidado aqui. Principalmente se voc for usar uma fonte no web-safe. Se o peso da

fonte estiver em numerais e voc utilizar bold o seu browser ir automaticamente criar um falso negrito em torno da fonte. E isto vai atrapalhar bastante o design dela,

que ficar com um aspecto grosseiro e com diferenas sutis, porm perceptveis, na

renderizao de cada navegador Verifique com cuidado quais opes de peso esto disponveis ao escolher uma fonte. Famlias gratuitas normalmente tem opes

limitadas, enquanto fontes pagas possuem uma variedade maior de pesos. Para evitar

este problemas utilize a regra font-weight: normal em seu reset. Principalmente se voc

estiver utilizando um normatizador como o HTML5 boilerplate.

1. h1, h2, h3, h4, h5, h6 { 2. font-weight: normal; 3. }

Contraste

Ler em um monitor cansativo. Isto acontece por que as telas so iluminadas e ficar

olhando muito tempo para fontes de luz incomodo. Para minizar esta condio

fundamental tomar um cuidado com o contraste de cores do texto.

Ah, o contraste 100% no caso de monitores tambm no recomendvel. Quando a cor

do fundo for completamente branca um cinza bem escuro como #333 ou #444 mais

confortvel para leitura do que o preto total (#000).

Lembre-se que contraste no apenas cor. Contraste tamanho, peso, distancia necessrio que os links, por exemplo, possuam algum elemento que os diferencie dos

demais elementos. E isto tambm uma questo de usabilidade.

Ritmo Vertical

O ritmo de um texto definido pela hierarquia de tamanho da fonte, distancias de

margens, espaamento e entrelinhas. O ideal aqui criar um grid horizontal para manter

o ritmo equilibrado.

Ritmo vertical um assunto complexo que poderia render um artigo inteiro Mas se voc for levar daqui apenas uma informao se preocupe com o valor entrelinha (line-

height). Algo como 140% da altura da fonte uma boa medida padro. Se voc quiser

ser ainda mais preciso pode utilizar alguma ferramenta de calculo com base na

proporo aurea como a Golden Ratio Typography Calculator.

Usar nmeros mltiplos para o tamanho das fontes tambm uma boa pedida (por

exemplo: 16 pixels para o texto e 32 pixels para um titulo). Manter margens e

espaamentos proporcionais tambm uma tima prtica.

Ligaturas

Ligatura ou ligadura em tipografia quando uma ou mais letras (ou sinais grficos) so

ligadas e passam a ser representadas em um nico caractere. A partir do CSS3 j

possvel utilizar essa feature para web no caso de fontes Open Type. Para isto basta

avisar o browser que voc deseja ativar esta opo.

1. h1 { 2. font-feature-settings: 'liga'; 3. -webkit-font-feature-settings: 'liga'; 4. -moz-font-feature-settings: 'liga'; 5. -o-font-feature-settings: 'liga'; 6. }

Concluso

Agora s aplicar o que voc aprendeu, pequeno padawan. Voc pode utilizar a regra

do @font-face (se no sabe como tem um artigo aqui no prprio Tableless sobre isto) ou

alguma biblioteca de fontes como Google Fonts ou Typekit. Voc pode at mesmo fazer

o seguro e utilizar os nossas boas e velhas amigas web safes. Mas no importa qual

fonte voc escolha, o importante ter em mente que texto interface e no decorao.

Capitalizao, kerning, condensamento, estilo, exteno, altura x, font-stacks,

fallbacks existem muitos temas sobre tipografia web que no foram cobertos neste artigo. um mundo inteiro de possibilidades e este apenas um ponto de partida para

criar layouts com boa legibilidade e leiturabilidade. E deixar a web um lugar um pouco

mais amigvel.

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