La Web Universal

1.4 Inclinación de la fuente

Las formas de letra redondas y verticales siguen siendo la elección correcta para el texto continuo; las cursivas pertenecen a tramos breves de énfasis, y las cursivas verdaderas superan siempre a las oblicuas sintéticas.

7 min read

Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.

La recomendación original de 2005 era tajante: componga el texto continuo en letras redondas verticales, porque las formas de letra inclinadas son más difíciles de resolver para los lectores con baja visión. Dos décadas de mejoras en el renderizado en pantalla, pantallas de mayor resolución y mejor investigación han refinado ese consejo sin revocarlo. El tipo vertical sigue siendo el predeterminado correcto para el texto de cuerpo. Lo que ha cambiado es nuestra comprensión de por qué, y qué hacer cuando el tipo inclinado es genuinamente útil.

La inclinación no es una sola cosa. Una cursiva verdadera es un diseño distinto — a menudo con construcciones de letra diferentes (la a y la g de un solo piso, trazos de entrada y salida caligráficos, proporciones más estrechas). Una oblicua es el diseño vertical inclinado mecánica u ópticamente. Y una inclinación sintetizada es lo que el software fabrica cuando no hay archivo de cursiva disponible: el navegador cizalla lateralmente los glifos redondos. Estos tres casos tienen perfiles de legibilidad muy distintos, y el texto de 2005 los trataba como uno solo.

Qué cambió desde 2005

La versión 1 recomendaba evitar la cursiva por completo y sustituirla por negrita para el énfasis. Era un consejo razonable para pantallas de 96 DPI que renderizaban mapas de bits con hinting, donde los trazos inclinados se escalonaban por el aliasing y las formas de las letras se desmoronaban de verdad. En las pantallas modernas de alta densidad con suavizado de subpíxel y de escala de grises, una cursiva bien dibujada se renderiza con limpieza, y la prohibición general ya no está justificada para tramos breves.

El consenso actual, reflejado en las orientaciones de organizaciones que atienden a lectores con baja visión, es proporcionado: evite las cursivas para el texto continuo — párrafos, pies de foto largos, citas extensas — pero acéptelas en sus papeles semánticos tradicionales: énfasis en una palabra o frase, títulos de obras, términos extranjeros. El problema nunca fueron unas pocas palabras inclinadas; eran páginas enteras de ellas.

El otro gran cambio son las fuentes variables. Las variaciones OpenType, soportadas en todos los navegadores principales desde aproximadamente 2018, introdujeron dos ejes registrados relevantes aquí: slnt (inclinación), un ángulo continuo típicamente expresado en grados negativos, e ital (cursiva), normalmente un interruptor binario entre las construcciones redonda y de cursiva verdadera. El CSS los expone a través de la propiedad font-stylefont-style: italic debería seleccionar el eje ital o un archivo de cursiva, mientras que font-style: oblique 8deg puede solicitar un ángulo de inclinación concreto en las fuentes que lo soportan. Esto da a los diseñadores un control preciso e intencional que simplemente no existía en 2005.

Cursivas verdaderas, oblicuas e inclinaciones sintéticas

La jerarquía de legibilidad es consistente. Las cursivas verdaderas están dibujadas como cursivas: los trazos están equilibrados para el ángulo, las contraformas permanecen abiertas, el espaciado está ajustado. Las oblicuas diseñadas por el diseñador de tipos (comunes en las sans serif grotescas) son un peldaño por debajo pero siguen estando corregidas deliberadamente — las curvas se redibujan para que no se distorsionen bajo la cizalladura. Las inclinaciones sintetizadas son el peor caso: la cizalladura ingenua adelgaza un lado de cada curva, cierra las contraformas y perturba el espaciado. Nada del resultado fue visto jamás por un diseñador.

La regla práctica: nunca confíe en la falsa cursiva. Si la tipografía que distribuye no tiene cursiva, o bien cargue una o bien no use el estilo cursivo en absoluto. En CSS, font-synthesis: none (o font-synthesis-style: none) desactiva la inclinación fabricada por el navegador, de modo que una cursiva ausente se degrada a redonda en lugar de a una cizalladura distorsionada. Audite su carga de fuentes — un número sorprendente de sitios en producción solicita estilos cursivos que nunca llegan a cargar, y cada uno de esos tramos se renderiza como inclinación sintética.

