Propriedades CSS para estilização de fontes

Introdução

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

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

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

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

font-family

<h2>Famílias por nomes: arial, helvetica, sans-serif;</h2>
<p>Família genérica: serif;<p>

  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

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

<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>

  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

font-style

<h1>Este é o estilo italic</h1>
<h2>Este é o estilo normal</h2>
<p>Este é o estilo oblique</p>

  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

font-variant

<p>Este cabeçalho com letras normais</p>
<p>Este parágrafo com letras em "small-caps"</p>

  p1 { font-variant: normal; }
  p2 { font-variant: small-caps; }

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

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:

Voltar ⇧

<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>

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

font-stretch

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.

<p>Este é o estilo de fontes condensadas</p>
<p>Este é o estilo de fontes expandidas</p>

  p1 { font-stretch: condensed; }
  p2 { font-stretch: expanded; }

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

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.

<p>Parágrafo em declaração única</p>

  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

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.

<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>

  .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

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

Compartilhe essa matéria com seus amigos