A propriedade CSS font

visualizações (desde 17/05/2016) Publicado em: 11/12/2003 — Atualizado em: ➠ 01/08/2005 ➠ 17/05/2016

A estilização de fontes

As propriedades para estilização de fontes, definem os diferentes aspectos de apresentação dos glifos (letras e caracteres) que compõem os conteúdos textuais dos diferentes elementos da marcação HTML.

As propriedades básicas para estilizar fontes que serão estudadas neste tutorial são as listadas a seguir:

  color:...........cor da fonte;
  font-family:.....família (tipo) de fontes;
  font-size:.......tamanho da fonte;
  font-style:......estilo da fonte;
  font-variant:....fontes maiúsculas de menor altura;
  font-weight:.....peso da fonte;
  font-stretch:....grau de espansão/contração dos glifos;
  font:............maneira abreviada para declarar todas 
                   as propriedades anteriores (exceto cor).

Valores válidos para as propriedades da fonte

  • color:
    1. código hexadecimal: #ffc6d9
    2. código rgb: rgb(255,235,0)
    3. código rgba: rgb(255,235,0, 0.7)
    4. código hsl: hsl(210,100%,40%)
    5. código hsla: hsla(155,80%,35%,0.4)
    6. palavra-chave: red, blue, green...etc
    7. transparente: transparent
  • font-family:
    1. nome da família de fonte: define-se pelo nome da fonte,
      exemplos: "verdana", "helvetica", "arial", etc.
    2. nome da família genérica: define-se pelo nome genérico da fonte,
      exemplos: "serif", "sans-serif", "cursive", etc.
  • font-size:
    1. xx-small
    2. x-small
    3. small
    4. medium
    5. large
    6. x-large
    7. xx-large
    8. smaller
    9. larger
    10. length: medida CSS de comprimento
      exemplos: px, em, rem, % (porcentagem) ...
  • font-style:
    1. normal: fonte normal (em pé)
    2. italic: fonte inclinada
    3. oblique: fonte obliqua
  • font-variant:
    1. normal: fonte normal
    2. small-caps: transforma em maiúsculas de menor altura
  • font-weight: (ver explicação em font-weight)
    1. normal
    2. bold
    3. bolder
    4. lighter
    5. 100
    6. 200
    7. 300
    8. 400
    9. 500
    10. 600
    11. 700
    12. 800
    13. 900
  • font-stretch:
    1. normal
    2. ultra-condensed
    3. extra-condensed
    4. condensed
    5. semi-condensed
    6. semi-expanded
    7. expanded
    8. extra-expanded
    9. ultra-expanded

Vejamos a seguir alguns exemplos práticos de declarações para estilizar fontes.

color

HTML

  ...
  <body>
    <h1>Cabeçalho com letras vermelhas</h1>
    <h2>Cabeçalho com letras verdes</h2>
    <p>Parágrafo com letras azuis</p>
  </body>
  </html>

