Andr Rafael

TIPOGRAFIA
PARA WEB

2015

Copyright Andr Rafael, 2015

Capa: Andr Rafael
Diagramao: Andr Rafael
Reviso: Adriana Tullio SOStexto
Todos os direitos reservados. Nenhuma parte
desta publicao deve ser colocada online sem
antes permisso do publicador.
Para permisses, escreva para andre@origamid.com.
2015
Todos os direitos reservados a
Andr Rafael Pinto Xavier Pais
Origamid | Books
Rio de Janeiro - RJ
www.origamid.com

Eu, Andr Rafael, sou formado em Administrao

de Empresas pela UFRRJ e em Design Digital pelo
Instituto Infnet. Fundei a Origamid em 2012 e j
tive mais de 5 sites nomeados e premiados a Site
do Dia. Fale comigo em: andre@origamid.com

A Origamid foi fundada em 2012 como um

codinome para Andr Rafael. Iniciou como uma
prestadora de servios, criando sites institucionais
para empresas, e agora est focada no ensino de
Design e Cdigo para a Web. Confira os cursos e
dicas em www.origamid.com

SUMRIO
Introduo

Variveis Tipogrficas

Escala

Altura de Linha

Largura da Linha

11

Alinhamento

12

Pareamento

15

Classificaes Tipogrficas

17

Serifadas

18

Sem Serifas

20

Serifas Grossas

22

Script

24

Blackletter

26

Display

28

Concluso

30

Referncias

31

T I P O G R A F I A PA R A W E B

INTRODUO
Voc quer criar sites melhores, na verdade voc tem at o potencial, mas
toda vez que termina um projeto, voc olha para ele e pensa: Que merda
essa?. Bom, mas estou apenas comeando, certo? No sou um bom
ilustrador, talvez eu no seja to criativo. J sei, j sei, eu no tenho talento para isso. Quer saber vou pegar um template e vai ser isso mesmo.

No precisa mais de desculpas, anos de experincia, talento ou

qualquer outra coisa para voc comear a criar sites melhores. Basta
uma coisa: domine tipografia. Dizem que 95% da web composta de
textos, por isso aprender e dominar a arte da tipografia vai melhorar
pelo menos 95% do seu projeto. E o melhor que um bom projeto
tipogrfico feito apenas de boas escolhas, no necessrio um super talento para escolher, certo?

Este livro composto de pequenas dicas que vo gerar grande impacto nos seus prximos projetos. So ideias compartilhadas pelos
melhores designers e pensadores da rea.

T I P O G R A F I A PA R A W E B

VARIVEIS TIPOGRFICAS
Voc possui o controle das principais variveis tipogrficas atravs
do CSS. So estas escolhas que vo determinar boa parte da
personalidade, usabilidade e experincia do seu site. As principais,
que sero apresentadas neste livro, so: escala, altura de linha,
largura de linha, alinhamento e pareamento de tipos.

Todo projeto precisa de uma escala tipogrfica, que dever ser

seguida durante sua construo. Ela responsvel por criar uma
unidade entre as pginas e os elementos do site.
A altura e a largura das linhas so essenciais para criar uma boa
experincia de leitura para o usurio. Se para Bill Gates (1996), O
contedo Rei, ento a forma empregada como suporte da leitura
desse contedo deve ser tratada com toda a ateno que a famlia
real merece.
O alinhamento responsvel pela fluidez do texto e pela personalidade das pginas. Todas as variveis sempre so pensadas para criarmos contraste entre os contedos, e nada melhor do que parear
diferentes tipos para alcanar o contraste ideal.

T I P O G R A F I A PA R A W E B

ESCALA

11, 14, 18, 24, 36, 48, 60. Definir uma escala tipogrfica to importante quanto definir as cores do site.
Existem escalas clssicas, como a que encontramos pr-programadas em softwares como o Photoshop e escalas que vo desde a
proporo urea at as notas musicais.
Independente da escala, siga estas regras e tudo ficar bem:

