Aula 11 - Tipografia Leitura e Legibilidade

SAVE OFFLINE

Aula 11 Tipografia: Leitura e Legibilidade Disciplina: Web Design Professora: Juliana Padilha

Roteiro de Aula • Motivação • Diretrizes para Textos • Tamanho da Fonte • Escolhendo Fontes • Misturando Fontes e Cores

• Texto e Contraste com o Fundo • Texto em Movimento • Análise de Sites 2

Escrever para a Web é como qualquer outro tipo de escrita, certo? • Na verdade, escrever para a Web é completamente diferente de escrever para a impressão (ex: livros) • As pessoas não leem o texto na Web como em uma página impressa • Ao invés de ler o texto da esquerda para a direita, do início ao fim, elas escaneiam-no

3

Motivação • O principal objetivo do design na comunicação é transmitir informações • Então, escolha a tipografia que comunique algo

• A tipografia e os esquemas de cores corretos são componentes essenciais de bom design visual

4

Motivação • A legibilidade ainda é um problema nos Websites atuais • Independentemente da qualidade visual do seu site, se as pessoas não puderem ler o texto facilmente, ele estará destinado ao fracasso

5

Motivação • Isso não é um bom sinal, mas temos de admitir que alguns desses sites são verdadeiramente lindos, criados por designers muito talentosos • Se o propósito fosse mostrar arte visual, seriam louváveis • Mas diferentemente das obras-primas nas paredes dos museus, Websites são utilizados por um grande número de pessoas. • Para serem mais eficientes, eles devem seguir algumas diretrizes práticas 6

Tamanho da Fonte • Texto maior é melhor? • Não há um tamanho de texto único ou uma fonte que agrade a todos os tipos de pessoas ou se ajuste a todas as situações

7

Tamanho da Fonte • Ao escolher tamanhos de fonte, é melhor utilizar uma fonte maior para não descartar alguns dos seus leitores • No mínimo, o corpo do texto deve ter 10 pontos • Texto menor reduz a legibilidade porque letras menores simplesmente não são tão distintas

8

Tamanho da Fonte • Caracteres minúsculos tendem a perder suas formas características na tela, • especialmente quando escritos em negrito ou em itálico

9

Tamanho da Fonte Tamanhos de texto recomendáveis Tipo de público Público geral Idosos & pessoas com deficiências visuais Crianças e outros leitores iniciantes Adolescentes / adultos

Tamanho em pontos 10 – 12 12 – 14 12 – 14 10 - 12 10

Tamanho da Fonte Tamanho de fonte pequeno não é uma solução para acrescentar mais conteúdo a uma página Ter mais conteúdo não significa que as pessoas vão ler menos Texto denso afasta as pessoas

11

Tamanho da Fonte • É melhor escolher seu conteúdo de uma maneira inteligente do que espremer tudo em uma página • Se seu Website estiver precisando de mais espaço, não há problemas em flexibilizar as regras um pouco e utilizar texto menor nas áreas que a maioria das pessoas não se importa • Exemplo: • Termos de uso, rede afiliada, diretos autorais e notas legais 12

Tamanho da Fonte • Quando o mesmo tamanho parece menor: • É assim que o texto aparece em Georgia de 24 pontos

• É assim que o texto aparece em Times New Roman 24 pontos Teste diferentes fontes e analise as diferenças de tamanho. O mesmo tamanho em pontos pode parecer menor ou maior dependendo da fonte 13

Tamanho da Fonte Projetar para usuários com deficiência visual • Se seu site é destinado a idosos e pessoas com pouca visão, forneça uma maneira óbvia de ajustar o tamanho do texto • Não conte com o fato de as pessoas poderem definir suas preferência nos navegadores; a maioria das pessoas tem medo de mexer com configurações do navegador 14

Tamanho da Fonte Projetar para usuários com deficiência visual • Acrescente um botão de redimensionamento visível dentro das suas páginas de modo que as pessoas possam ajustar facilmente o tamanho do texto

15

Tamanho da Fonte Projetar para usuários com deficiência visual • Observe o site www.socialsecurity.gov que será apresentado a seguir: • Ele atende a um público idoso e utiliza apropriadamente fonte grandes

16

Tamanho da Fonte

http:// www.socialsecurity.gov /

17

Tamanho da Fonte

http:// www.socialsecurity.gov /

18

Resolução de Tela • Antigamente, havia-se a preocupação de pensar na resolução de tela dos usuários que variam de 800 por 600 pixels ou 1024 por 768 pixels • Atualmente, os Web designers devem ser preocupar em criar páginas responsivas • Se adapta ao tamanho de tela do usuário • Torna o seu site acessível pelos dispositivos móveis 19

Escolhendo Fontes • As duas famílias de fontes mais comuns são: • Fontes com serifa: tem arremates nas pontas de cada letra ou outros enfeites e variações sutis • Fontes sem serifa: são simples e não tem os detalhes decorativos

