Layout da interface
Atividades relacionadas (ao layout do web site)
Aspectos específicos da interface web
Configuração de tipologias
Famílias de tipologias
A escolha da tipologia da interface web ajuda a contextualização do conteúdo da página, de acordo com o projeto comercial e editorial do web site.
■ No entanto, na medida em que fontes utilizadas na web devem estar disponíveis no computador dos usuários, para que o browser não precise substitui-las pelas fontes de sua configuração padrão, não há muitas possibilidades de escolha para os designers.
■ Apenas algumas fontes são de uso universal na web:
◊ Com serifa
▪ Times New Roman
▪ Georgia
▪ Courier New
◊ Sem serifa
▪ Verdana
▪ Arial
▪ Helvética
▪ Trebuchet
▪ Tahoma
► Exemplos
■ Para evitar problemas caso o dispositivo do usuário não tenha a fonte especificada, com a aplicação da fonte default do browser, pode-se usar combinações pré-definidas com as fontes citadas acima.
O browser procura a primeira fonte disponível da combinação, e só usará a fonte default se nenhuma das fontes especificadas estiver disponível.
As combinações de fontes mais comuns são:
▪ Arial, Helvetica, sans-serif
▪ Times New Roman, Times, serif
▪ Courier New, Courier, mono
▪ Georgia, Times New Roman, Times, serif
▪ Verdana, Arial, Helvetica, sans-serif
▪ Geneva, Arial, Helvetica, sans-serif
■ O uso de estilos diferentes de fontes (negrito, itálico) para sinalizar títulos e elementos diferentes orienta o usuário sobre a função dos textos na página.
■ Os usuários leem textos nas fontes Times e Arial mais rapidamente que na Courier, Schoolbook ou Georgia. De modo geral, a Arial, a Courier e a Georgia são consideradas pelos leitores como as fontes online mais mais legíveis. (36)
■ Tamanhos
◊ O tamanho das letras dos textos deve ser flexível, redimensionável no browser, de forma que os leitores possam ajustá-los para seu conforto visual. Pode-se controlá-lo com CSS (propriedade "size"), com uso de % no valor definido como padrão.
De modo geral, o layout também 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 de corpo 10, a legibilidade é equivalente.
◊ 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 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 (36) 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 legivel 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.
◊ Devido às diferenças de resolução, o corpo da letra não deve ser fixo, mas variável (definido por percentual ou em).
■ Outras propriedades - configuráveis com CSS
◊ Entrelinha: Dependendo do tamanho do texto, o aumento ou diminuição da entrelinha pode afetar drasticamente a sua legibilidade. Pode-se controlar a entrelinha por meio de CSS (propriedade "line-height").
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 se sobreponham.
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.
Para situações em que se precisa usar todo o texto em maiúsculas, minúsculas ou capitular na primeira letra, pode-se usar a propriedade "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, pode-se usar a propriedade "text-indent".
Os pseudo-elementos :first-letter e :first-line não são compatíveis ainda com todos os browsers, mas ajudam a configurar a primeira letra e a primeira linha de texto:
◊ 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.
■ Muitas fontes diferentes na mesma página podem confundir o usuário e dificultar a identificação das diferentes áreas de informação - cada fonte e estilo deve ter uma função visível. ► Exemplo
■ Títulos usados como imagem permitem mais flexibilidade no uso de tipologias, mas não devem carregar demais a página. ► Exemplos
■ Textos corridos em caixa alta são difíceis de ler e soam com "gritos", na web.
■ Para textos longos, letras sem serifa, em cor contrastada em relação ao fundo aparecem melhor na tela e facilitam a leitura. ► Exemplos
Assuntos relacionados
► Atenção às especificidades de leitura da tela
► CSS (Cascading Style Sheets)
Referências bibliográficas (Criação de modelos de web sites)
► The anatomy of web fonts (Digital Web, acesso em 26.12.2005)
► CSS typography (ComputerWorld, acesso em 22.1.2006)
► A comparison of popular online fonts: Which size and type is best? (Usability News, acesso em 1.11.2007)
Mais informação sobre o assunto (links externos)
► The essentials of font philosophy - Sobre as vantagens das tipologias sem serifa para a leitura online (WebProNews.com, 15.3.2006)
► W3C CSS3 module: Web fonts - Documento publicado pelo World Wide web Consortium (W3C) com um conjunto de propriedades que permitem a descrição de fontes por dispositivo ou programa do usuário
► EM Calculator - Conversor de medidas de tamanho de textos de pixels para ems