Propriedade font-style: Itálico e outros estilos

Além de escolher a fonte (font-family), o tamanho (font-size) e a grossura (font-weight), você também pode querer aplicar estilos como o itálico para dar ênfase ou diferenciar certos trechos de texto. É para isso que serve a propriedade font-style.

A font-style define o estilo da fonte, permitindo que você use variações como itálico, oblíquo ou o estilo normal.

Pense na font-style como a forma como você escreve uma palavra: normalmente, inclinada para dar ênfase, ou talvez com uma variação mais artística.

Como usar a propriedade font-style

A sintaxe é simples: você seleciona o elemento e atribui um valor à propriedade font-style.

Sintaxe:

seletor {
  font-style: valor;
}

Valores possíveis:

1. normal (padrão): O texto é exibido com o estilo de fonte normal (não itálico, não oblíquo).

   • Uso: Para reverter um estilo itálico herdado ou para garantir que o texto não tenha um estilo inclinado.

2. italic: O texto é exibido em itálico. O itálico é uma versão da fonte que foi projetada especificamente para ser inclinada, com formas de letras ligeiramente diferentes para melhorar a legibilidade.

   • Uso: Para dar ênfase, citar títulos de obras, ou diferenciar termos técnicos.

3. oblique: O texto é exibido em um estilo oblíquo. O oblíquo é uma versão da fonte que é simplesmente inclinada artificialmente pelo navegador, sem as modificações de design que um itálico verdadeiro teria.

   • Uso: Se a fonte não tiver uma versão itálica verdadeira, o navegador pode simular o itálico usando o oblíquo. Em muitos casos, italic e oblique podem parecer iguais, mas italic é sempre preferível quando a fonte o oferece.

Diferença entre italic e oblique

A diferença é sutil, mas importante para designers e tipógrafos:

• Itálico: É uma fonte separada, desenhada para ser inclinada. As letras podem ter formas diferentes das suas contrapartes normais para manter a beleza e a legibilidade.
• Oblíquo: É a versão normal da fonte simplesmente inclinada. As formas das letras não mudam.

Na prática, se você pedir font-style: italic; e a fonte não tiver uma versão itálica, o navegador geralmente usará a versão oblíqua como fallback. Se você pedir font-style: oblique; e a fonte tiver uma versão itálica, o navegador pode usar a itálica ou inclinar a normal. Para a maioria dos casos, usar italic é a melhor escolha.

Exemplo Prático:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Font Style</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      font-size: 1.1rem;
    }

    p {
      margin-bottom: 10px;
    }

    .normal-text {
      font-style: normal; /* Garante que não há itálico */
    }

    .italic-text {
      font-style: italic; /* Aplica itálico */
    }

    .oblique-text {
      font-style: oblique; /* Aplica oblíquo */
    }

    em {
      font-style: italic; /* A tag <em> já tem font-style: italic por padrão */
    }

    i {
      font-style: italic; /* A tag <i> já tem font-style: italic por padrão */
    }
  </style>
</head>
<body>
  <p class="normal-text">Este é um texto com estilo normal.</p>
  <p class="italic-text">Este é um texto com estilo <i>italic</i>.</p>
  <p class="oblique-text">Este é um texto com estilo <i>oblique</i>.</p>

  <p>Texto normal com uma palavra <em>em itálico</em> usando a tag HTML <em>.</p>
  <p>Texto normal com uma palavra <i>em itálico</i> usando a tag HTML <i>.</p>

  <div style="font-style: italic;">
    <p>Este parágrafo herda o estilo itálico do seu pai.</p>
    <p class="normal-text">Este parágrafo, mesmo sendo filho, tem seu estilo revertido para normal.</p>
  </div>
</body>
</html>

Resultado: Observe como os diferentes estilos são aplicados ao texto. Em muitas fontes, italic e oblique podem parecer idênticos.

Boas Práticas:

• Use italic para ênfase: É o valor mais comum e semanticamente correto para texto inclinado.
• Evite oblique a menos que seja necessário: Prefira italic sempre que a fonte oferecer uma versão itálica verdadeira.
• Acessibilidade: Use itálico com moderação. Para pessoas com dislexia, o itálico pode dificultar a leitura. Considere outras formas de ênfase (como font-weight: bold; ou text-decoration: underline;) se a legibilidade for uma preocupação crítica.
• Herança: Lembre-se que font-style é uma propriedade herdada. Se um elemento pai tem font-style: italic;, seus filhos também terão, a menos que você explicitamente defina font-style: normal; para eles.

A propriedade font-style é uma ferramenta simples, mas eficaz, para adicionar nuances e ênfase ao seu conteúdo textual, contribuindo para um design mais expressivo e legível.