20

Escolhendo Fontes • Os estudos de legibilidade descobriram que a maioria das pessoas leem um texto impresso com serifas mais rapidamente que um texto sem serifas • Já para um texto em tela de computador, os detalhes de um texto serifado dificultam a leitura dos usuários • Nielsen e Loranger concluíram que o texto sem serifas é o mais rápido de ler em telas, sendo o oposto dos textos impressos 21

Escolhendo Fontes A tabela apresenta as fontes pré-instaladas na maioria dos navegadores Fontes comuns e suas famílias Nome da Fonte

Família de fontes genérica

Arial

Sans serif

Arial Black

Sans serif

Comic Sans MS

Cursive

Courier New

Mono Space

Georgia

Serif

Impact

Sans serif

Times New Roman

Serif

Trebuchet MS

Sans serif

Verdana

Sans serif

Traduzindo: Sem Serifa

Traduzindo: Com Serifa 22

Escolhendo Fontes • Na dúvida, use Verdana • Assim não terá erro! • Utilizar fontes que não são indicadas para a leitura online pode ser prejudicial para seu Website, especialmente em tamanhos menores

• A tabela apresentada no próximo slide descreve as características das fontes mais comuns

23

Escolhendo Fontes Nome da Fonte

Legibilidade on-line

Caractere/ Tom

Legível em tamanhos razoáveis. Boa na fonte de 10 pts ou acima

Moderna, limpa, básica e sem firulas. Preferidas por pessoas de todas as idades.

Comic Sans MS

Fonte decorativa, mas difícil de ler on-line, mesmo em tamanhos grandes

Amigável, juvenil, divertido e informal. Não apropriada para Sites mais sérios.

Georgia

A melhor fonte com serifa projetada para leitura on-line. Boa em tamanhos de fonte 10pt e acima

De aparência tradicional, mas com um visual mais moderno e legível que Times. Boa alternativa para fontes serifadas on-line.

Arial

24

Escolhendo Fontes Nome da Fonte

Impact

Times New Roman

Legibilidade on-line

Caractere/ Tom

Geralmente utilizada para impressão. Não recomendada para visualização on-line. Legibilidade ruim mesmo em tamanhos grandes

Escura. Não adequada a blocos de conteúdo. Pode ser utilizada algumas vezes para títulos curtos.

Bom para materiais impressos. A legibilidade na tela rapidamente diminui em tamanhos menores. Somente boa no corpo 12 ou superior.

De aparência tradicional. Não recomendada se você quiser parecer profissional. Geralmente, não é a preferida do público de todas as idades.

25

Escolhendo Fontes Nome da Fonte

Trebuchet MS

Verdana

Legibilidade on-line

Caractere/ Tom

Legível em tamanhos razoáveis. Boa na fonte 10 pt ou acima.

Moderna, simples e aguçada

A fonte on-line mais legível, mesmo em texto pequeno.

Profissional, simples e moderna. Essa fonte recomendada para uso no corpo de texto, em que a legibilidade é fundamental. Altamente cotada na preferência dos usuários.

26

Misturando Fontes e Cores • Nielsen e Loranger (2007) recomendam-se não mais de 4 cores diferentes e 3 fontes nas principais áreas do seu site, ou então ele parecerá desestruturado e amador • Os autores Waltrall e Siarto (2009) recomenda-se o uso de no máximo 3 cores diferentes

27

Misturando Fontes e Cores

O número de cores e estilos de fonte combinado com as figuras, elementos gráficos e fundo tornam essa página muito poluída. 28

Misturando Fontes e Cores

O Site apresentado anterior passou por uma mudança de layout. http://money.cnn.com/

29

Texto e Contraste com o Fundo • Cores escuras são melhores para texto, e cores claras são melhores para fundo • Exemplo: Texto preto sobre um fundo branco, ou algo semelhante, é mais fácil de ler

• Baixo contraste pode causar tensão ocular e desconforto • Por isso evite o uso de cores semelhantes como cinzaclaro (para texto) e o fundo branco 30

Texto e Contraste com o Fundo Nível de legibilidade das diferentes combinações de cores Combinações de Cores

Texto preto contra fundo branco

Nível de Leitura Alto: valor mais alto de contraste. Diferença perceptível alta.

Texto azul contra um fundo branco

Alto: diferença perceptível alta, contando que você use um azul-escuro

Texto branco contra um fundo azul

Médio: diferença perceptível entre média e alta dependendo das combinações de cores e do nível de saturação

Texto cinza contra um fundo branco

Baixo: difícil de ler pois o fundo escuro é percebido mais intensamente que o texto branco 31

Texto e Contraste com o Fundo Nível de legibilidade das diferentes combinações de cores Combinações de Cores Texto branco contra um fundo cinza