Seis um bom nmero. Seis escalas diferentes so suficientes

para trabalhar a hierarquia da informao de um site.

Contraste rei. Defina uma escala em que o contraste entre um

tamanho e outro seja totalmente visvel. Uma escala que rene

T I P O G R A F I A PA R A W E B

tamanhos como 14, 15 e 16 no uma boa escala, pois estes so

muito parecidos. Tamanhos parecidos no possuem contraste e,
por isso, no enriquecem a hierarquia da pgina.

PRINTSCREEN: WWW.WEBLOUNGE.BE/EN/

No site Weblounge, uma tipografia em grande escala utilizada

para comunicar o servio principal da empresa.
A escala fundamental e se apoia em um dos mais bsicos
princpios do design que a REPETIO. Ento, se voc definir um
tamanho para os textos de botes, mantenha-o por todo o site.

T I P O G R A F I A PA R A W E B

ALTURA DE LINHA

Uma altura de linha de 1.4/1.5 vezes o tamanho do texto, geralmente

o ideal para corpos de texto na web. Considere esse tamanho para
tipografias semelhantes Helvetica e Arial.
Confie nos sites onde passamos a maior parte do nosso tempo como
o Google, Facebook e sites de notcias, como o Globo.
Estas so as caractersticas do corpo de texto desses sites:
Google
Tipografia: Arial
Tamanho: 13px
Line-height: 18px (~ 1.4em)

T I P O G R A F I A PA R A W E B

Facebook
Tipografia: Helvetica / Arial
Tamanho: 14px
Line-height: 19.3px (~ 1.4em)
Globo
Tipografia: Arial
Tamanho: 15px
Line-height: 22px (~ 1.45em)

PRINTSCREEN: MEDIUM.COM

Medium um site de onde pessoas compartilham histrias. O

foco do site a leitura, por isso se utiliza uma altura de linha
bem confortvel para facilitar o usurio.

10

T I P O G R A F I A PA R A W E B

11

LARGURA DA LINHA

13 Palavras so suficientes para compor uma linha de texto na web.

Um nmero muito maior que este vai tornar a leitura mais cansativa, alm de dificultar a troca de linha pelo leitor.
Mais uma vez, entre no Google, no Facebook ou no Globo e conte
quantas palavras cada linha de texto possui.
Por isso sempre bom, mesmo em layouts fluidos, que possuem
como base do grid uma porcentagem em relao tela, definir um
max-width para a caixa de texto.

T I P O G R A F I A PA R A W E B

12

ALINHAMENTO

O alinhamento uma caracterstica bsica de qualquer composio

tipogrfica. Os tipos de alinhamento mais comuns so: esquerda,
centralizado, direita e justificado.
Na web, mais de 90% dos blocos de texto so alinhados
esquerda. Apesar dele ser o valor padro do CSS, esse alinhamento
tambm o que mais facilita a leitura de um bloco de texto. Ao
pular uma linha durante a leitura, fica mais fcil encontrar a
prxima linha quando a mesma est alinhada com as anteriores.
O alinhamento centralizado tambm bastante utilizado para
compor ttulos e subttulos de pginas. Algumas citaes ou breve
explicaes tambm so centralizadas.

T I P O G R A F I A PA R A W E B

13

Um alinhamento pouco utilizado o direita: seu uso geralmente

est relacionado a uma necessidade especfica da composio do
site. Este alinhamento no indicado para blocos de textos que
demandem uma longa leitura.

P R I N T S C R E E N : W W W . FA B R I C A . I T

O site da empresa Fabrica utiliza o alinhamento direita, porm

este determinado pelo grid da pgina. O alinhamento feito
em relao aos blocos de contedo do site.
O alinhamento justificado a grande pegadinha para o leigo.
Quando voc comea a criar sites, provvel que voc j tenha
utilizado editores de texto como Word, Google Docs e outros. Nesses
editores, comum o uso de texto justificado, pois o documento fica

