Andr Rafael

TIPOGRAFIAPARA 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 5

Variveis Tipogrficas 6 Escala 7

Altura de Linha 9

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 5

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 talen-

to 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 su-

per talento para escolher, certo?Este livro composto de pequenas dicas que vo gerar grande im-

pacto 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 6

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 personali-dade das pginas. Todas as variveis sempre so pensadas para cri-

armos 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 7

ESCALA

11, 14, 18, 24, 36, 48, 60. Definir uma escala tipogrfica to impor-

tante quanto definir as cores do site.

Existem escalas clssicas, como a que encontramos pr-progra-

madas 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 8

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.

P R I N T S C R E E N : W W W . W E B L O U N G E . B E / E N /

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 9

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 10

Facebook Tipografia: Helvetica / Arial

Tamanho: 14px

Line-height: 19.3px (~ 1.4em)

Globo Tipografia: Arial

Tamanho: 15px

Line-height: 22px (~ 1.45em)

P R I N T S C R E E N : M E D I U M . C O M

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.

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 cansati-

va, 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 . F A 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 tipogr-ficas 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.

P R I N T S C R E E N : F F F U N C T I O N . C O

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 impres-

sos, 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 ver-

dadeiras, em especial, possuem um grande estilo e suavidade, por

isso comum um pareamento entre tipos sem serifa e tipos serifa-

dos 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

P R I N T S C R E E N : C H R I S N I E D E N T H A L . C O M

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 ren-

derizao 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 princi-

pais sites como Google, Facebook e Globo.

A escolha entre uma sem serifas ou uma serifada vai sempre depen-

der da identidade visual do site e da marca.

P R I N T S C R E E N : H E L B A K . C O M

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 princi-

palmente ttulos e no corpo de textos.

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

Exemplos de tipografias egpcias: Clarendon Rockwell Crete

P R I N T S C R E E N : T H E W I T N E S S E S - T H E S E R I E S . F R

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.

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 encontr-

la 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 entre-

laado 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 pos-

suem 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 com-

por 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 carac-

terstica. 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.

P R I N T S C R E E N : E N G Z E L L . M E

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/