CSS

  h1 { color: red; }  
  h2 { color: #0f0; }
  p { color: rgb(0,0,255); }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Cabeçalho com letras vermelhas

Cabeçalho com letras verdes

Parágrafo com letras azuis

font-family

HTML

  ...
  <body>
    <h2>Famílias por nomes: arial, helvetica, sans-serif;</h2>
    <p>Família genérica: serif;<p>
  </body>
  </html>
  h2 { font-family: arial, helvetica, sans-serif; }
  p {font-family: serif;}

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Famílias por nomes: arial, helvetica, sans-serif;

Família genérica: serif;

Notas: A propriedade font-family é usada para definir uma lista de família de fontes.

O navegador renderiza o primeiro nome de fonte que ele reconhece na lista e ignora os demais.

Ao declarar famílias de fontes separe cada nome por uma vírgula e sempre declare por último na lista o nome de fonte genérico daqueles que estão sendo declarados.

Se o nome da fonte for composto por mais de uma palavra, por exemplo: Comic Sans MS, deve-se usar aspas duplas ou simples na grafia do nome. Se for definido o atributo "style" na marcação HTML (para estilização inline - evite isso), onde as aspas duplas já estão presentes usar obrigatoriamente aspas simples na sintaxe para grafar o nome de fonte composto.

font-size

HTML

  ...
  <body>
    <h1>Letras com tamanho: 14px</h1>
    <h2>Letras com tamanho: smaller</h2>
    <p>Letras com tamanho:100%</p>
  </body>
  </html>
  h1 { font-size: 16px; }
  h2 { font-size: smaller; }
  p { font-size: 100%; }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Letras com tamanho: 16px

Letras com tamanho: smaller

Letras com tamanho:100%

font-style

HTML

  ...
  <body>
    <h1>Este é o estilo italic</h1>
    <h2>Este é o estilo normal</h2>
    <p>Este é o estilo oblique</p>
  </body>
  </html>
  h1 { font-style: italic; }
  h2 { font-style: normal; }
  p { font-style: oblique; }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Este é o estilo italic

Este é o estilo normal

Este é o estilo oblique

font-variant

HTML

  ...
  <body>
    <p>Este cabeçalho com letras normais</p>
    <p>Este parágrafo com letras em "small-caps"</p>
  </body>
  </html>
  p1 { font-variant: normal; }
  p2 { font-variant: small-caps; }

A seguir é mostrado os efeitos da estilização conforme os códigos anteriores

Este cabeçalho com letras normais

Este parágrafo com letras em "small-caps"

font-weight

Esta propriedade CSS consagrou-se como sendo aquela destinada a obter o efeito conhecido como "negrito" cuja finalidade é realçar palavras de um texto, contudo, os efeitos que ela causa vão muito além do simples negrito.

A tradução de font-weight é: "peso da fonte" e estas palavras foram usadas para dar nome a uma propriedade CSS cujos valores definem o ... peso da fonte. 😱

Em tipografia peso da fonte tem um significado muito mais amplo que simplesmente negrito ou normal. Navegadores, por padrão, renderizam somente as fontes instaladas na máquina do usuário e em geral tais fontes são instaladas somente nas suas versões normal e bold. Assim, nós autores acabamos por acreditar que esta é a propriedade para obter o efeito negrito.

Poucos se arriscavam a ler as "pesadas" especificações do W3C e quando o faziam de lá saiam intrigados com a existência de valores para esta propriedade que são nomeados por palavra-chave (como bolder e lighter) e por números (como 100, 500 e 900).

Se definirmos um valor diferente de bold (por exemplo: 200) o navegador "mapeia" o valor para aquele mais próximo do valor 200 que esteja instalado na máquina do usuário e que, em geral, é o valor normal.

Antes de mais nada é preciso entender o significado de peso da fonte que em linguagem desprovida de considerações técnicas avançadas significa simplesmente o "grau de escurecimento da fonte" e que tem relação, também, com a espessura dos glifos (caracteres) da fonte.

As palavras-chave bolder e lighter definem um peso de fonte em tom mais escuro ou menos escuro, respectivamente, que o peso da fonte herdada do elemento ascendente mais próximo.

Atualmente é comum usar-se pacotes de fontes de terceiros, tal como os fornecidos pela API do Google Fonts. Ao escolher um pacote de fontes a usar no site o desenvolvedor tem a opção de baixar toda a faixa númerica e palavras-chave previstas para definir o peso da fonte. Para se ter uma ideia, visite o link da API do Google, mostrado anteriomente, e na interface que se abre acione o menu "Thickness" (espessura) existente à esquerda da página e nele movimente o slider observando os pesos da fonte, tanto numérico como em tom de escuro.

Resumindo: o uso de API de terceiros para inserir fontes no site possibilitou a que o autor defina com grande precisão o peso da fonte, estendendo seus horizontes para muito além da dupla normal/bold normalmente instalada na máquina do usuário.

A listagem e a tabela mostradas a seguir foram transcritas da especificação do W3C e complementam o que foi dito.

Os valores desta propriedade têm o seguinte significado:

100 a 900

Cada número indica um peso de fonte mais escuro que o seu antecessor. A correspondência de cada número com a palavra que define o peso é aproximadamente como mostrada a seguir:

  • 100 - Thin
  • 200 - Extra Light (Ultra Light)
  • 300 - Light
  • 400 - Normal
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold (Ultra Bold)
  • 900 - Black (Heavy)
normal
equivalente a ‘400’.
bold
equivalente a ‘700’.
bolder
Mais escuro do que o valor herdado para o peso da fonte.
lighter
Mais claro do que o valor herdado para o peso da fonte.

bolder e lighter

O mapeamento dos valores bold e lighter é conforme mostrado na tabela a seguir:

Valor herdado bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Voltar ⇧

HTML

  ...
  <body>
    <p>Este é um parágrafo com glifos de peso bold</p>
    <p>Este é um parágrafo com glifos de peso 700</p>
    <p>Este é um parágrafo com glifos de peso 400</p>
    <p>Este é um parágrafo com glifos de peso 900</p>
  </body>
  </html>
  p1 { font-weight: bold; }
  p2 { font-weight: 700; }
  p3 { font-weight: 400; }
  p4 { font-weight: 900; }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Este é um parágrafo com glifos de peso bold

Este é um parágrafo com glifos de peso 700

Este é um parágrafo com glifos de peso 400

Este é um parágrafo com glifos de peso 900

font-stretch

HTML

Tal como estudamos no item anterior para font-weight, aqui em geral somente os valores condensed e expanded escontram-se instalados na máquina do usuário, porém as API de terceiros para fontes fornecem pacotes com versões de fontes estilizadas segundo os demais valores desta propriedade.

  ...
  <body>
    <p>Este é o estilo de fontes condensadas</p>
    <p>Este é o estilo de fontes expandidas</p>
  </body>
  </html>
  p1 { font-stretch: condensed; }
  p2 { font-stretch: expanded; }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Este é o estilo de fontes condensadas

Este é o estilo de fontes expandidas

font

Esta é a maneira abreviada de você declarar mais de uma propriedade para fonte.

A sintaxe geral é esta: font: [style] [variant] [weight] [font-stretch] size] [/line-height] [family] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Você pode declarar todas ou algumas das propriedades.

