Tipografia

para
a Web
Prof. Paulo H.
Serrano
11/07/2014
Fonte
Tipo
Tipografia
Família tipografia
 Tipografia é a arte e a
técnica de organizar as
fontes com o objetivo de
tornar a linguagem visível.

https://en.wikipedia.org/wiki/Typography
Webdesign
é 95%
tipografia
A maior parte das
informações na internet
está em linguagem escrita.

http://ia.net/blog/the-web-is-all-about-typography-per
iod/
dados de 2006
As pessoas
ainda leem

A maior responsabilidade do webdesigner é

com os leitores, precisamos ajudá-los a
encontrar, entender e se conectar
com as palavras, ideias e informações que
procuram.

Typographic Web Design – Laura Franz

Tipos de leitura

Leitura Escaneada
Leitura Casual
Leitura Engajada

Lynda.com - Laura Franz

PESSOAS LEEM
PELA FORMA DAS
PALAVRAS
CAPSLOCK CAPSLOCK CAPSLOCK CAPSLOCK
CAPSLOCK
SALVE A CAIXA ALTA PARA TEXTOS CURTOS,
CABEÇALHOS OU ÊNFASE EM ALGUMA PALAVRA, A
CAIXA ALTA PREJUDICA A LEITURA RÁPIDA E A
DIFICULTA A DISTINÇÃO DAS PALAVRAS

Lynda.com - Laura Franz

Oespaçoentreas
palavrastambém
facilita a leitura
Itálico e negrito, tendem a diminuir o espaço entre
as letras, reserve o seu uso para pouco texto,
títulos ou cabeçalhos e enfatizar palavras.

Lynda.com - Laura Franz

Textos grandes são
lidos lentamente

Diminuindo o contato da visão periférica com

a palavra seguinte, diminuímos a velocidade
de leitura.

Lynda.com - Laura Franz

Textos pequenos demais
são lidos lentamente

Diminuindo a possibilidade de enxergar a

forma das palavras diminuímos a nossa
velocidade de leitura.

Lynda.com - Laura Franz

Tamanho
das linhas
Mussum ipsum cacilds,
As linhas muito próximas vidis litro abertis.
dificultam o Consetis adipiscings
escaneamento, tornando elitis. Pra lá , depois
divoltis porris, paradis.
o texto uma textura; Paisis, filhis, espiritis
santis. Mé faiz
elementum girarzis, nisi
As linhas muito eros vermeio, in
afastadas perdem o elementis mé pra quem
sentido de unidade e é amistosis quis leo.
Manduma pindureta
são difíceis de quium dia nois paga.
reconhecerem como Sapien in monti palavris
conjunto. qui num significa nadis i
pareci latim.
Interessantiss quisso
pudia ce receita de bolis,
mais bolis eu num
Tamanho
das linhas
Linhas
muito
curtas
deixam o
texto
picado e
o tornam
consativ
oe
lento.

Linhas muito longas são mais difíceis de ler porque os olhos tem
que viajar muito longe até seguir para a próxima linha.
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e
fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel
dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut
scelerisque neque et turpis posuere pulvinar pellentesque nibh
ullamcorper. Pharetra in mattis molestie, volutpat elementum justo.
Aenean ut ante turpis. Pellentesque laoreet mé vel lectus
scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Etiam ac mauris lectus, non
scelerisque augue. Aenean justo massa.

Suco de
cevadiss, é um
leite divinis, qui
tem lupuliz,
matis, aguis e
fermentis.
Interagi no mé,
cursus quis,
vehicula ac nisi.
Aenean vel dui
dui. Nullam leo
erat, aliquet
quis tempus a,
posuere ut mi.
Alinhamento
das linhas
Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam
golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Alinhamento à direita dificulta o retorno da leitura na

linha seguinte, por não constituir um ponto inicial
uniforme;
Alinhamento
das linhas
Casamentiss faiz malandris se pirulitá, Nam liber tempor
Na internet não se usa cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Lorem
alinhamento justificado ipsum dolor sit amet, consectetuer Ispecialista im mé
devido ao espaçamento intende tudis nuam golada, vinho, uiski, carirí, rum da
estranho entre as jamaikis, só num pode ser mijis. Adipiscing elit, sed diam
palavras causando os nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquamerat volutpat. Ut wisi enim ad minim veniam, quis
rios no texto. nostrudexercitationullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Devemos promover
a legibilidade dos
conteúdos na Web.
Aspectos
importantes
Considerações históricas e
contextuais;

Fontes de impressão ou de
visualização em tela;

Presença de caracteres
latinos.
Combinação
de fontes
Combinação por famílias tipográficas
(bold, italic, regular) é a forma mais
segura;

Nem todas as tipografias combinam.

Contraste
Contraste
ChunkFive Roman

PESO (font-weight);
LARGURA ();
ESTILO (serif, sans-serif); PT Sans

TAMANHO (14px, 22px).

Seja conservador em blocos de
texto.
Combinação
de fontes
Combinação por famílias tipográficas
(bold, italic, regular) é a forma mais
segura;

Nem todas as tipografias combinam.

Trajan pro
Inspirada nas inscrições da
coluna de Trajano 100d.C.

Versão Digital
desenvolvida em 1989 por
Carol Twombly;

O aspecto histórico não é

exclusivo o contextual
também influência;
Donald Young

http://youtu.be/T8_tOrJHIr8?t=5m27s
Google Fonts

http://www.google.com/fon
ts/
What The Font

http://www.myfonts.com/WhatTheFo
nt/
IdentiFont
http://www.identifont.com/identify.h
tml
FontsInUse

http://www.flickr.com/groups/fonts-in-
use/