Por que atenção · Boas práticas · Leitura complementar ·
Índice das dicas · QA Homepage· QA IG· Markup Validator· QA-dev·
A tendência entre designers em acreditar que textos com letras pequenas resulta em uma aparência mais "leve" e proporciona mais espaço por "página", para conteúdos, acaba por vezes resultando em tamanhos de fontes extremamente pequenos.
Infelizmente, isto é desastroso, devido a diversidade de plataformas usadas para acessar a Web, desde de dispositivos portáteis com suas telas minúsculas até projetores conectados ao computador. E ainda mais, até para uma mesma plataforma as configurações de tamanhos de texto podem variar.
O problema aqui é um item básico de usabilidade e acessibilidade: um projeto bem elaborado deve ser bom sem que o usuário tenha que aumentar ou reduzir o tamanho dos textos.
A maneira moderna e apropriada de definir os tamanhos de fonte a serem exibidos em uma página Web é através do uso de folhas de estilos em cascata. Esta prática é fortemente recomendada em lugar de se usar a tag <font> do HTML, porque o uso de CSS é mais flexível, mais fácil de se manutenir e proporciona economizar largura de banda. Esta dica não tem como finalidade discutir os prós e contras do uso de CSS versus uso da tag <font>, se você está interessado nesta discussão, procure no seu mecanismo de busca favorito por artigos sobre o assunto...Nós estamos focados no bom uso da tecnologia CSS para criar páginas Web legíveis.
A seguir algumas regras básicas a serem respeitadas com o objetivo de se criar páginas Web legíveis, usando as propriedades CSS para fontes.
font-size em pt, ou qualquer outra unidade de medida absoluta. Elas não são renderizadas consistentemente em diferentes plataformas e nem podem ser redimensionadas pelo agente de usuário (por exemplo, o browser).em, ou, melhor ainda,
defina um tamanho base para as fontes do documento e use tamanho absoluto ([ xx-small | x-small | small | medium | large |
x-large | xx-large ]) ou tamanho relativo
([ larger | smaller ]) para definir o tamanho de fonte para um elemento particular no documento.em menores que 1em para textos dentro do elemento body, exceto talvez para copyright e alguns outros textos similares do tipo "fine print."font-size em small, prefira uma font-family
mais legível, com alto valor de aspecto (ver font-size-adjust
nas especificações para CSS2 para explicação sobre valor de aspecto),
que são melhores para fontes com tamanho small.font-family
(com a finalidade de proporcionar ao sistema do usuário a escolher a primeira fonte disponível daquelas da lista), você poderá usar também a propriedade font-size-adjust com o objetivo de forçar o mesmo valor de aspecto.
Algumas opiniões contidas nestes documentos diferem da nossa. "Corpus 1em, nihil minor" — Bert Bos after Cato.