tipografia eminterfaces digitaisEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste do...
O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de I...
tipografiaA tipografia desempenha um papel duplo:•  Tanto como comunicação verbal.•  Quanto como comunicação visual.A esco...
tipografiaOs jornais são um dos exemplos maisclaros sobre a importância do empregoda tipografia.Cada um tem uma família ti...
* Fonte: livro “Identidade visual: a direção do olhar”, de Gilbeto Luiz Strunk                                            ...
tipografiaQuando os leitores examinam a página:•  Primeiro observam os padrões gráficos•  gerais.•  Depois analisam gramat...
tipografiaNos casos onde há mais de um tipo napágina, é estabelecida uma situação quepode ser:•  Concordante.•  Conflitant...
tipos concordantesOcorre ao utilizar somente uma família defontes, sem muitas variações de estilo,tamanho, peso, etc.É fác...
tipos conflitantesOcorre ao combinar fontes similares emestilo, tamanho, peso, etc.As similaridades são incômodasporque as...
* Fonte: livro “Design para quem não é designer”, de Robin Williams                                                       ...
tipos contrastantesOcorre quando combinamos fontes separadase elementos nitidamente diferentes entre si.Os projetos visual...
* Fonte: livro “Design para quem não é designer”, de Robin Williams                                                       ...
características dos tipos•  Ascendentes: são as partes das letras•  que são mais altas do que a altura do x.•  Altura do x...
* Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação...
características dos tipos•  Olho: é a pequena área fechada que•  resulta do traçado de certas letras como•  a letra “o” e ...
* Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação...
ajustes do tamanho do tipoA interface deve ser adaptada parasatisfazer as necessidades de todos osusuários?Pessoas com bai...
ajustes do tamanho do tipoDesigners deveriam utilizar a unidaderelativa e flexível “em” para permitir oajuste do tamanho d...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
ajustes do tamanho do tipoTambém é possível ajustar o tamanhodos tipos em “pontos” ao invés daunidade “em”.Mas os monitore...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
tipos dos sistemas operacionaisOs tipos básicos que vêm instalados comos sistemas operacionais Windows eMacintosh aparecem...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
tipografia em interfaces digitais:   com-serifa       x   sem-serifa
tipos com-serifa x sem-serifaA maioria dos tipos possui categoriasdistintas, que utilizam as serifas(terminações dos carac...
* Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de c...
tipos com-serifaSerifa (ou cerifa) é um traço ou filete quearremata os terminais dos tipos.Trata-se de um elemento que def...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
tipos sem-serifaComo o próprio nome já diz, as fontessem-serifa não possuem serifas nos finaisde seus traços.A idéia de re...
tipos sem-serifaOs tipos sem-serifa não possuem umatransição grosso/fino visível nos seustraços.Logo, as letras têm sempre...
* Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação...
tipos com-serifa x sem-serifaA “Arial” foi a fonte escolhida comopreferida em diversas pesquisas,utilizando-se crianças, e...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
tipografia em interfaces digitais:  legibilidade        xleiturabilidade
legibilidade x leiturabilidadeLegibilidade: é o atributo de umcaractere que permite a cada pessoaidentificá-lo em relação ...
legibilidade x leiturabilidadeLeiturabilidade: é a qualidade que tornapossível reconhecer a informação que umdeterminado m...
* Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de c...
* Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de c...
* Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de c...
tipografia em interfaces digitais:alinhamento  de textos
alinhamento de textosO texto pode ser alinhado de diferentesmodos:•  Textos justificados.•  Textos centralizados.•  Textos...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
textos justificados                      Texto justificado mal                      espacejado, criando                   ...
textos justificados                      Texto justificado mal                      espacejado, criando                   ...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
alinhamento de textosOs títulos e cabeçalhos centralizadoscombinam bem com um texto justificado.Os títulos e os cabeçalhos...
alinhamento de textosA apresentação centralizada dos títulos ecabeçalhos contrasta com a assimetria damargem direita quebr...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
tipografia em interfaces digitais:realces de textos
realces de textosA utilização de realces de texto direcionao olhar do usuário ao longo do conteúdo.Deve-se acrescentar ênf...
realces de textosO texto pode ser realçado de diferentesmodos:•  Textos em itálico.•  Textos em negrito.•  Textos sublinha...
realces de textosO texto pode ser realçado de diferentesmodos (continuação):•  Textos em letras maiúsculas.•  Textos com l...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
textos coloridos          link                                                         link                               ...
textos coloridoslink                                                                não é link                            ...
textos coloridos       link              não é link                            não é linklinklink                         ...
* Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/a...
* Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/a...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
textos em letras maiúsculas               Todas as palavras digitadas em caixa-alta               têm uma forma retangular...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
“ Não ipomtra emetãso,odrem ascsioa  de uma plravaa                 qaul                       a úncia                    ...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-des...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-fo...
* Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-fo...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-des...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-des...
* Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-des...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-des...
* Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0...
* Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - ...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
* Fonte: questionário “What font size do you use for body copy on your clients sites?”, de Smashing Magazine - <http://pol...
tipografia em interfaces digitais:comprimento dos textos
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/200...
tipografia em interfaces digitais:   entrelinha   dos textos
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
* Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sa...
tipografia em interfaces digitais:por quê é difícil  ler na tela?
por quê é difícil ler na tela?A tela do computador processa oscaracteres com uma resolução muitomais baixa do que em livro...
por quê é difícil ler na tela?Além disso, o texto que é exibido na telaé difícil de ler não só pela baixaresolução.A maior...
por quê é difícil ler na tela?                                 A informação                                 preenche a    ...
por quê é difícil ler na tela?                                 Neste caso a                                 janela do     ...
por quê é difícil ler na tela?                                 Blocos fixos de                                 informações...
tipografia em interfaces digitais:lorem ipsum
lorem ipsumNão utilize o “lorem ipsum” como recursode marcação de textos na interface.Textos incompreensíveis atrapalham o...
lorem ipsum generatorLorem ipsum generator: http://www.designerstoolbox.com/designresources/greek/
“   O conteúdo é o que interessa! Design    é comunicação. É preciso mais do que                        ”    pixels para c...
lorem ipsumA compreensão de boxes e retângulosnão é tão trivial quanto se imagina.A experiência do usuário deve serconduzi...
* Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Fe...
* Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Fe...
tipografia em interfaces digitais: referênciasbibliográficas
referências bibliográficas:      livros
referências bibliográficas: livros              •  Guia de estilos da web: princípios              básicos de design para ...
referências bibliográficas: livros                           •  Identidade visual:                           •  a direção ...
referências bibliográficas: livros          •  Design para quem não é designer          •  Robin Williams
referências bibliográficas:    artigos
referências bibliográficas: artigos•  Modern web design style, good web 2.0 design•  Bem Hunt•  http://www.webdesignfromsc...
referências bibliográficas: artigos•  Design acessível, daltonismo e a cegueira das cores•  Henrique C. Pereira•  http://r...
referências bibliográficas:    monografias,dissertações e teses
referências bibliográficas: monografias, dissertações e teses•  Ergonomização da interação humano-computador: leiturabilid...
referências bibliográficas: palestras
referências bibliográficas: palestras•  Elementos de composição de telas - design de interfaces:•  facilitando a experiênc...
tipografia em interfaces digitais:sobre o professor
sobre o professor       Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da       equipe d...
fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com
Upcoming SlideShare
Loading in...5
×

Tipografia em interfaces digitais

2,818

Published on

Aula do curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da PUC-Rio. Mais informações em http://www.eduardobrandao.com/aulas/design-telas/tipografia-em-interfaces-digitais/

Published in: Education
2 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,818
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
16
Embeds 0
No embeds

No notes for slide

Tipografia em interfaces digitais

  1. 1. tipografia eminterfaces digitaisEduardo Rangel Brandão, M.Sc.A reprodução, total ou parcial, dos textos e imagens deste documento só é permitida para fins não comerciais,sendo obrigatória a citação da fonte.
  2. 2. O conteúdo desta aula foi ministrado no Curso de Pós-Graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação da Pontifícia Universidade Católica do Rio de Janeiro
  3. 3. tipografiaA tipografia desempenha um papel duplo:•  Tanto como comunicação verbal.•  Quanto como comunicação visual.A escolha de uma família de letras iráconferir consistência ao projeto.
  4. 4. tipografiaOs jornais são um dos exemplos maisclaros sobre a importância do empregoda tipografia.Cada um tem uma família tipográfica quedetermina sua personalidade.
  5. 5. * Fonte: livro “Identidade visual: a direção do olhar”, de Gilbeto Luiz Strunk tipografia
  6. 6. tipografiaQuando os leitores examinam a página:•  Primeiro observam os padrões gráficos•  gerais.•  Depois analisam gramaticalmente a•  linguagem, ou seja, eles lêem.
  7. 7. tipografiaNos casos onde há mais de um tipo napágina, é estabelecida uma situação quepode ser:•  Concordante.•  Conflitante.•  Contrastante.
  8. 8. tipos concordantesOcorre ao utilizar somente uma família defontes, sem muitas variações de estilo,tamanho, peso, etc.É fácil manter a harmonia da página,conferindo ao material uma estéticacalma ou formal.
  9. 9. tipos conflitantesOcorre ao combinar fontes similares emestilo, tamanho, peso, etc.As similaridades são incômodasporque as atrações visuais não sãoas mesmas (concordantes), mastambém não são diferentes(contrastantes).Logo, criam um conflito.
  10. 10. * Fonte: livro “Design para quem não é designer”, de Robin Williams tipos conflitantes Aa Aa Aa Arial Tahoma Verdana
  11. 11. tipos contrastantesOcorre quando combinamos fontes separadase elementos nitidamente diferentes entre si.Os projetos visualmente interessantes,geralmente, têm bastante contraste.Estes contrastes são enfatizados, atraindo aatenção das pessoas.
  12. 12. * Fonte: livro “Design para quem não é designer”, de Robin Williams tipos contrastantes Aa Aa Aa Arial Courier New Times New Roman
  13. 13. características dos tipos•  Ascendentes: são as partes das letras•  que são mais altas do que a altura do x.•  Altura do x (ou altura-x): é a altura da•  parte principal das letras em caixa-baixa•  (minúsculas).•  Descendentes: são as partes das letras•  que ficam abaixo da linha de base (a•  linha invisível, sobre a qual o tipo fica).
  14. 14. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria características dos tipos Altura-X Ascendente Abc ghi qrstu x Arial, tamanho 96 Descendente Altura-X Ascendente Abc ghi qrstu x Times New Roman, tamanho 96 Descendente
  15. 15. características dos tipos•  Olho: é a pequena área fechada que•  resulta do traçado de certas letras como•  a letra “o” e o topo da letra “e”.
  16. 16. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria características dos tipos Olho Abc ghi qrstu x Arial, tamanho 96 Olho Abc ghi qrstu x Times New Roman, tamanho 96
  17. 17. ajustes do tamanho do tipoA interface deve ser adaptada parasatisfazer as necessidades de todos osusuários?Pessoas com baixa acuidade visualpodem fazer ajustes para que os tipossejam exibidos com um tamanho maislegível?
  18. 18. ajustes do tamanho do tipoDesigners deveriam utilizar a unidaderelativa e flexível “em” para permitir oajuste do tamanho dos tipos?No caso de um usuário que ajusta seubrowser para exibir um padrão de tiposem 12 pontos, por exemplo, um recuo detexto de “2-em” representaria 24 pontos.
  19. 19. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Com um layout flexível, o projeto da interface permanece intacto, mesmo quando o tamanho do texto é ampliado.
  20. 20. ajustes do tamanho do tipoTambém é possível ajustar o tamanhodos tipos em “pontos” ao invés daunidade “em”.Mas os monitores exibem o conteúdo emdiferentes resoluções.Um tipo de 12 pontos em uma tela terá,aproximadamente, 14 pontos em outra.
  21. 21. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Como são exibidos, em um computador Windows e em um computador Macintosh, os principais tipos True Type da Microsoft, com 12 pontos.Uma fonte pequena visualizada no Windows poderá tornar-se totalmente ilegível quandovisualizada no Macintosh (nos programas do Windows o tipo é 2 a 3 pontos maior que oequivalente do Macintosh).
  22. 22. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton ajustes do tamanho dos tipos na interface Como são exibidos, em um computador Windows e em um computador Macintosh, os principais tipos True Type da Microsoft, com 12 pontos.
  23. 23. tipos dos sistemas operacionaisOs tipos básicos que vêm instalados comos sistemas operacionais Windows eMacintosh aparecem listados no próximoslide.Ao especificar tipos em sites da internet,por exemplo, deve-se escolher ao menosuma fonte de cada sistema operacional,para evitar que o browser exiba a suafonte padrão.
  24. 24. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton tipos básicos do windows e macintosh Muitos usuários de Macintosh que tenham instalado o Microsoft Office ou o Internet Explorer da Microsoft contarão com fontes Windows instaladas em seus sistemas operacionais.
  25. 25. tipografia em interfaces digitais: com-serifa x sem-serifa
  26. 26. tipos com-serifa x sem-serifaA maioria dos tipos possui categoriasdistintas, que utilizam as serifas(terminações dos caracteres) paraclassificá-los.
  27. 27. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria tipos com-serifa x sem-serifa 1. Serifa côncava (ex: Garamond, Venetian). 2. Serifa quadrada (ex: Rockwell). 3. Serifa côncava quadrada (ex: Clarendon). 4. Serifa linear (ex: Bodoni, Didot). 5. Serifa exagerada (ex: Souvenir). 6. Serifa triangular (ex: WideLatin). 7. Sem serifa normal (ex: Helvetica, Univers). 8. Sem serifa de terminação oblíqua (ex: Lithos). 9. Sem serifa de terminação larga (ex: Optima). 10. Sem serifa de terminação arredondada (ex: Helvetica Rounded).
  28. 28. tipos com-serifaSerifa (ou cerifa) é um traço ou filete quearremata os terminais dos tipos.Trata-se de um elemento que define commaior clareza os limites do traço,alinhando os caracteres.Os tipos com-serifa exibem uma transiçãogrosso/fino visível nos seus traços.
  29. 29. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa
  30. 30. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa
  31. 31. tipos sem-serifaComo o próprio nome já diz, as fontessem-serifa não possuem serifas nos finaisde seus traços.A idéia de remover as serifas foi umprogresso mais tardio na evolução datipografia e não obteve muito sucesso atéo início do século 20.
  32. 32. tipos sem-serifaOs tipos sem-serifa não possuem umatransição grosso/fino visível nos seustraços.Logo, as letras têm sempre a mesmaespessura.
  33. 33. * Fonte: livro “Design para quem não é designer”, de Robin Williams, e dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais devídeo de computador”, de Luís Eduardo Santa Maria tipos com-serifa x sem-serifa Sem serifa Abc ghi qrstu x Todos os tipos com o peso igual - letras com a mesma espessura. Sem serifa Com serifa Abc ghi qrstu x Transição grosso/fino visível nos traços. Com serifa
  34. 34. tipos com-serifa x sem-serifaA “Arial” foi a fonte escolhida comopreferida em diversas pesquisas,utilizando-se crianças, estudantesuniversitários e adultos acima dos 50anos.A “Times New Roman”, fonte maispopular dos processadores de texto,demonstrou baixa aceitação em diversaspesquisas sobre leitura em telas.
  35. 35. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa x sem-serifa no títuloSerifa (40%) Sem-serifa (60%) Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  36. 36. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos com-serifa x sem-serifa no corpo do textoSerifa (34%) Sem-serifa (66%) Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  37. 37. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tipos mais populares Corpo do texto Títulos Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  38. 38. tipografia em interfaces digitais: legibilidade xleiturabilidade
  39. 39. legibilidade x leiturabilidadeLegibilidade: é o atributo de umcaractere que permite a cada pessoaidentificá-lo em relação a outroscaracteres.Depende de características comoespessuras das hastes, proporção entreespessura/altura, desenho do caractere,proporção entre largura/altura e contrastefigura/fundo.
  40. 40. legibilidade x leiturabilidadeLeiturabilidade: é a qualidade que tornapossível reconhecer a informação que umdeterminado material contém, quandorepresentado por caracteres agrupadosem conjuntos de palavras, frases eenunciados.
  41. 41. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeaO caractere é facilmente identificado na sua forma e contraste. Boa legibilidade.aEmbora possua uma forma bem desenhada, o baixo contraste figura/fundo prejudica alegibilidade.
  42. 42. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeO contraste entre figura e fundo é ótimo, mas a forma do caractere dificulta a suaidentificação, prejudicando a sua legibilidade.Neste caso, tanto o baixo contraste figura/fundo quanto a forma do caractere prejudicam alegibilidade.
  43. 43. * Fonte: dissertação de mestrado “Ergonomização da interação humano-computador: leiturabilidade em terminais de vídeo de computador”, de Luís Eduardo Santa Maria legibilidade x leiturabilidadeAulaO conjunto de caracteres agrupados fornecem uma compreensão rápida da informação,conferindo uma boa leiturabilidade para o texto.Embora seja (quase) possível distinguir separadamente todos os caracteres, a forma decada um prejudica a sua legibilidade. Logo, o agrupamento das letras fornece umacompreensão mais demorada para a mensagem, diminuindo a leiturabilidade do texto.
  44. 44. tipografia em interfaces digitais:alinhamento de textos
  45. 45. alinhamento de textosO texto pode ser alinhado de diferentesmodos:•  Textos justificados.•  Textos centralizados.•  Textos alinhados à direita.•  Textos alinhados à esquerda.
  46. 46. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos justificados Freqüentemente ficam mal espacejados e com uma hifenização excessiva, necessitando de um ajuste manual. Esse nível de controle não é uma possibilidade em todas as interfaces. Na internet, por exemplo, este controle não se aplica.
  47. 47. textos justificados Texto justificado mal espacejado, criando um resultado pouco atrativo. O scroll da página não oferece indicação sobre a posição do texto. Não é possível saber se este texto encontra-se no início, meio ou final. Deve-se evitar scrolls que não oferecem algum tipo de feedback para seus usuários.
  48. 48. textos justificados Texto justificado mal espacejado, criando um resultado pouco atrativo.
  49. 49. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos centralizados São difíceis de ler, pois na cultura ocidental lê-se o texto da esquerda para a direita, ancorando a exploração ao longo da página na linha vertical da margem esquerda. As margens esquerdas quebradas, que são produzidas pela centralização do texto, dificultam essa exploração, porque os olhos necessitam procurar o início de cada nova linha.
  50. 50. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos alinhados à direita São difíceis de ler, pois na cultura ocidental lê-se o texto da esquerda para a direita, ancorando a exploração ao longo da página na linha vertical da margem esquerda. As margens esquerdas quebradas, que são produzidas pelo alinhamento do texto à direita, dificultam essa exploração, porque os olhos necessitam procurar o início de cada nova linha.
  51. 51. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos alinhados à esquerda É a opção de melhor leitura, porque a margem esquerda é uniforme e previsível e a margem direita é irregular. Ao contrário do texto justificado, o alinhamento à esquerda não requer ajustes no espacejamento das palavras, pois as desigualdades do espacejamento acabam ficando ao final das linhas. A margem direita “quebrada” confere mais variedade e atratividade, sem interferir na leitura.
  52. 52. alinhamento de textosOs títulos e cabeçalhos centralizadoscombinam bem com um texto justificado.Os títulos e os cabeçalhos acima detextos alinhados à esquerda tambémdevem ser ajustados rente à margemesquerda.
  53. 53. alinhamento de textosA apresentação centralizada dos títulos ecabeçalhos contrasta com a assimetria damargem direita quebrada do textoalinhado à esquerda, produzindo umapágina desequilibrada.
  54. 54. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton alinhamento de textos Página equilibrada Página desequilibrada Página equilibrada Título Título Título Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur amet, consetetur amet, consetetur sadipscing elitr, sed diam sadipscing elitr, sed diam sadipscing elitr, sed diam nonumy eirmod tempor nonumy eirmod tempor nonumy eirmod tempor invidunt ut labore et invidunt ut labore et invidunt ut labore et dolore magna aliquyam. dolore magna aliquyam. dolore magna aliquyam. Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consetetur amet, consetetur amet, consetetur sadipscing elitr, sed diam sadipscing elitr, sed diam sadipscing elitr, sed diam nonumy eirmod tempor nonumy eirmod tempor nonumy eirmod tempor invidunt ut labore et. invidunt ut labore et. invidunt ut labore et. Texto justificado, título e Texto alinhado à esquerda, Texto alinhado à esquerda, cabeçalho centralizados. título e cabeçalho título e cabeçalho alinhados centralizados. à esquerda.
  55. 55. tipografia em interfaces digitais:realces de textos
  56. 56. realces de textosA utilização de realces de texto direcionao olhar do usuário ao longo do conteúdo.Deve-se acrescentar ênfase usandoapenas um parâmetro por vez.Somente uma pequena variação énecessária para criar o contraste visual.
  57. 57. realces de textosO texto pode ser realçado de diferentesmodos:•  Textos em itálico.•  Textos em negrito.•  Textos sublinhados.•  Textos coloridos.
  58. 58. realces de textosO texto pode ser realçado de diferentesmodos (continuação):•  Textos em letras maiúsculas.•  Textos com letras arredondadas.•  Textos com letras grandes.
  59. 59. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em itálico O texto em itálico chama a atenção dos olhos porque contrasta com o formato do corpo do texto. É aconselhável utilizar o texto em itálico para os casos convencionais (como citar o título de um livro ou jornal, por exemplo) ou dentro do bloco de texto para diferenciar palavras e frases importantes ou escritas em um idioma estrangeiro. Deve-se evitar colocar grandes blocos de texto em itálico, porque a leitura deste tipo de recurso é muito mais baixa que a de um texto romano do mesmo tamanho.
  60. 60. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em negrito O texto em negrito contrasta com o texto normal por sua “cor”. Apesar disso, grandes blocos de texto em negrito ocasionam a perda do contraste e, por isso, acabam perdendo a sua efetividade. Uma fonte arejada, com bastante espaço entre as letras e entre as linhas cria uma “cor” e uma textura bastante suaves. Uma fonte em negrito, pouco arejada, cria uma cor escura, com uma textura diferente e pesada.
  61. 61. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito Através dos textos em negrito, muitos designers buscam captar a atenção do usuário para certas informações. Geralmente, esses textos em negrito apresentam uma visão geral do produto: •  Em poucas palavras. •  Em um curto período de tempo. Os textos em negrito são utilizados de forma mais gráfica do que o texto regular. Os designers buscam controlar o impacto visual, para evitar que a experiência de navegação seja prejudicada.
  62. 62. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito Quando usar textos em negrito? Não adianta destacar qualquer coisa sobre o propósito da interface. Logo, textos em negrito só devem ser utilizados quando houver algo realmente importante para ser dito. A utilização de um fundo plano e contrastante pode ajudar bastante.
  63. 63. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito
  64. 64. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos em negrito: logotipos Um logotipo em negrito ajuda a criar uma marca clara e forte, capaz de incorporar atitude, tom de voz e uma boa primeira impressão.
  65. 65. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos sublinhados O texto sublinhado é uma herança da época das máquinas de escrever, quando ainda não estavam disponíveis as opções de texto em itálico ou negrito. Este recurso possui um grande defeito estético: é muito pesado e interfere na forma das letras. Além disso, ao incluir um texto sublinhado em uma interface web, por exemplo, certamente o mesmo será confundido com um link de hipertexto.
  66. 66. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos coloridos A utilização de cores é uma boa opção para diferenciar a tipografia, além de funcionar bem como um meio sutil de destacar os cabeçalhos de seção. Deve-se escolher tons que contrastem com o fundo da página. Na web, deve-se evitar cores que possam ser confundidas com o padrão azul e violeta dos links da internet. A utilização de outras cores (além do azul e violeta) dentro de blocos de texto também pode confundir usuários, que clicarão nas cores pensando que se trata de um link.
  67. 67. textos coloridos link link visitadoDurante anos, azul e violeta foram utilizados como padrão de cor de link na internet.
  68. 68. textos coloridoslink não é link link não é linkDificuldade para identificar o que é link e o que não é link.
  69. 69. textos coloridos link não é link não é linklinklink não é linklinkDificuldade para identificar o que é link e o que não é link.
  70. 70. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> textos coloridos: usuários daltônicos, #comofaz ? Em um menu, que recebe um destaque diferenciado por causa de características como posicionamento e contornos, os links não precisam ser sublinhados. Mas, desde que todo o contexto deixe claro que se tratam de links de menu. No meio do conteúdo, não há como fugir dos links sublinhados como uma forma simples de indicar, para todos os usuários, o que é um link e o que não é. Se você não conseguiu ver o número 74 na imagem, você é daltônico.
  71. 71. * Fonte: artigo "Design acessível, daltonismo e a cegueira das cores", de Henrique C. Pereira - <http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/#more-329> textos coloridos: usuários daltônicos, #comofaz ? Visão normal Visão daltônica Exemplo de como os usuários daltônicos enxergam alguns links.
  72. 72. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas O TEXTO EM MAIÚSCULAS É UM DOS MÉTODOS MAIS COMUNS E MENOS EFICIENTES PARA ADICIONAR ÊNFASE. A LEITURA CONSISTE, PRIMEIRAMENTE, EM RECONHECER O FORMATO GERAL DAS PALAVRAS, E NÃO EM ANALISAR CADA LETRA E DEPOIS MONTAR UMA PALAVRA RECONHECÍVEL.
  73. 73. textos em letras maiúsculas Todas as palavras digitadas em caixa-alta têm uma forma retangular similar, que nos obriga a ler as palavras letra por letra. Logo, é recomendável um estilo de escrita baseado em letras minúsculas, porque as letras maiúsculas dificultam a leitura.
  74. 74. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasinterfacesINTERFACES
  75. 75. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasA leitura depende do topo
  76. 76. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculasA leitura depende do topo
  77. 77. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas As palavras ou frases escritas em caixa-baixa são mais legíveisA leitura depende do topo devido ao fato que, durante a leitura, explora-se principalmente a parte superior das palavras.
  78. 78. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas As palavras ou frases escritas em caixa-baixa são mais legíveisA leitura depende do topo devido ao fato que, durante a leitura, explora-se principalmente a parte superior das palavras.
  79. 79. “ Não ipomtra emetãso,odrem ascsioa de uma plravaa qaul a úncia lrteas iprotmatne é que a piremria e útmlia lrteas etejasm no lgaur crteo. O rseto pdoe ser uma ttaol bçguana que vcoê andia pdoe ler sem peroblma. ”
  80. 80. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton textos em letras maiúsculas Atenção!Cuidado Com Iniciais Ao utilizar letras maiúsculas apenas nas iniciais de títulos,Maiúsculas Nos Títulos a exploração da forma das palavras também será quebrada.
  81. 81. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> textos com letras arredondadas A utilização de caracteres arredondados, em muitas interfaces, fornece uma abordagem moderna e lúdica para a identidade visual do produto.
  82. 82. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes Hoje em dia, muitas interfaces utilizam letras grandes. Essa característica se deve ao fato dos designers estarem trabalhando com menos coisas na tela, removendo os elementos desnecessários. Logo, sobroumais espaço, permitindo que os elementos mais importantes sejam aplicados num tamanho maior. Coisas maiores são mais perceptíveis: esse efeito é utilizado ao longo da história do design em cabeçalhos, títulos e manchetes.
  83. 83. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> textos com letras grandes Muitos designers de interface se esquivaram desse estilo no passado, porque os cabeçalhos das interfaces eram menores e mais discretos. No entanto, ao combinarmos com a tendência de cabeçalhos maiores (topo separado), os textos com letras grandes chamam a atenção do usuário, ajudando a expressar mais claramente a identidade do site.
  84. 84. * Fonte: artigo “Web design trends for 2010”, de Jacqueline Thomas - <http://webdesignledger.com/tips/web-design-trends-for-2010> textos com letras grandes Por conta da conscientização, cada vez maior, sobre a importância da usabilidade, designers de interface preferem não se arriscar quanto ao uso de fontes novas e diferentes. Com a utilização correta, um site que utiliza a tipografia como elemento principal do projeto será mais interessante para o usuário, evitando uma sobrecarga de toneladas de fotos.
  85. 85. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes A letra grande também é mais acessível. Não apenas para as pessoas com problemas visuais, mas também para: •  Os que utilizam dispositivos móveis. •  As pessoas que estão distantes da tela. •  Os que estão “folheando” a tela.
  86. 86. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/>“ Faça com que o texto mais importante da interface seja maior.”
  87. 87. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes
  88. 88. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> textos com letras grandes
  89. 89. * Fonte: artigo “The visual design of Web 2.0”, de Jonathan Nicol - <http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/> textos com letras grandes
  90. 90. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/> textos com letras grandes Como usar letras grandes? Use as letras grandes para ajudar os usuários a enxergarem rapidamente: •  Sobre do que se trata a interface. •  O que é mais importante nela. É preciso ter sensibilidade para descobrir para onde esses usuários desejam olhar e o que eles procuram.
  91. 91. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes Como usar letras grandes? Ao utilizar letras grandes, é preciso simplificar o layout e remover os elementos desnecessários. Também é preciso ter uma razão para aumentar o tamanho de alguns textos. Esse texto deve ser significativo e útil, caso contrário, não há razão para mudar o tamanho do mesmo.
  92. 92. * Fonte: artigo "Modern web design style, good web 2.0 design“, de Bem Hunt - <http://www.webdesignfromscratch.com/web-design/current-style/>“ Quando tudo é importante,todos os importante. Logo, quando nada é textos são grandes, nenhum texto é grande. ”
  93. 93. * Fonte: artigo “Web 2.0 how-to design style guide”, de Ben Hunt - <http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/> textos com letras grandes O tamanho é relativo Não se pode aumentar todos os textos de uma interface e achar que melhorou a experiência de uso. Como em outras técnicas de design, a aplicação de textos grandes funciona quando utilizada com moderação. É melhor não mexer no tamanho dos textos, quando: •  A interface exibe uma grande quantidade •  de informação. •  Estas informações têm a mesma •  importância.
  94. 94. * Fonte: artigo "The best of Eyetrack III: what we saw when we looked through their eyes", de Steve Outing e Laura Ruel - <http://www.poynterextra.org/eyetrack2004/main.htm> textos com letras grandes Fontes maiores promovem a varredura da página (pessoas lêem apenas as primeiras palavras e só dão continuidade ao processo caso a sua atenção seja despertada por estas palavras).
  95. 95. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tamanho do tipo no título Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  96. 96. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> tamanho do tipo no corpo do texto Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  97. 97. * Fonte: questionário “What font size do you use for body copy on your clients sites?”, de Smashing Magazine - <http://polldaddy.com/poll/2251460/?view=results&msg=voted> tamanho do tipo no corpo do texto “Qual o tamanho da fonte você utiliza no corpo do texto do site dos seus clientes?” Pesquisa realizada com 951 designers.
  98. 98. tipografia em interfaces digitais:comprimento dos textos
  99. 99. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton comprimento dos textos As colunas de texto das É por esse motivo que os revistas e dos livros são designers tentam manter as estreitas por razões passagens de texto muito fisiológicas: a uma distância densas em colunas que não de leitura normal, o campo de sejam mais largas que esse leitura horizontal é de campo de leitura confortável. aproximadamente 8 centímetros.
  100. 100. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton comprimento dos textos As linhas de texto mais longas exigem que o leitor mova a cabeça ligeiramente ou force os músculos oculares para conseguir lê-las. Há uma perda da leiturabilidade porque, no longo caminho de volta à margem esquerda, o leitor pode perder a localização da próxima linha.
  101. 101. * Fonte: artigo “Typographic design patterns and best practices”, de Michael Martin - <http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/> número de caracteres por linha Pesquisa realizada em 50 sites populares (entre portais, blogs e versões on-line de jornais e revistas).
  102. 102. tipografia em interfaces digitais: entrelinha dos textos
  103. 103. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton entrelinha dos textos O espaço vertical de um bloco de texto é chamado de entrelinha, ou seja, a distância que existe entre a base de uma linha de texto e a base da próxima linha. A entrelinha tem uma grande influência na leiturabilidade dos blocos de texto. Uma entrelinha muito grande não permite que os olhos encontrem com facilidade a próxima linha. Uma entrelinha muito pequena torna as linhas de texto confusas, porque a parte superior de uma linha se sobrepõe a parte inferior da linha acima dela.
  104. 104. * Fonte: livro “Guia de estilo da web: princípios básicos de design para a criação de web sites”, de Patrick J. Lynch e Sarah Horton entrelinha dos textos Nos documentos impressos, utiliza- se uma entrelinha 2 pontos acima do tamanho da fonte. Logo, uma fonte de 12 pontos, por exemplo, utiliza uma entrelinha de 14 pontos. No caso das interfaces, utiliza-se uma entrelinha maior, para compensar: •  Os longos comprimentos de linha. •  A baixa resolução da tela. Então, uma fonte de 12 pontos, por exemplo, deve utilizar uma entrelinha de 14 a 16 pontos.
  105. 105. tipografia em interfaces digitais:por quê é difícil ler na tela?
  106. 106. por quê é difícil ler na tela?A tela do computador processa oscaracteres com uma resolução muitomais baixa do que em livros e revistas.O número padrão de pixels por polegada(ppi) em um monitor Mac é em torno de72.No PC, geralmente, é de 96.
  107. 107. por quê é difícil ler na tela?Além disso, o texto que é exibido na telaé difícil de ler não só pela baixaresolução.A maior parte dos textos digitais violauma regra fundamental da tipografia: aslinhas são longas demais para permitiruma leitura cômoda.
  108. 108. por quê é difícil ler na tela? A informação preenche a janela do browser, independente do tamanho (largura) desta janela: longas linhas de texto.
  109. 109. por quê é difícil ler na tela? Neste caso a janela do browser foi ajustada para um tamanho menor, diminuindo a largura da linha de texto.
  110. 110. por quê é difícil ler na tela? Blocos fixos de informações: parte da tela não é aproveitada.
  111. 111. tipografia em interfaces digitais:lorem ipsum
  112. 112. lorem ipsumNão utilize o “lorem ipsum” como recursode marcação de textos na interface.Textos incompreensíveis atrapalham oentendimento da página.Vale a pena perder um pouco mais detempo para apresentar exemplos maispróximos da realidade.
  113. 113. lorem ipsum generatorLorem ipsum generator: http://www.designerstoolbox.com/designresources/greek/
  114. 114. “ O conteúdo é o que interessa! Design é comunicação. É preciso mais do que ” pixels para comunicar.
  115. 115. lorem ipsumA compreensão de boxes e retângulosnão é tão trivial quanto se imagina.A experiência do usuário deve serconduzida por palavras.Não importa quantas são necessárias(poucas ou muitas), mas essas palavrassão peças fundamentais em qualquerinterface.
  116. 116. * Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Felipe Memória não utilize lorem ipsum Exemplo de wireframe do site GNT.
  117. 117. * Fonte: palestra “Elementos de composição de telas - design de interfaces: facilitando a experiência dos usuários”, de Felipe Memória não utilize lorem ipsum Exemplo de wireframe do site GloboEsporte.com.
  118. 118. tipografia em interfaces digitais: referênciasbibliográficas
  119. 119. referências bibliográficas: livros
  120. 120. referências bibliográficas: livros •  Guia de estilos da web: princípios básicos de design para a criação de web sites Patrick J. Lynch Sarah Horton
  121. 121. referências bibliográficas: livros •  Identidade visual: •  a direção do olhar •  Gilbeto Luiz Strunk
  122. 122. referências bibliográficas: livros •  Design para quem não é designer •  Robin Williams
  123. 123. referências bibliográficas: artigos
  124. 124. referências bibliográficas: artigos•  Modern web design style, good web 2.0 design•  Bem Hunt•  http://www.webdesignfromscratch.com/web-design/current-style/•  The visual design of Web 2.0•  Jonathan Nicol•  http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/•  Typographic design patterns and best practices•  Michael Martin•  http://www.smashingmagazine.com/2009/08/20/typographic-design-•  survey-best-practices-from-the-best-blogs/•  Web 2.0 how-to design style guide•  Ben Hunt•  http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-•  guide/
  125. 125. referências bibliográficas: artigos•  Design acessível, daltonismo e a cegueira das cores•  Henrique C. Pereira•  http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-•  cegueira-das-cores/#more-329•  What font size do you use for body copy on your clients sites?•  Smashing Magazine•  http://polldaddy.com/poll/2251460/?view=results&msg=voted•  Web design trends for 2010•  Jacqueline Thomas•  http://webdesignledger.com/tips/web-design-trends-for-2010•  The best of Eyetrack III: what we saw when we looked through•  their eyes•  Steve Outing•  Laura Ruel•  http://www.poynterextra.org/eyetrack2004/main.htm
  126. 126. referências bibliográficas: monografias,dissertações e teses
  127. 127. referências bibliográficas: monografias, dissertações e teses•  Ergonomização da interação humano-computador: leiturabilidade•  em terminais de vídeo de computador•  Luís Eduardo Santa Maria•  Dissertação de Mestrado do Programa de Pós-Graduação em Design: Ergonomia e Usabilidade da Interação•  Humano-Computador (PUC-Rio - 2002)
  128. 128. referências bibliográficas: palestras
  129. 129. referências bibliográficas: palestras•  Elementos de composição de telas - design de interfaces:•  facilitando a experiência dos usuários•  Felipe Memória
  130. 130. tipografia em interfaces digitais:sobre o professor
  131. 131. sobre o professor Eduardo Rangel Brandão atua desde 1995 na criação de produtos digitais. É gestor da equipe de UX (User eXperience) na área de novas mídias da Globosat, onde desenvolve projetos de sites e aplicativos (smartphones, tablets, smart-TVs, set-top boxes, consoles de games, etc.) para canais de televisão como GNT, SporTV, Multishow, Viva, Gloob, Telecine, Universal Channel, GloboNews, Canal Brasil, MegaPix, SyFy, Futura, PremiereFC, Combate, Sexy-Hot, Off, Muu, Philos, entre outros. É professor em cursos de pós-graduação, em disciplinas correlatas a arquitetura de informação, design de interfaces, usabilidade, interação humano-computador e metodologia de pesquisa. Participa do comitê organizador e do comitê técnico científico de congressos internacionais nas áreas de ergonomia, usabilidade, design de interfaces e interação humano-computador. Trabalhou como arquiteto de informação na Globo.com e como designer de interfaces nas empresas Agência Click, Starmedia, Cadê?, MTEC Informática e Rio Datacentro. Atuou em projetos para Amil, Banco do Brasil, Brasil Telecom, Oi, Petrobras, White Martins, Fundação Planetário, Museu Villa-Lobos, Projeto Portinari, Plaza Shopping Niterói, Pinto de Almeida Engenharia, Decta Engenharia, Programa das Nações Unidas para o Desenvolvimento e Programa de Despoluição da Baía de Guanabara. Publicou diversos trabalhos (entre capítulos de livros, monografias, dissertações e artigos em congressos), concluiu 7 orientações e 38 co-orientações de monografias de alunos de pós-graduação lato sensu e participou de 44 bancas examinadoras em cursos de pós-graduação lato sensu. TITULAÇÃO: mestre em interação humano-computador, especialista em ergonomia e usabilidade e bacharel em desenho industrial, nas habilitações de comunicação visual e projeto de produto.
  132. 132. fim :-)Eduardo Rangel Brandão, M.Sc.brandaoedu@gmail.comwww.eduardobrandao.com

×