Aula 06 textos na web

1. Cristiano
Pires
Martins

2. Leitura
de
Textos
• Escrever
para
Web
é
diferente
de
escrever
para
impressão.
• A
leitura
na
web
é
feita
de
forma
“escaneável”,
ou
seja,
as
pessoas
não
lêem
da
esquerda
para
direita
como
em
um
livro.
• O
texto
do
site
precisa
ser
rapidamente
“escaneável
e
facilmente
digerível”
• 15%
das
pessoas
lêem
mais
lentamente
na
web
do
que
um
documento
impresso.
2

3. Texto
escaneável
3
• Fornece
ao
usuário
uma
melhor
experiência
no
site,
o
que
significa
que
eles
ficarão
por
mais
tempo
e
voltarão
com
mais
frequência
ao
site.
• Para
auxiliar
na
montagem
do
texto,
é
sugerido
o
uso
da
técnica
da
Pirâmide
Invertida.

4. Pirâmide
Invertida
• É
a
forma
dos
usuários
lerem
o
texto
e
já
saberem
através
do
topo
da
pirâmide
o
que
é
mais
importante.
• Primeiro:
comece
com
uma
pequena
conclusão
para
que
os
usuários
possam
ver
a
parte
principal
da
página
e
adicionar
detalhes
depois,
dessa
forma,
os
usuários
param
de
ler
a
qualquer
momento
e
ainda
tem
a
confiança
de
que
já
leram
as
partes
importantes
da
informação.
4

5. Pirâmide
Invertida
5
.
Um pequeno texto de compor para dar ao
usuário algum contexto e uma pequena
introdução do conteúdo da página
Cabeçalho Principal
• alguns pontos importantes
• que contêm os destaques
• do conteúdo da página
Outro Cabeçalho
Mais algum texto de corpo
que fornece ao usuário
detalhes sobre
o conteúdo
da pagina
etc...
IMPORTÂNCIA

6. Pirâmide
Invertida
6
.
Conteúdo com menos
importância progressiva,
mesmo que bem escrito.
O que não é essencial
para a compreensão
do artigo pelo usuário
pode ficar aqui.
Coloque a coisa mais
importante
No topo de seu texto.
Os usuários devem ser
capazes
de ler seu primeiro
parágrafo
e tem uma ideia do
todo.

7. E
qual
fonte
usar?
• Para
não
errar,
temos
9
de
famílias
de
fontes
suportado
pela
maioria
dos
sistemas
operacionais
existentes,
elas
são
chamadas
de
fontes
da
Lista
Segura.
1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana
7

8. Tipografia
A
palavra
tipografia
é
formada
pelos
radicais
typos
(impressão
ou
marca)
e
grapheia
(escrita),
ou
seja,
produzir
impressões
por
meio
da
escrita. 8

9. Anatomia
de
um
tipo
de
letra
9

10. Terminologias
1
–
Linha
Base:
é
a
linha
horizontal
imaginária
sobre
a
qual
a
maioria
dos
caracteres
se
assenta.
2
–
Altura
da
Caixa
Alta:
é
uma
linha
imaginária
que
marca
a
altura
de
todas
as
letras
maiúsculas
em
um
tipo
de
letra.
A
altura
da
caixa
alta
é
inferior
à
altura
máxima
do
tipo
da
letra.
3
–
Barra
Transversal:
é
um
traço
que
une
as
linhas
nos
tipos
de
letras
maiúsculas
como
as
letras
“A”
e
“H”,
sendo
diferente
do
traço
transversal
das
letras
“f”
e
“t”.
10

11. Terminologias
4
–
Serif
(Cerifa):
é
o
nome
dado
aos
traços
do
acabamento
na
base
e
no
topo
de
certos
tipos
de
letras.
5
–
Linha
Média:
uma
linha
imaginária
que
marca
a
extremidade
superior
das
maiúsculas.
6
–
Barriga:
é
a
curva
redonda
que
encerra
o
espaço
negativo
em
um
tipo
de
letra.
Exemplo
as
letras
“D”,
“o”
e
“g”.
8
–
Descendente:
é
a
parte
inferior
das
letras
minúsculas,
como
“g”,
“j”,
“p”,
“q”
e
“y”
e
também
alguns
numerais
como
das
fontes
Georgia.
11