Texto vermelho contra um fundo azul

Texto vermelho contra um fundo preto

Nível de Leitura Baixo: baixo valor de contraste. Diferença perceptível baixa Muito Baixo: algumas combinações de cores escuras criam um efeito vibrante, cansando os olhos Muito Baixo: algumas combinações de cores escuras criam um efeito vibrante cansando os olhos

32

Cegueira para Algumas Cores • 8% dos homens e 0,5% das mulheres tem algum forma de daltonismo que os impede de diferenciar certas cores • A cegueira às cores vermelha e verde é a mais comum • Pessoas com visão defeituosa às cores vermelha e verde não conseguem distinguir as cores que estão dentro do intervalo intermediário e longo do comprimento de onda 33

Cegueira para Algumas Cores • Escolher uma combinação errada de cores, como texto vermelho sobre fundo verde, pode tornar impossível para algumas pessoas ler o texto • Pois o texto e a cor de fundo são percebidos como a mesma coisa

• Exemplo: VERMELHO, vermelho 34

Texto em Movimento • Os usuários ficam irritados com texto intermitente ou texto em movimento nos Websites • Pois ele desvia atenção daquilo que estão querendo fazer

• Eles também associam texto dinâmico a anúncios publicitários e provavelmente irão ignorá-los

• Ironicamente, texto em movimento é uma tática usada para atrair a atenção das pessoas que, na verdade, acaba por afugentá-las porque elas pensam que ele é promocional e não-confiável 35

Texto em Movimento • Todos os usuários querem controlar a velocidade de leitura, e o texto dinâmico os impede disso • Texto que se move muito lentamente também é cansativo • Em geral, os usuários conseguem ler texto estático muito mais rapidamente que texto dinâmico

36

Em Resumo • As quatro diretrizes para textos são:

I.

Utilize um tamanho de fonte com 10 ou mais pontos

II. Evite fundos visualmente poluídos III. Utilize texto preto sobre fundos brancos IV. Mantenha o mínimo possível de texto gráfico: I.

não use texto com todas as letras em maiúsculas

II.

e texto em movimento 37

Análise de sites • Análise do site: http://gdarchitect.com/philosophy.htm • É um exemplo extremo de contraste ruim • Se tiver um monitor de baixa resolução é provável que você não consiga visualizar essa página

38

Análise de sites

39

Análise de sites

40

Análise de Alguns Sites • Análise do site: • Não há necessidade de exibir os títulos em letras maiúsculas • As palavras em letras maiúsculas e minúsculas são mais fáceis de ler, especialmente com texto em baixo contraste e link sublinhados

41

Análise de Alguns Sites

42

Análise de Alguns Sites • Análise do site: http://www.nestle.com/ • É um exemplo de um site que utiliza texto da cor cinza em fundo branco • O uso dessa combinação dificulta a leitura do texto • No entanto, o tamanho das fontes é bom. Atende um público amplo

43

Análise de Alguns Sites

http://www.nestle.com/

44

Análise de Alguns Sites • Análise do site: http://www.pixar.com/ • É difícil ler texto muito pequeno • O baixo contraste entre o texto e o fundo aumenta esse problema

45

Análise de Alguns Sites

http://www.pixar.com/

46

Análise de Alguns Sites • Análise do site: http://www.dianon.com/ • É difícil ler texto muito pequeno

47

Análise de Alguns Sites

http://www.dianon.com/

48

Análise de Alguns Sites • Análise do site: http://www.staff.amu.edu.pl/~pewka/ • É difícil ler texto nesse fundo • O site está bonito, mas o fundo utilizado que é semelhante a uma folha pautada, em um momento o texto ficou em cima da linha dificultando a leitura

49

Análise de Alguns Sites

http://www.staff.amu.edu.pl/~pewka/

50

Análise de Alguns Sites • Análise do site: http://www.staff.amu.edu.pl/~gwnow/ • É difícil ler texto nesse fundo

51

Análise de Alguns Sites

http://www.staff.amu.edu.pl/~gwnow/

52

Considerações Finais • Nielsen e Loranger relatam que não há problema de quebrar um pouco as regras apresentadas por eles, no entanto, sempre deve prevalecer o bom senso, por exemplo: • Quanto a usar 3 tipos de fontes diferentes na página. Ficará bom se usar para alguns detalhes. Nada de usar em cada página do seu site uma fonte diferente para o texto • Quanto a cor de fundo do site, deve haver um contraste alto entre o fundo e o texto, pois o objetivo é sempre facilitar a leitura para o usuário e não dificultar 53

Referências • Nielsen,J. and Loranger, H. “Usabilidade na Web: Projetando Websites com Qualidade”, Elsivier, Cap. 7 – pags 213 a 249, 2007 • Waltrall, E. and Siarto, J. “Use a Cabeça! Web Design” , Alta Books, 2009

54