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.
2.
3.
4.

p {
font-size: 1.6em;
max-width: 480px;
}

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 (lineheight). 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.
2.
3.
4.
5.
6.

h1 {
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
-o-font-feature-settings: 'liga';
}

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/