Os valores size e family são obrigatórios quando se usa a declaração abreviada. Os demais são facultativos e se você os omitir será adotado o valor padrão (inicial) ou o valor herdado do elemento-pai.

Os valores style, variant, weight e size, podem ser declarados em qualquer ordem.

HTML

  ...
  <body>
    <p>Parágrafo em declaração única</p>
  </body>
  </html>
  p {
    font: italic small-caps bold 14px "Comic Sans MS", sans-serif;
}

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Parágrafo em declaração única

O valores caption, icon, menu, message-box, small-caption e status-bar referem-se às fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font.

  caption.........fontes usadas nos botões;
  icon............fontes usadas nos ícones;
  menu............fontes usadas nos menus;
  message-box.....fontes usadas nas caixas de mensagens;
  small-caption...fontes usadas nos pequenos controles;
  status-bar......fontes usadas na barra de status;

O valor inherit é usado para forçar a herança da fonte usada pelo elemento-pai e também deve ser declarado isolados na propriedade font como mostrado a seguir.

HTML

  ...
  <body>
    <p class="p1">Parágrafo com fonte status-bar</p>
    <p class="p2">Parágrafo com fonte inherit</p>
    <p class="p3">Parágrafo com fonte small-caption</p>
  </body>
  </html>
  .p1 { font: status-bar; }
  .p2 { font: inherit; }
  .p3 { font: small-caption; }

A seguir são mostrados os efeitos da estilização conforme os códigos anteriores

Parágrafo com fonte status-bar

Parágrafo com fonte inherit

Parágrafo com fonte small-caption

Visite uma página interativa (abre em nova janela) onde você poderá fazer suas experiências com a propriedade CSS font.