Usando folhas de estilo, é preciso entender a diferença entre fontes chamada "serif" e "sans-serif". As fontes "serif" possuem um acabamento mais cuidadoso, com linhas em suas extremidades para tornar o formato mais elegante. As fontes "sans-serif" não possuem tal acabamento. Em telas de computador, as fontes "sans-serif" são consideradas mais confortáveis para a leitura.

Podemos então especificar as fontes de duas formas: apenas informando o nome genérico da "família" de fontes, tal como "Serif", ou ainda especificar qual a família de fontes que queremos usar, tal como "Times New Roman".

Indicando apenas a família de fontes, permitimos que o navegador escolha a fonte baseado apenas na indicação "genérica" que passamos para ele. Assim, se uma fonte não estiver disponível, o navegador escolhe outra da mesma família.

A melhor alternativa talvez seja partir de uma fonte específica para uma família de fontes. Ou seja, usamos a fonte que realmente queremos, mas também indicamos algo mais genérico. Dessa forma podemos ter pelo menos algum controle do que será exibido pelo navegador de nossos visitantes. Veja um exemplo:


Conforme visto acima, separamos as indicações das fontes por vírgulas; e quando uma fonte possui mais de uma palavra, colocamos entre aspas.

Além de indicar a fonte, podemos alterar seu estilo. Usamos aqui a propriedade "font-style", com um dos valores: normal, italic, oblique. O valor "oblique" é similar ao valor "italic", mas não é tão bem suportado por todos os navegadores.


Temos o controle do tamanho do texto em CSS, mas é preciso uma palavra de cautela. Não devemos fazer ajustes para confundir títulos com parágrafos e vice-versa. Para isso, use sempre as tags de HTML, como <h1> e <h6> para títulos, ou <p> para parágrafos.

Quando não indicamos o tamanho da fonte, seu padrão é 16px. E podemos usar um tamanho absoluto ou relativo. Indicando um tamanho absoluto, não permitimos que o usuário redimensione as fontes. Isto não é muito bom, simplesmente por questão de acessibilidade. Mas pode ser útil, se sabemos exatamente qual o tamanho físico real do dispositivo de leitura que será usado. Já uma especificação relativa de tamanho é o que normalmente conhecemos, com as fontes podendo ser redimensionadas ao gosto do visitante.

Siga o exemplo abaixo e indique exatamente o tamanho do texto em pixels. Aparentemente esta formatação não funciona no Internet Explorer.


Para contornar o "problema" indicado acima, sobre o Internet Explorer, você pode usar outro tipo de formatação. Use um tipo de unidade, chamado "em". Um "em" (1em) indica o tamanho normal do texto. Com ele indicamos a proporção do texto normal com os demais. Assim, se usamos "2em", teremos uma fonte com o dobro de tamanho. Se usamos "1.5", teremos uma fonte com 50% a mais de tamanho, e assim por diante. A fórmula para calcular é: pixels/16 = em

Abaixo, veja o mesmo exemplo que vimos acima com pixels, agora usando "em":


Se você quer segurança total, use porcentagens. Isto é suportado por todos os navegadores. Novamente, o mesmo exemplo acima, agora com porcentagens.