T I P O G R A F I A PA R A W E B

14

como uma aparncia mais organizada e evita as escadinhas

formadas quando o texto alinhado esquerda. Porm, na web, no
possvel hifenizar (quebrar as palavras utilizando hfens) o
texto, o que acaba gerando os chamados caminhos de rato, j
que a justificao forada e um espao maior que o ideal
adicionado entre as palavras. Por isso, o uso de alinhamento
justificado raro na web.

P R I N T S C R E E N : W W W . J H O R N I G . AT

O site Horning utiliza uma tipografia centralizada para

impactar o usurio logo em seu primeiro contato. Grandes
fotografias com texto centralizados fazem parte das
tendncias atuais da web.

T I P O G R A F I A PA R A W E B

15

PAREAMENTO

Qual a frmula para parear tipografias?

No existe uma frmula, mas h, o que eu chamaria, de boas
maneiras. E estas so duas delas:
1. Contraste REI. Quando optar por usar duas famlias tipogrficas diferentes, d preferncia a tipografias que se diferenciem
bem uma da outra.
Mal exemplo: Usar Helvetica e Arial em um mesmo projeto no
seria o ideal, pois ambas so muito parecidas. Neste caso, o uso de
tipografias diferentes perderia o sentido, j que no seria perceptvel
o contraste entre ambas.

T I P O G R A F I A PA R A W E B

16

Bom exemplo: J utilizar Helvetica com Georgia pode ser uma boa
combinao, pois voc opta por uma tipografia Sem Serifa e uma
Serifada. Ambas se complementam e enriquecem a hierarquia da
pgina, j que possuem contraste suficiente.
2. Use no mximo duas famlias diferentes no seu site.
Mais que isso pode ser um exagero. Com duas famlias, possvel
criar todo tipo de hierarquia e ainda tornar a pgina graficamente
interessante. Aproveite do negrito, do itlico e das cores para
enriquecer a hierarquia.

PRINTSCREEN: FFFUNCTION.CO

O site da FFFunction pareia fontes com maestria, de tipografias

display nos nmeros a sem serifas nos ttulos e nos subttulos.

T I P O G R A F I A PA R A W E B

17

CLASSIFICAES
TIPOGRFICAS
Assim como camiseta, camisa, casaco, sapato e trapos possuem
situaes ideais para serem usados, as tipografias tambm devem
ser escolhidas de acordo com o meio em que sero utilizadas. No
podemos afirmar que um estilo tipogrfico melhor do que outro,
mas sim que existem situaes mais adequadas para cada um deles.
Conhecer a histria do design e das coisas essencial para saber qual
tipo escolher. Dificilmente voc vai conseguir falar do passado com
uma sem serifa ou do futuro com uma serifada. Seu texto no ser
fcil de ler se criado com uma display e a sua empresa de consultoria
parecer um filme de faroeste de voc usar a Rockwell.
Serifadas, sem serifas, serifas grossas, script, blackletter e display so
as principais classificaes. Existem tambm subcategorias e
sinnimos para essas classificaes. Mas o que importa mesmo o
contexto em que voc vai utilizar cada uma delas.

T I P O G R A F I A PA R A W E B

18

SERIFADAS

Serifas so os pequenos detalhes nas pontas das letras das

tipografias serifadas. dito que as serifas facilitam a leitura, pois
existe uma certa continuidade entre as letras.
So bem utilizadas em corpo de texto, principalmente nos impressos, como livros e cartilhas.
Elas possuem um estilo clssico e, geralmente, este o motivo pelo
qual so escolhidas para compor textos na web. As itlicas verdadeiras, em especial, possuem um grande estilo e suavidade, por
isso comum um pareamento entre tipos sem serifa e tipos serifados em itlico.

T I P O G R A F I A PA R A W E B

19

Exemplos de tipografias serifadas:

