Cursiva en CSS: cómo poner letra cursiva en HTML (2026)

Para poner un texto en cursiva en CSS usas la propiedad font-style con el valor italic. Es una línea:

.destacado {
  font-style: italic;
}

Ya está. Si solo buscabas eso, puedes cerrar la página. Pero hay tres cosas que casi nadie explica y que te van a ahorrar un rato de pelea: la diferencia real entre italic y oblique, cuándo conviene usar una etiqueta HTML en lugar de CSS, y por qué a veces la cursiva se ve deformada aunque el código sea correcto.

Cursiva en CSS con font-style

Toda la cursiva en CSS pasa por font-style, y esa propiedad acepta cuatro formas. Estas son todas, con lo que hace cada una:

Valor	Qué hace	Cuándo usarlo
normal	Texto recto. Es el valor por defecto.	Para cancelar una cursiva heredada
italic	Busca la versión cursiva real de la fuente	Casi siempre. Es tu opción por defecto
oblique	Inclina los caracteres de la versión recta	Fuentes sin cursiva propia (sans serif técnicas)
oblique 14deg	Inclina con el ángulo que tú decidas	Control fino, sobre todo en fuentes variables

La diferencia clave: italic pide a la tipografía su dibujo cursiva, que es un diseño distinto con formas propias. oblique se limita a inclinar las letras rectas. Si la fuente tiene cursiva de verdad, italic siempre da mejor resultado.

Para quitar la cursiva de un elemento que la hereda, tienes font-style: normal. Es lo habitual cuando quieres que una cita destacada no salga inclinada:

blockquote em {
  font-style: normal;
}

Cursiva en HTML: em, i y cite

Puedes conseguir una letra cursiva en HTML sin tocar el CSS, porque hay tres etiquetas que ya salen inclinadas por defecto. Las tres se ven igual, pero significan cosas distintas y los lectores de pantalla las tratan distinto:

Etiqueta	Significado	Ejemplo de uso
<em>	Énfasis. Cambia el sentido de la frase	No dije eso
<i>	Voz o término distinto, sin énfasis	Palabras extranjeras, nombres científicos
<cite>	Título de una obra	Libros, películas, artículos

<p>No dije <em>eso</em>, dije otra cosa.</p>
<p>El término <i lang="fr">déjà vu</i> viene del francés.</p>
<p>Lo cuenta en <cite>El diseño de las cosas cotidianas</cite>.</p>

La regla práctica: si la cursiva aporta significado, usa la etiqueta HTML. Si es una decisión puramente visual (un subtítulo, un pie de foto, un dato secundario), usa CSS. Poner <em> para inclinar un pie de foto le dice al lector de pantalla que ahí hay un énfasis que no existe.

Olvida <italic>: esa etiqueta no existe. Y evita el style="font-style: italic" en línea salvo en correos HTML, donde no te queda otra.

italic vs oblique: la diferencia que importa

Una cursiva real no es la versión recta torcida. El diseñador de la tipografía redibuja las letras: la a de doble piso pasa a un solo piso, la f gana una cola descendente, las uniones se curvan. Es otro alfabeto.

Las serif clásicas (Georgia, Playfair Display, Libre Baskerville, EB Garamond) tienen cursiva real y la diferencia se ve a simple vista. Muchas sans serif geométricas no la tienen: su «cursiva» es una oblicua, la recta inclinada unos grados.

Desde CSS Fonts nivel 4 puedes fijar el ángulo tú:

.sutil {
  font-style: oblique 8deg;   /* inclinación suave */
}

.marcada {
  font-style: oblique 14deg;  /* el valor por defecto ronda los 14deg */
}

Esto tiene sentido sobre todo con fuentes variables que traen un eje slnt: ahí el ángulo lo interpola la propia fuente y el resultado es limpio. Con una fuente estática, el navegador se limita a deformar el dibujo.

La falsa cursiva y cómo evitarla

Aquí está el problema que trae a la gente a buscar por qué su cursiva se ve mal. Si pides font-style: italic y el navegador no encuentra el archivo cursiva de esa fuente, no se rinde: la falsifica. Inclina la recta por su cuenta y el resultado suele ser tosco, con trazos desiguales y espaciado roto.

Se llama falsa cursiva o faux italic. Tienes dos maneras de atajarlo.

1. Cargar la cursiva de verdad

Es la buena. En Google Fonts tienes que pedir explícitamente el eje ital; si no lo pides, solo te descarga la recta. Fíjate en el ital,wght@0,400;1,400:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap" rel="stylesheet">

El 0,400 es la redonda y el 1,400 es la cursiva. Con eso cargado, font-style: italic ya usa el dibujo real.

2. Prohibir al navegador que la invente

Si prefieres que el texto salga recto antes que deformado, desactiva la síntesis:

.sin-falsa-cursiva {
  font-synthesis-style: none;
}

Es parte de CSS Fonts nivel 4 y funciona en los navegadores actuales. Como es una mejora progresiva, en un navegador viejo simplemente se ignora y vuelves al comportamiento de antes: no rompes nada por añadirla.

Usar una fuente cursiva de Google Fonts

Caso distinto: no quieres inclinar tu tipografía, quieres una fuente caligráfica para un titular. Aquí no toca font-style para nada.