12. Terminologias
9
–
Haste:
é
o
principal
traço
vertical
ou
diagonal
de
um
tipo
de
letra,
como
as
letras
“I”,
“H”,
“W”.
10
–
Título:
é
o
nome
dado
ao
ponto
acima
das
letras
minúsculas,
como
o
“j”
e
o
“i”.
11
–
Terminal:
é
a
extremidade
de
uma
haste
ou
traço
sem
serif,
como
a
letra
“c”
do
exemplo.
12
–
Ascendente:
é
a
extensão
de
algumas
letras
minúsculas
que
chegam
até
a
linha
média
como
exemplo
as
letras:
“b”,
“d”,
“f”,
“h”,
“l”,
“t”.
12

13. Terminologias
13
–
Perna
ou
caudas:
são
os
traços
inferiores
angulares
como
os
das
letras
“K”,
“R”e
“Q”
14
–
Ligadura:
é
a
junção
de
letras,
que
dão
a
impressão
de
serem
um
único
caractere,
como
a
palavra
“fix”.
15
–
Altura
x:
é
a
altura
do
“x”
minúsculo
em
um
tipo
de
letra,
ele
é
a
distância
entre
as
linhas
base
e
média
de
um
tipo
de
letra.
Também
pode
ser
utilizado
como
unidade
relativa
de
medição
em
CSS
(ex).
13

14. Distinções
entre
tipos
de
Letra
• Fonte
é
um
conjunto
de
letras
com
estilo
visualmente
parecido.
• Elas
já
vêem
instaladas
no
computador.
Por
exemplo
nos
sistemas
operacionais
Windows
oferece
cerca
de
40
fontes
como
padrão
enquanto
os
usuários
do
Mac
tem
mais
de
100
fontes.
• As
fontes
são
agrupadas
por
famílias
que
representam
uma
variação
diferente
da
fonte
original.
• As
famílias
de
fonte
incluem
os
tipos:
normal,
itálico,
negrito
e
negrito
itálico.
14

15. Fontes
Serif
• As
fontes
serif
são
fontes
que
permitem
tornar
mais
legíveis
as
letras
em
um
bloco
de
textos
para
leitura,
principalmente
quando
impressa,
pois
criam
uma
linha
horizontal
de
referência.
• A
fonte
mais
conhecida
atualmente
é
a
Times New
Roman.
• Há
uma
grande
variedade
de
fontes
serif,
entre
elas
podemos
destacar:
– Garamond,
– Baskerville,
– Didot.
15G

16. Fontes
Sans
Serif
• São
fontes
que
não
possuem
a
serifa,
são
fontes
mais
legíveis
e
práticas
para
qualquer
finalidade.
• As
fontes
mais
utilizadas
atualmente
são:
Arial
e
Verdana.
• Uma
boa
prática
no
design
é
utilizar
fontes
com
serifa
nos
cabeçalhos
para
chamar
atenção
e
nos
blocos
de
texto
fontes
sem
serifa
para
uma
melhor
legibilidade.
16

17. Fontes
Manuscritas
• As
fontes
manuscritas
são
ideais
para
representar
a
humanidade,
sofisticação,
tradição,
é
muito
utilizada
na
criação
de
logotipos
e
também
como
títulos
de
matérias.
• O
lado
negativo
é
conseguir
uniformizar
os
tipos
de
letras,
espaçamentos
e
alinhamentos;
• Também
apresenta
bastante
dificuldades
de
leituras
em
textos
longos.
17

18. Exemplos
de
Fontes
Manuscritas
Blackadder
Bradley Hand
Brush Script
Edwardian Script
French Script
Kunstler Script
Monotyoe Corsiva
Palace Script MT 18

19. Fontes
Novelty
• São
conhecidas
como
fontes
de
exibição
ou
decorativas,
representam
a
grande
maioria
das
fontes
disponíveis
gratuitamente
on-­‐line.
• São
versões
modificadas
das
populares
serif
ou
sans
serif
.
• São
menos
legíveis
que
suas
correspondentes
originais.
• Quando
usadas
com
moderação
podem
enriquecer
o
design
com
bastante
estilo.
19

