Escolar Documentos
Profissional Documentos
Cultura Documentos
Tipografia para Web
Tipografia para Web
TIPOGRAFIA
PARA WEB
2015
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.
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.
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:
T I P O G R A F I A PA R A W E B
PRINTSCREEN: WWW.WEBLOUNGE.BE/EN/
T I P O G R A F I A PA R A W E B
ALTURA DE LINHA
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
10
T I P O G R A F I A PA R A W E B
11
LARGURA DA LINHA
T I P O G R A F I A PA R A W E B
12
ALINHAMENTO
T I P O G R A F I A PA R A W E B
13
P R I N T S C R E E N : W W W . FA B R I C A . I T
T I P O G R A F I A PA R A W E B
14
P R I N T S C R E E N : W W W . J H O R N I G . AT
T I P O G R A F I A PA R A W E B
15
PAREAMENTO
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
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
T I P O G R A F I A PA R A W E B
19
Georgia
Times New Roman
Bodoni
PRINTSCREEN: CHRISNIEDENTHAL.COM
T I P O G R A F I A PA R A W E B
20
SEM SERIFAS
T I P O G R A F I A PA R A W E B
21
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.
T I P O G R A F I A PA R A W E B
22
SERIFAS GROSSAS
T I P O G R A F I A PA R A W E B
Clarendon
Rockwell
Crete
PRINTSCREEN: THEWITNESSES-THESERIES.FR
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
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
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
PRINTSCREEN: ENGZELL.ME
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/