La palabra fine en una cursiva verdadera con formas de letra redibujadas junto a una redonda cizallada sintéticamente — font-synthesis: none evita la falsificación.

Consideraciones de baja visión

La observación central de 2005 sigue vigente para los lectores con agudeza reducida, pérdida del campo central o visión borrosa por cataratas: las formas de letra inclinadas presentan siluetas menos familiares, un espaciado aparente más apretado y — en las cursivas de sabor caligráfico — construcciones de letra que difieren de la redonda con la que el lector se ha entrenado. Las WCAG no prohíben las cursivas, pero las orientaciones asociadas a las necesidades de los usuarios con baja visión aconsejan consistentemente limitarlas, y los lectores que magnifican el texto señalan que la cursiva se degrada más rápido bajo el desenfoque que su equivalente vertical.

La negrita sigue siendo una alternativa de énfasis sólida y suele ser la mejor elección cuando el contenido enfatizado es funcionalmente importante — advertencias, términos clave, frases accionables — porque el cambio de peso sobrevive al desenfoque y al bajo contraste mejor que el cambio de inclinación. Pero la negrita y la cursiva no son intercambiables semánticamente. La cursiva susurra; la negrita grita. Una página que usa negrita para todo énfasis se lee como si gritara de principio a fin. Un patrón sensato: negrita para la información que el lector no debe perderse, cursiva para el énfasis tipográfico convencional, y ninguna de las dos durante más de una frase seguida.

Dos precauciones más. Primera, evite la cursiva a tamaños pequeños — por debajo de aproximadamente 14 píxeles, el ángulo más las contraformas reducidas se agravan rápidamente. Segunda, evite emparejar la cursiva con otras reducciones de legibilidad: cursiva más mayúsculas sostenidas, cursiva más pesos ligeros, cursiva más bajo contraste. Cada degradación es sobrevivible por separado; apiladas, no lo son.

Ejes variables en la práctica

Cuando una fuente variable ofrece un eje slnt, resista la tentación de usar ángulos intermedios de forma decorativa en el texto. Una inclinación suave de 4 grados en un titular es un recurso estilístico legítimo; el texto de cuerpo a ángulos de inclinación arbitrarios no lo es. Si anima la inclinación (algunas interfaces lo hacen, para estados hover o transiciones de énfasis), respete prefers-reduced-motion — las formas de letra que se metamorfosean son movimiento, y los lectores con sensibilidad vestibular las experimentan como tal.

Compruebe, además, que el comportamiento de cursiva de su fuente variable coincide con su CSS. Algunas familias se distribuyen como variables de solo slnt donde font-style: italic no produce nada o produce la instancia equivocada; unas font-variation-settings explícitas o una declaración font-face correcta con rangos font-style: oblique 0deg 10deg resuelven la ambigüedad.

En CSS

em, cite { font-style: italic; }   /* short spans only */

/* Never let the browser fake an italic the family lacks */
body { font-synthesis-style: none; }

/* Variable slant, when the family offers the axis */
.aside { font-variation-settings: "slnt" -6; }

Recomendaciones

  • Componga todo el texto continuo en vertical; el hallazgo de 2005 se mantiene.
  • Permita cursivas verdaderas para tramos breves de énfasis, títulos y términos extranjeros — una frase, no un párrafo.
  • Prefiera la negrita a la cursiva cuando el contenido enfatizado sea funcionalmente crítico.
  • Nunca distribuya inclinaciones sintéticas: cargue un archivo de cursiva real o establezca font-synthesis-style: none.
  • Prefiera tipografías cuya cursiva sea un diseño corregido, no una cizalladura en bruto.
  • Evite la cursiva por debajo de unos 14px, y nunca apile cursiva con mayúsculas sostenidas, pesos ligeros o bajo contraste.
  • Con fuentes variables, use el eje ital o una instancia de cursiva apropiada para la semántica; trate el eje slnt como un recurso de exhibición, y respete prefers-reduced-motion si lo anima.

Lecturas complementarias