As folhas de estilo são fundamentais para estilização do texto em uma página. Com as regras CSS podemos mudar sua cor, tamanho, fonte, entre muitas outras características.

Eis as principais propriedades CSS para texto:

• color: muda a cor do texto. Ex: color: #FF0000;.
• font-family: define uma lista de fontes para ser utilizada no elemento (e seus herdeiros). Os nomes das fontes são separados por vírgulas, na ordem da preferida para a menos preferida. Fontes que possuem mais que uma palavra como nome tem que estar entre aspas. Por exemplo: font-family: "Trebuchet MS", Arial, Tahoma, sans-serif;. Se o usuário tiver a fonte Trebuchet MS, o navegador irá usá-la; caso contrário, Arial; caso contrário, Tahoma; e se não houver nenhuma destas fontes instaladas, a fonte padrão sem serifa do sistema operacional (mais sobre os tipos de fontes abaixo).
• font-size: muda o tamanho do texto. Podemos utilizar unidades como px (pixels), em (unidade relativa), %, pt (pontos), entre outras. Ex: font-size: 20px.
• font-weight: muda o peso da fonte. Valores incluem bold e normal. Ex: font-weight: bold;
• font-style: muda o estilo da fonte. Valores incluem italic e normal. Ex: font-style: italic;.
• text-decoration: muda a decoração do texto. Valores incluem underline e none (por ex: para retirar o sublinhado de links). Ex: text-decoration: underline;.
• line-height: muda a altura de cada linha, ou entrelinha. É comum utilizar a unidade em, pois assim deixamos a entrelinha proporcional ao tamanho da fonte. Ex: line-height: 1.5em; (1.5 vezes o tamanho da fonte).
• text-indent: muda a indentação da primeira linha de um bloco de texto. Ex: text-indent: 2em; (indentação de 2 vezes o tamanho da fonte na primeira linha do texto).
• text-transform: muda a "caixa" do texto. Valores incluem uppercase (caixa-alta), lowercase (caixa-baixa) e capitalize (primeira letra maíuscula e o restante minúsculas). Ex: text-transform: uppercase;.
• font-variant: muda a variante da fonte. Valores incluem normal e small-caps (versalete). Ex: font-variant: small-caps;.
• word-spacing: determina o espaçamento entre palavras. Ex: word-spacing: 5px;
• letter-spacing: determina o espaçamento entre letras. Ex: letter-spacing: 2px;

Visualizar Exemplo

Para evitar o excesso de declarações, podemos compactar praticamente todas estas características usando a propriedade font:

font: [estilo] [variante] [peso] [tamanho] / [entrelinha] [família]
/* exemplo */
font: italic small-caps normal 18px/1.3em Arial, sans-serif;

Não é necessário escrever todos os valores, podemos omitir alguns. O importante é que a propriedade font pode ajudar a economizar espaço no nosso arquivo CSS e, em um arquivo complexo, diminuir bastante o seu tamanho.

Tipos de fontes

Os valores genéricos de font-family abrangem os principais tipos de fontes que existem:

• sans-serif: fontes sem serifa não possuem as "serifas", que são elementos decorativos que podem ser percebidos em letras como "p", "t", "m", "n", entre outras. Exemplos de fontes sem serifa: Arial e Trebuchet MS.
• serif: fontes em geral mais tradicionais, possuindo as serifas citadas acima. Exemplos: Times New Roman e Georgia.
• monospace: fontes que, como o nome diz, tem cada letra ocupando o mesmo espaço (o que não acontece com outras fontes). Por isso, monoespaçadas. Comum serem utilizadas em editores de texto e demonstrações de código, por causa de sua regularidade (o que facilita o alinhamento de texto). Exemplo: Courier New.
• cursive: fontes que, em geral, se assemelham à escrita à mão. Exemplo: Monotype Corsiva.
• fantasy: fontes decorativas que não se aplicam às outras definições. Este valor não é muito utilizado, por causa de seus resultados imprevisíveis.