Georgia
Times New Roman
Bodoni

PRINTSCREEN: CHRISNIEDENTHAL.COM

O site do fotgrafo Chris Niedenthal utiliza a tipografia Marion

Regular para compor os principais ttulos. Essa uma tipografia
serifada que se comunica com o trabalho histrico do fotgrafo.

T I P O G R A F I A PA R A W E B

20

SEM SERIFAS

As tipografias sem serifas se caracterizam pelas suas formas

geomtricas e a falta da serifa. Foram concebidas inicialmente para
compor ttulos e no o corpo de texto.
Com a chegada do meio digital e devido a problemas iniciais de renderizao das fontes serifadas na tela dos computadores, os tipos
sem serifas ganharam fora e passaram a ser os mais utilizados no
corpo de texto na web.
Alm disso, essas tipografias possuem uma esttica mais moderna,

combinando assim com o meio digital.

T I P O G R A F I A PA R A W E B

21

Exemplos de tipografias sem serifas:

Arial
Helvetica
Futura
A Arial foi uma tipografia criada para a empresa IBM e conhecida
pelos designers como uma cpia mal feita da Helvetica. Apesar disso,
hoje em dia ela a fonte mais utilizada em toda a web e nos principais sites como Google, Facebook e Globo.
A escolha entre uma sem serifas ou uma serifada vai sempre depender da identidade visual do site e da marca.

PRIN TSCREEN: HELBAK.COM

O site modernista da Helbak inteiramente composto de

tipografias sem serifas.

T I P O G R A F I A PA R A W E B

22

SERIFAS GROSSAS

As Egpcias, tambm conhecidas como Serifas Grossas, so

tipografias que foram inicialmente criadas para compor anncios
publicitrios. Elas surgiram na era da industrializao, e a sua forma
impactante passou a compor os mais diversos cartazes espalhados
pelas cidades.
Suas caractersticas so as serifas geomtricas, que possuem pouca
ou nenhuma transio entre os traos. Elas deixam de ser apenas
um detalhe das serifadas para se transformar em um elemento
protagonista da tipografia.
Esse tipo geralmente utilizado como display, compondo principalmente ttulos e no corpo de textos.

T I P O G R A F I A PA R A W E B

Exemplos de tipografias egpcias:

Clarendon
Rockwell
Crete

PRINTSCREEN: THEWITNESSES-THESERIES.FR

As egpcias podem ser muito elegantes quando bem utilizadas.

No site The Witnesses, a serifada grossa NimbusMonLEE
possui traos finos e uniformes, o que acaba criando uma
personalidade nica para o site.

23

T I P O G R A F I A PA R A W E B

24

SCRIPT

So tipografias suaves que parecem ter sido feitas a mo, com lpis/
pincel. Os caracteres geralmente so ligados uns aos outros,
formando uma unidade em cada palavra.
No importa de quem seja o casamento, pois flores e tipografia
script sempre vo estar presentes. E, no Natal, voc as ver por
todos os lugares, da caixinha do boteco de esquina at os anncios
de grandes varejistas.
Mas no cometa o erro de produzir todo um documento apenas com
elas, pois geralmente seu melhor uso est nos ttulos ou em
pequenos blocos de texto. Escolher uma boa tipografia para parear

T I P O G R A F I A PA R A W E B

25

com uma script essencial para uma boa comunicao (muitas

serifadas vo bem com elas).
Exemplos de tipografias script:

Lavanderia
Salamander
Brush Script
Lobster
Uma observao sobre a Lobster. Voc pode encontr-la no seguinte
link: www.impallari.com/lobster.
Lobster uma tipografia gratuita criada por Pablo Impallari, muito
bem feita e extremamente legvel. Devido a essas caractersticas, o
seu uso viralizou no mundo do design. No Natal, possvel encontrla por toda a cidade e tambm por toda a web. OBS: Existem milhes
de Tipografias Script, voc no precisar usar a mesma todo mundo.

