font-style

font-style es la propiedad CSS que controla la inclinación estilística del texto: si se renderiza recto (normal), con la variante itálica de la fuente (italic) o con una inclinación artificial aplicada por el navegador (oblique). Es una de las cuatro propiedades font-* que describen la apariencia tipográfica del texto junto con font-family, font-size y font-weight.

font-style hereda por defecto. Su valor inicial es normal. Si declarás font-style: italic en un contenedor, todos los hijos heredan la itálica hasta que alguno la cancele explícitamente con font-style: normal.

La distinción entre italic y oblique es sutil pero importante en tipografía de calidad. Una fuente bien diseñada incluye una variante itálica separada — no es simplemente la versión normal inclinada, sino una versión rediseñada con formas más caligráficas, proporciones distintas y a veces letras completamente diferentes (la ‘a’ en itálica suele tener un trazo distinto al de la ‘a’ normal). Cuando usás italic y la fuente tiene esa variante, el navegador la usa. Si la fuente no tiene variante itálica, el navegador sintetiza la inclinación —que es lo mismo que hace oblique siempre.

Cómo funciona

Cuando el navegador aplica font-style: italic, primero busca si la fuente tiene una variante itálica declarada (mediante @font-face con font-style: italic, o en una fuente del sistema con la variante incluida). Si la encuentra, la usa. Si no, sintetiza la itálica inclinando artificialmente los glifos de la variante normal.

font-style: oblique siempre aplica una inclinación artificial, ignorando cualquier variante itálica que la fuente pueda tener. Opcionalmente acepta un ángulo en grados.

em      { font-style: italic;  }  /* itálica real si existe, sintética si no */
.cita   { font-style: italic;  }
.normal { font-style: normal;  }  /* cancela herencia */

Sintaxis

selector {
  font-style: normal | italic | oblique [<ángulo>deg];
}

Valores

normal (valor inicial)

Renderiza el texto con la variante normal de la fuente, sin inclinación. Es el valor por defecto de todos los elementos.

p { font-style: normal; }

Se usa explícitamente para cancelar una herencia. Por ejemplo, si un contenedor tiene font-style: italic y necesitás que un elemento hijo vuelva al estilo recto:

blockquote { font-style: italic; }
blockquote cite { font-style: normal; } /* la cita dentro de la cita, recta */

Cuándo usar: para restablecer el estilo recto cuando hay herencia de itálica, o en elementos que el navegador aplica itálica por defecto (como <em>, <cite>, <dfn>, <address>) y querés cancelarla visualmente.

italic

Usa la variante itálica de la fuente si existe. Si no existe, el navegador sintetiza la itálica inclinando la variante normal —idéntico a oblique.

em    { font-style: italic; }
.cita { font-style: italic; }

La itálica real (cuando la fuente la tiene) es tipográficamente superior a la sintética: tiene proporciones balanceadas, ligaduras específicas y un aspecto más elegante. La itálica sintética es simplemente los glifos normales inclinados un ángulo fijo.

Cuándo usar: para énfasis tipográfico, citas, términos técnicos en su primera aparición, títulos de obras. Es el valor itálico estándar en la gran mayoría de los casos.

oblique

Aplica siempre una inclinación artificial sobre la variante normal de la fuente. Acepta un ángulo opcional:

.oblique-default { font-style: oblique;      }  /* ≈ 14° en la mayoría */
.oblique-leve    { font-style: oblique 8deg; }
.oblique-fuerte  { font-style: oblique 20deg;}

El rango de ángulo va de -90deg a 90deg (valores positivos inclinan hacia la derecha, negativos hacia la izquierda). El valor por defecto cuando no se especifica ángulo es 14deg.

Cuándo usar: en fuentes que no tienen variante itálica propia (algunas fuentes técnicas, monospace) pero donde querés una inclinación controlada. En uso general, preferí italic.

Cuándo usar qué

Notas, gotchas e interacción

• <em> aplica italic por defecto, pero no son lo mismo. <em> es semántico: indica énfasis de contenido y afecta a lectores de pantalla (cambian la entonación). font-style: italic es puramente visual. Podés usar CSS para que <em> se vea diferente a itálica, pero no pierdas la semántica: no reemplaces <em> por font-style solo para hacer texto itálico decorativo.
• <cite>, <dfn>, <address> y <i> también son itálica por defecto. El navegador aplica font-style: italic a todos estos elementos. Si necesitás que alguno sea recto, usá font-style: normal en tu CSS.
• La itálica sintética puede verse mal en fuentes decorativas. Si usás una fuente display o una fuente variable sin eje de itálica, la síntesis del navegador puede resultar en formas distorsionadas. En ese caso, preferí oblique con un ángulo pequeño o evitá la inclinación.
• font-style e font-weight son independientes. Podés combinarlos: font-style: italic; font-weight: 700 da negrita itálica. Si la fuente tiene una variante específica para ese combo (Bold Italic), el navegador la usa.
• No deshabilités la itálica de <em> sin reemplazarla por otro indicador visual. Si quitás font-style: italic de <em>, el énfasis deja de ser visible. Reemplazalo por otro estilo (color, subrayado, peso) para mantener la accesibilidad.

Vigente / legacy

font-style está vigente desde CSS1. El valor oblique con ángulo explícito se agregó en CSS Fonts Level 4, con soporte en todos los navegadores modernos.

No hay forma legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección La fuente: family, size, weight, style.