Cristiano  Pires  Martins

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

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.

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

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çalhoMais algum texto de corpo

que fornece ao usuário detalhes sobre

o conteúdo da pagina

etc...

IMPORTÂNCIA

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.

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

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

Anatomia  de  um  tipo  de  letra

9

Terminologias1  –  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

Terminologias4   –   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

Terminologias9  –  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

Terminologias13   –   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

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

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

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

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

Exemplos  de  Fontes  Manuscritas

Blackadder Bradley Hand Brush Script Edwardian Script

French Script Kunstler Script Monotyoe Corsiva

Palace Script MT 18

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

Exemplos  Novelty

Curls MT AlphaWoodOld English TextAlmonte SnowB SurfersPlaneChinese takeawa

20

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

Exemplos  de  dingbat

WP Arabic SihafaWP  Arabic  Sihafa  

WP Hebrew DavidWP  Hebrew  David  

!"#$%&'(Webdings  

W♓■♑♎♓■♑⬧  Wingdings

22

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

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

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

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; }

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

Espaçamento  do  texto

• Temos  dois  tipos  de  controle  de  espaçamentos:  – Vertical:    – Horizontal

28

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

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

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

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

MOTIVOS  PARA  NÃO  USAR  TEXTOS  JUSTIFICADOS  NA  WEB

33

• 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

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 om   a s   o p ç õ e s :   l e f t  (esquerda),   right(direita),  center   (central izado)   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

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