Layout da interface
Atividades relacionadas (ao layout do web site)
Aspectos específicos da interface
Configuração de tipologias (para a web)
O uso apropriado de famílias de tipologias aumenta a legibilidade dos textos online não só em computadores mas em dispositivos móveis. Ajuda a reforçar a confiança e a credibilidade dos leitores em relação ao conteúdo, evidenciando a adequação da identidade visual, bem como as áreas de maior ou menor destaque editorial/comercial e os diferentes elementos da interface. Por isto, os estilos de fonte e outros atributos de texto, como tamanhos, cores devem ser aplicados de maneira consistente.
A resolução de tela dos computadores pessoais vai de 72 a 96 dpi, diferente dos produtos impressos, por exemplo, em que as resoluções vão de 300 a 2.400 dpi (dots per inch, pontos por polegada). Apesar da densidade de pontos dos monitores subir a cada ano, o valor ainda baixo faz com que leitura em tela fique 25% mais lenta do que a leitura sobre papel impresso.
Alguns fatores diretamente relacionados à configuração de tipologias influenciam a leitura de textos em interfaces web, seja em PCs ou em dispositivos móveis:
■ Alinhamento
Textos alinhados à esquerda são os mais fáceis de ler em tela. Já textos com alinhamento justificado ficam bem distribuídos nas linhas apenas se as palavras puderem ser hifenizadas. Caso contrário, costumam formar "canais" vazios nos blocos de textos, pois são forçados a chegar ao limite da linha. Como HTML e CSS ainda não dão suporte a hifenização, evite justificar textos online.
Textos centralizados e alinhados à direita são mais difíceis de ler.
O uso de margens ajuda a definir as áreas de texto e separá-los dos outros elementos das páginas. Margens largas podem dar a impressão de leveza, enquanto margens apertadas podem dar a impressão de que há pouco espaço disponível para muito conteúdo.
■ Estilos
O uso de estilos diferentes de fontes (negrito, itálico) para sinalizar títulos e elementos diferenciados orienta o usuário sobre a função dos textos na página. O estilo negrito ou bold aumenta o contraste entre os textos, especialmente títulos e subtítulos. Além de mais notado, os textos marcados por este estilo são identificados pelas ferramentas de busca como mais importantes que os demais.
No entanto, não devem ser usado em excesso, para que o efeito de destaque não perca o seu efeito. Apesar do bom uso da tipografia depender do contrate visual, não só entre as fontes como entre os blocos de texto e espaços em volta, se configuramos todos os textos em bold, estes não se sobressaem em relação aos situados no mesmo espaço.
O estilo bold também é usado para atenuar a uniformidade de grandes blocos de texto, que tendem a formar massas cinzentas e homogêneas.
Do mesmo modo, o itálico ajuda a destacar alguns trechos, especialmente em textos corridos. Não deve ser utilizado em longos trechos, pois sua leitura em tela é lenta.
Os estilos dos links também são importantes também em barras de navegação e menus quanto em longos textos, os links devem ser destacados com pesos, cores ou fontes diferenciadas.
■ Uso de maiúsculas e minúsculas
De modo geral, é importante usar as letras maiúsculas apenas na primeira palavra de um título ou subtítulo. O formato geral de cada palavra escrita inteiramente em maiúsculas é um retângulo, com duas linhas paralelas definidas pelas partes do alto e de baixo, o que gera um baixo contraste interno na sua forma. Nas minúsculas, o contraste entre as hastes facilita a leitura - normalmente lemos mais rapidamente a parte de cima das palavras.
Para situações em que se precisa usar todo o texto em maiúsculas, minúsculas ou capitular na primeira letra, aplica-se a propriedade de CSS "text-transform". Já a propriedade "font-variant" permite o uso de versalete ("small caps").
Para criar uma endentação na primeira linha do parágrafo, usa-se a propriedade "text-indent".
Os pseudo-elementos :first-letter e :first-line, que ajudam a configurar a primeira letra e a primeira linha de texto, não são compatíveis com todos os browsers.
O uso da propriedade "float" com o elemento :first-letter permite que a primeira letra do parágrafo fique localizada à esquerda e que o texto fique automaticamente localizado ao seu redor.
Quando o elemento :first-line é utilizado, o browser do usuário verifica que palavras ficam localizadas na primeira linha do texto no momento em que a página é carregada. Se o usuário altera o tamanho das letras, as configurações da primeira linha mudam de acordo com a nova largura de linha.
■ Tamanho da fonte
O tamanho das letras dos textos flexível, redimensionável no browser, permite que os leitores o adapte para o seu conforto visual - especialmente no Internet Explorer 7, que não permite o redimensionamento de textos em pixels. Pode-se configurá-lo com CSS (propriedade "font-size"), com uso de % ou no valor definido como padrão.
De modo geral, o layout deve ser flexível o suficiente para se manter estruturado com o aumento ou diminuição do corpo das letras dos textos.
◊ Em corpo menor que 10, as fontes sem serifa permitem melhor legibilidade na tela do monitor; acima do corpo 10, a legibilidade é equivalente para letras com ou sem serifa.
◊ Em corpo 10, os usuários preferem as fontes Arial, Courier, Georgia e Verdana em detrimento da Times. Em corpo 12, a Arial é preferida.
◊ Estudos mostram que os usuários, especialmente acima de 60 anos, leem mais rápido textos em corpo 12 do que em corpo 10 ou 11, mas se concentram mais na leitura de textos em corpo menor. A velocidade de leitura em corpo 12 ou maior não varia muito.
Em estudo que associa o corpo da letra a tipologias específicas, a Verdana e a Courier em corpo 12 são percebidas como mais legíveis que a Comic Sans, Schoolbook e Verdana em corpo 10. A Georgia em corpo 10 é tida como mais legível que a Tahoma e a Schoolbook em corpo 12. A Arial em corpo 10 é tida como mais legível que a Tahoma em corpo 12.
De modo geral, as fontes em corpo 12 são lidas com mais rapidez do que em tamanhos menores.
O W3C recomenda a configuração de medidas relativas, de preferência na medida em, que se baseia na medida-base do elemento. Assim, se a medida default de um texto no elemento body é 16px, os valores em se basearão relativamente a esta medida.
Para impressão, a propriedade font-size deve ser usada em pontos (valores absolutos), para que a versão impressa não apresente variações (font-size:12pt, por exemplo). Caso o valor seja configurado em unidades relativas, os textos são impressos de acordo com a sua setagem em tela. Caso os valores estejam aumentados na tela, imprimirão aumentados.
■ Entrelinha
O espaço entre as linhas-base de textos ajuda a tornar o texto mais ou menos rastreável na tela. Dependendo do tamanho do texto, o aumento ou diminuição da entrelinha pode afetar drasticamente a sua legibilidade. Quando muito aberta, a altura da linha dificulta o encadeamento da leitura; quando muito fechada, pode fazer com que as linhas ascendentes e descendentes dos tipos fiquem superpostas.
A entrelinha adequada ajuda a compensar grandes larguras de linha ou baixas resoluções de tela, estabelecendo uma proporção balanceada com o tamanho da letra. Uma entrelinha 50% maior que o tamanho da fonte provê boa legibilidade.
Controla-se a entrelinha por meio de CSS (propriedade "line-height"), que acrescenta espaços iguais em cima e embaixo do texto. Esta propriedade não deve ser aplicada com unidades absolutas (medidas em pontos ou pixels), pois caso o tamanho da fonte aumente (quando o usuário altera as configurações default do browser, por exemplo), a entrelinha pode ficar menor que o texto, dificultando a leitura.
Seus valores devem ser configurados em termos relativos ao tamanho da letra.
-> Por exemplo, a marcação "line-height: 1.5" indica que a entrelinha é 0.5 maior que o tamanho da fonte utilizada.
■ Sentido de estrutura
A aplicação adequada de tipologias permite a identificação visual das relações entre as informações e facilita a sua compreensão. O uso de cores e variações de tipologias (estilos, tamanhos, uso de maiúsculas e minúsculas), facilita a leitura rápida e facilita a escolha das opções disponíveis. ► Exemplo 1 ► Exemplo 2
O uso de tipologias também sinalisa as relações hierárquicas entre informações, sinalizando as relações de importância entre elas, seja com o uso de tamanhos diferenciados, seja com o uso de estilos bold e itálico, cores, espaço em branco em volta de títulos.
-> Na página ilustrada abaixo, por exemplo, pode-se visualizar claramente o título geral da área ("Catalogue"), a sub-área ("Femme") e os artigos selecionados (o subitem "Tambour chronographes" como parte do item "Horlogerie".
Em citações ou textos destacados como o exemplo acima, a adição de um espaço antes e depois do parágrafo é obtida pelo aumento da margem superior e inferior. Facilita a percepção de que o texto em questão não faz parte do corpo geral da página.
http://www.louisvuitton.com (acesso em 7.2.2006)
Assuntos relacionados
► Componentes da interface web
► Textos para a web : Atividades relacionadas
► Atenção às especificidades de leitura da tela
► Acessibilidade
► CSS
► Mapa do site
Referências sobre configuração de tipologias para monitores
► Why text in all caps is hard for users to read (uxmovement, acesso em 14.10.2011)
► Typography (Part 1)(WebDesignHelper, acesso em 17.5.2009)
► Como maximizar a legibilidade de um texto – segunda parte (Instituto Brasileiro de Amigabilidade e Usabilidade, acesso em 10.1.2009)
► Web style guide
► The effect of website typeface appropriateness on the perception of a company's ethos (Usability News, acesso em 8.8.2007)
Mais informação sobre o assunto (links externos)
► Google font directory – Font previewer. O usuário escolhe a fonte da Google, o aplicativo gera o CSS para usá-la (acesso em 21.7.2010)
► TypeTalk: Is GIF or JPG better for displaying web type? (CreativePro, acesso em 6.1.2010)
► On web typography (A List Apart, 8.6.2009)
► Guesses vs. data as basis for design recommendations (Alertbox, 8.6.2009)
► The essentials of font philosophy – Relato de estudo sobre se determinadas fontes estariam associadas a usos específicos (Usability News, 8.1.2006)
► The essentials of font philosophy – Sobre as vantagens das tipologias sem serifa para a leitura online (WebProNews.com, 15.3.2006)
► Dreamstime – links para bibliotecas de fontes gratuitas, entre outros recursos (BlueVertigo, acesso em 6.5.2006)
Aplicativos:
WhatFont – add-on para browser que identifica fontes em web sites e plataformas (acesso em 8.2.2012)