20. Exemplos
Novelty
Curls MT
AlphaWood
Old English Text
Almonte Snow
B SurfersPlane
Chinese takeawa
20

21. Fontes
Dingbat
• Também
chamadas
de
fontes
símbolos,
as
fontes
originais
consistiam
em
ornatos
e
símbolos
comumente
usados.
• As
letras
Dingbat
podem
ser
ajustadas
em
qualquer
tamanho
sem
perder
a
legibilidade.
• As
fontes
mais
conhecidas
são:
Wingdings
e
Webdings,
que
já
estão
pré-­‐instaladas
no
Windows.
21

22. Exemplos
de
dingbat
WP Arabic Sihafa
WP
Arabic
Sihafa
WP Hebrew David
WP
Hebrew
David
!"#$%&'(
Webdings
W♓■♑♎♓■♑⬧
Wingdings
22

23. Fontes
de
Tamanho
Fixo
• São
fontes
que
possuem
espaçamento
uniforme,
os
tipos
das
letras
são
elaborados
de
forma
que
as
larguras
de
cada
letra
são
semelhantes.
• Elas
foram
elaboradas
baseadas
nas
máquinas
de
escrever
que
utilizavam
a
letra
“w”
como
medida
de
espaçamento
para
todas
as
letras
e
depois
nos
primeiros
computadores.
• A
fonte
mais
utilizada
neste
formato
é
a
Courier
New.
• Na web,
utilizamos
o
comando
<pre>
que
preserva
tabulações,
espaços
e
quebras
de
linha.
23

24. Escolhendo
Fontes
Corretas
• A
escolha
da
fonte
correta
depende
do
foco
do
site,
do
público
que
deseja,
do
contexto
em
geral.
• Procure
“ligar”
a
fonte
escolhida
como
alguma
conexão
emocional
ou
que
lembre
alguma
sensação
agradável
para
o
site.
• Tente
não
usar
mais
do
que
4
fontes
para
testar
o
design
do
site,
• Procure
evitar
uma
combinação
de
duas
fontes
serif
diferentes
ou
de
duas
sans
serif
diferentes
no
mesmo
projeto.
24

25. Um
"em"
é
uma
unidade
de
medida
relativa,
é
igual
ao
tamanho
vertical
de
um
texto
do
elemento.
Definir
Tamanho
da
Fonte
• O
tamanho
de
fonte
padrão
na
maioria
dos
navegadores
é
de
16
pixels
• Para
exibir
uma
fonte
no
tamanho
de
12
pixels
é
necessário
definir
o
tamanho
da
fonte
no
parágrafo
em
0,75em.
• Por
quê
utilizar
o
em?
– Porque
nem
todos
os
navegadores
suportam
o
“aumentar”
fonte
como
o
internet
explorer
6
25

26. Definindo
o
tamanho
• Para
facilitar
o
trabalho
de
conversão
de
pixels
para
"em"
alteramos
o
tamanho
da
fonte
do
elemento
do
body
em
62,5%.
Com
isto,
o
valor
do
em
passa
para
10
pixels.
• Dessa
forma,
12
pixels
equivalem
a
1,2
eme
e
assim
por
diante.
Veja
o
exemplo
em
CSS.
26
body
{
font-size: 62,5%;
}
p{
font-size: 1,2 em;
}
h1{
font-size: 3,5 em;
}

27. Onde
encontrar
mais
fontes?
• Em
galerias
de
fontes
gratuitas
e
shareware
como:
• www.sofontes.com.br
• www.1001fonts.com
• www.dafont.com
• www.fontesgratis.com.br
• Fontes
à
venda,
que
tem
como
benefício
ao
pagar
por
uma
família
de
fontes
o
pacote
completo
de
negrito,
itálico,
etc..
• www.fontshop.com
• www.myfonts.com
• www.itcfonts.com
• www.adobe.com/type
27