1. Elige la fuente en Google Fonts. Para este ejemplo, Dancing Script.
2. Copia el enlace y pégalo dentro de la etiqueta <head> de tu HTML.
3. Aplícala con font-family a los elementos que quieras.
4. Ajusta el tamaño en móvil con una consulta de medios.

<!-- En el <head> -->
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">

.titular-script {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 48px;
}

@media (max-width: 768px) {
  .titular-script {
    font-size: 32px;
  }
}

Ojo con esto: no le añadas font-style: italic a una fuente script. Dancing Script ya viene inclinada de fábrica y no tiene versión cursiva, así que el navegador la falsificaría inclinándola otra vez. Resultado: letras dobladas dos veces y trazos rotos. Este es el error más común del tutorial que verás por ahí.

Si andas buscando qué script usar, tengo una selección con preview real de 8 fuentes cursivas gratis: puedes ver el trazo de cada una antes de decidirte.

Cuándo usar cursiva en diseño web

La cursiva funciona por contraste: destaca porque rompe el ritmo del texto recto que la rodea. En cuanto la usas mucho, deja de destacar y solo cansa.

Dónde rinde bien:

• Testimonios y citas. Separa la voz del cliente de tu propia voz sin necesidad de comillas ni recuadros.
• Términos extranjeros y nombres científicos. Es la convención tipográfica de siempre, y ahí toca <i>.
• Pies de foto y notas al margen. Marcan jerarquía secundaria sin cambiar de tipografía.
• Una palabra dentro de un titular. Guía la mirada al concepto que te interesa.
• Títulos de obras. Con <cite>.

Dónde no: párrafos completos, menús de navegación, botones, etiquetas de formulario y mensajes de error. En todos esos sitios la inclinación resta legibilidad justo donde más falta hace.

Sobre accesibilidad, dos cosas concretas. La cursiva prolongada es más difícil de leer para personas con dislexia, así que limítala a fragmentos cortos. Y no la uses como único recurso para transmitir información: si algo importa, que se note también por el peso, el color o la posición, no solo por la inclinación.

Errores frecuentes

• Pedir italic sin cargar la cursiva. El navegador la falsifica. Carga el eje ital.
• Aplicar italic a una fuente script. Ya está inclinada; la doblas dos veces.
• Usar <em> por motivos visuales. Ensucia la semántica y confunde a los lectores de pantalla. Para eso está CSS.
• Cursiva en cuerpo de texto largo. Legibilidad al suelo y rebote arriba.
• Cargar pesos que no usas. Cada variante cursiva es un archivo más. Pide solo los que vayas a usar de verdad.

Preguntas frecuentes

¿Cómo se pone letra cursiva en HTML?

Con <em> si la cursiva marca énfasis, o con <i> si señala un término distinto, como una palabra extranjera. Las dos se ven en cursiva por defecto. Si la razón es solo estética, no uses etiquetas: aplica font-style: italic desde CSS.

¿Cuál es la diferencia entre em e i?

<em> indica énfasis y cambia el sentido de la frase; un lector de pantalla puede marcarlo con la entonación. <i> indica que ese fragmento es de otra naturaleza (idioma extranjero, término técnico, pensamiento) sin darle énfasis. Visualmente son idénticas.

¿Por qué mi cursiva se ve deformada o fea?

Porque el navegador la está sintetizando: pides italic, no encuentra el archivo cursiva de esa fuente e inclina la recta a mano. Carga la cursiva real con el eje ital en la URL de Google Fonts, o desactiva la síntesis con font-synthesis-style: none.

¿Cómo quito la cursiva de un elemento?

Con font-style: normal. Es lo que necesitas cuando un blockquote, un address o un <em> viene inclinado desde la hoja de estilos del navegador o del tema y tú lo quieres recto.

¿Qué otros estilos de letra puedo aplicar en HTML y CSS?

Los cuatro básicos son font-style para la cursiva, font-weight para la negrita, text-decoration para subrayado y tachado, y text-transform para mayúsculas. En HTML tienes sus equivalentes semánticos: <strong>, <u>, <s> y <mark>.

¿Uso oblique alguna vez?

Poco. Tiene sentido si la fuente no tiene cursiva propia y prefieres controlar el ángulo tú, o si trabajas con una variable con eje slnt. En el resto de casos, italic con la cursiva cargada da mejor resultado.

¿La cursiva afecta al SEO?

Por sí misma, no. Ni <em> ni <i> te van a mover posiciones. Lo que sí afecta es la legibilidad: si pones párrafos enteros en cursiva, la gente se va antes, y eso sí se acaba notando.

Conclusión

Resumido: para la cursiva en CSS te basta font-style: italic cuando la decisión es visual, usa <em> o <i> cuando la inclinación significa algo, y carga siempre el eje ital para que el navegador no tenga que inventarse nada. Con eso cubres casi todos los casos.

Sigue por aquí

• 8 fuentes cursivas gratis con preview real, si buscas una script para tus titulares.
• Escala tipográfica en diseño web, para ordenar los tamaños.
• Qué pareja de tipografías quedan bien en una web.
• Serif o sans serif: cuál elegir.
• Toda la sección de diseño web.