T I P O G R A F I A PA R A W E B

26

BLACKLETTER

Qual a semelhana entre o Flamengo, o Fluminense e a Bblia

de Guttenberg?
A resposta est nas Gticas. O CRF (Clube de Regatas do Flamengo) e
o FFC (Fluminense Football Club) so representados por um entrelaado de tipos gticos, assim como a primeira Bblia feita na prensa
de Guttenberg.
Tambm conhecidas como Blackletter, elas existem desde o sculo
XII e hoje em dia so utilizadas para representar trabalhos que possuem referncia ao perodo medieval. De jogos a cervejas, elas ainda
so muito presentes, porm seu uso exclusivo em marcas e ttulos.

T I P O G R A F I A PA R A W E B

27

No so tipografias fceis de ler, por isso fuja delas quando for compor um corpo de texto.
Esse um estilo tipogrfico que leva muita histria em suas formas,
por isso tenha muito cuidado com o seu uso. Escudos/Brases so
elementos da Herldica e exatamente por isso que o uso de
tipografia gtica vai bem nos smbolos dos clubes.
Exemplos de tipografias gticas:

New Rocker
Lucida Blackletter
Cabazon

T I P O G R A F I A PA R A W E B

28

DISPLAY

A principal caracterstica das tipografias display a falta de caracterstica. So tipografias variadas que geralmente so utilizadas para
compor ttulos, chamadas e marcas.
O seu uso deve ser muito pensado, pois, na maioria das vez, a sua
criao est relacionada a um projeto especfico. Como exemplo: a
tipografia utilizada na imagem a Rosewood, uma tipografia muito
utilizada em anncios de circos, que ficaria totalmente desconexa se
utilizada em um anncio de uma empresa de seguros.
Se bem utilizadas, elas podem se tornar a estrela de um projeto. Mas
raramente voc ver uma display compondo um bloco de texto,
devido falta de legibilidade e leiturabilidade em tamanhos

T I P O G R A F I A PA R A W E B

29

pequenos. Escolher uma outra tipografia de texto para parear ser

sempre uma tarefa para o designer.
Elas tambm so classificadas como Decorativas. Confira diversas
no site Typekit e no Adobe Edge Web Fonts.

PRINTSCREEN: ENGZELL.ME

A tipografia grunge responsvel por impactar e informar que o

diretor de arte Alexandre Engzell est h mais de uma dcada
trabalhando na rea. Ela uma display e, por isso, ele apenas a
utiliza em ttulos do site.

T I P O G R A F I A PA R A W E B

30

CONCLUSO
No adianta ler e ficar parado. Abra agora o Photoshop, o Illustrator,
o CSS ou a ferramenta que quiser e comece a testar combinaes
tipogrficas, alinhamentos, escalas, alturas de linha e larguras de
texto. A melhor forma de aprender praticando, e com tipografia
to fcil quanto escolher a roupa que vai usar.
E lembre-se de que seu trabalho sempre ser baseado nas
referncias que voc tem. Por isso, fique de olho em sites como:

Awwwards awwwards.com
Dribbble dribbble.com
Typewolf typewolf.com
Quer aprender mais sobre web, tipografia, usabilidade, e outros
assuntos relacionados web? Fique de olho em origamid.com.

ACESSE ORIGAMID

T I P O G R A F I A PA R A W E B

31

REFERNCIAS
BRINGHURST, Robert. The elements of typographic style 3. Ed.
Canada: Hartley & Marks Publishers, 2004.
LUPTON, Ellen. Thinking with type: a critical guide for designers,
writers, editors, & students. 2. rev. and expanded ed. New York:
Princeton Architectural Press, 2010.
______. Type on screen: a critical guide for designers, writers, editors,
& students. New York: Princeton Architectural Press, 2014.
Todos os exemplos de sites foram retirados do site Awwwards em
2015: http://www.awwwards.com/