28. Espaçamento
do
texto
• Temos
dois
tipos
de
controle
de
espaçamentos:
– Vertical:
– Horizontal
28

29. Espaçamento
Horizontal
• Para
controlar
os
espaçamentos
horizontal
das
letras
utilizamos
o
Kerning
e
o
Tracking.
• Kerning:
aproximação
horizontal,
é
o
processo
de
ajuste
do
espaço
entre
letras
individuais.
Em
CSS
utilizamos
a
propriedade
letter-­‐spacing.
• Tracking:
espaçamento
horizontal,
ajusta
o
espaçamento
mas
aplicando-­‐se
ao
espaço
existente
entre
cada
letra.
Em
CSS,
utilizamos
a
propriedade
word-­‐spacing..
29

30. Espaçamento
Vertical
• O
espaçamento
vertical
também
é
conhecido
como
entrelinhas
(leading).
• Em
CSS
ajustamos
a
propriedade
line-­‐height.
Exemplo:
line-­‐height:
1.5em;
30

31. Alinhamento
do
Texto
• É
o
alinhamento
dos
textos
as
margens.
• Os
tipos
de
alinhamentos
mais
comuns
são:
esquerda,
centro
ou
centralizar,
direita
e
justificado.
• Cuidado
ao
usar
o
justificar
em
todos
os
textos
na
web,
pois
ao
fazê-­‐lo
é
ajustado
também
os
espaçamentos
entre
os
caracteres
provocando
em
alguns
casos
o
efeito
“percorrendo
o
rio”.
31

32. Não
use
justificado
na
WEB
• Apesar
de
os
textos
justificados
apresentarem
uma
informação
visual
mais
limpa
e
organizada,
essa
não
é
maneira
correta
de
alinhar
textos
web.
• O
texto
justificado
fica
melhor
em
jornais
e
revistas,
onde
ele
é
organizado
em
duas
ou
três
colunas
verticais.
• Na
web
os
textos
são
corridos
e
usados
em
áreas
de
até
800px,
o
que
acaba
gerando
uma
grande
quantidade
de
espaços
vazios,
somente
para
que
o
texto
se
mantenha
justificado. 32

33. MOTIVOS
PARA
NÃO
USAR
TEXTOS
JUSTIFICADOS
NA
WEB
33

34. • A
maioria
das
pessoas
não
lêem
os
textos
da
web
de
forma
convencional,
apenas
passam
os
olhos
captando
palavras
e
formando
informações,
e
os
espaços
deixados
pelos
textos
justificados
dificultam
esse
processo.
• A
leitura
dos
textos
justificados
demora
20%
mais
tempo
se
comparado
ao
texto
alinhado
à
esquerda,
pois
os
espaços
criam
falsas
pausas.
• Além
disso,
devemos
tocar
no
ponto
das
pessoas
com
dislexia,
que
é
uma
dificuldade
no
aprendizado
da
linguagem
que
atinge
cerca
de
200
mil
pessoas
no
Brasil.
Um
disléxico
tem
dificuldade
dobrada
a
leitura
de
textos
justificados. 34

35. Exemplo
• Para
evitar
isto
a
maioria
dos
editores
utilizam
a
hifenização,
mas
os
navegadores
web
não
conseguem
fazer,
então
é
melhor
evitar
textos
justificados
em
espaços
estreitos.
• Em
CSS
podemos
utilizar
a
propriedade
text-­‐aligment
c o m
a s
o p ç õ e s :
l e f t
(esquerda),
right(direita),
center
(centralizado)
e
justify(justificado).
• Há
vários
softwares
e
sites
que
fazem
os
testes
de
ajustes
de
textos,
um
site
é
o
http://www.typetester.org/
35

36. Referências
• BEAIRD,
J.
Princípios
do
Web
Design
Maravilhoso.
Rio
de
Janeiro:
Altabooks,
2008.
• KALBACH,
J;
PIVETA,
E
K.
Design
de
Navegação
Web.
Bookman,
2009.
• WATRALL,
E;
SIARTO,
J.
Use
A
Cabeça!
Web
Design.
Alta
Books,
2009.
Fonte
de
material
Fabiana
Caravieri
Masson
36