Propiedad CSS text-rendering

La propiedad CSS text-rendering le indica al motor de renderizado del navegador qué optimizar al dibujar texto: velocidad de dibujo bruta, la mejor legibilidad posible o precisión geométrica. En la práctica, es una sugerencia que permite activar o desactivar características tipográficas como el kerning (ajuste del espacio entre pares de letras específicos) y las ligaduras (combinación de caracteres como fi en un solo glifo).

Esta página explica qué hace cada valor, cuándo vale la pena usarlo, los problemas a tener en cuenta y ejemplos ejecutables que puedes comparar lado a lado.

¿Cuándo usarla?

En la mayoría de las páginas nunca necesitas text-rendering — auto ya hace un trabajo razonable. Se recurre a ella en dos situaciones:

Texto grande y prominente (encabezados, títulos hero, logotipos) donde un buen kerning y las ligaduras mejoran notablemente el aspecto. optimizeLegibility es el valor para esto.
Páginas largas con mucho texto en dispositivos de bajo rendimiento, donde quieres omitir el trabajo tipográfico adicional. Para eso existe optimizeSpeed.

La propiedad text-rendering tiene cuatro valores de palabra clave:

auto — el navegador decide (el valor predeterminado).
optimizeSpeed — prioriza la velocidad de dibujo; el kerning y las ligaduras se desactivan.
optimizeLegibility — prioriza la legibilidad; el kerning y las ligaduras se activan.
geometricPrecision — prioriza la geometría precisa para que el texto pueda escalarse suavemente.

Cuando text-rendering se establece en optimizeLegibility, el navegador prioriza la legibilidad activando el kerning y las ligaduras. La contrapartida es el rendimiento: en una página con una gran cantidad de texto, forzar la legibilidad puede ralentizar notablemente el renderizado, por lo que es preferible aplicarlo de forma selectiva en lugar de aplicarlo a body.

Si quieres un control detallado sobre características tipográficas individuales en lugar de una sugerencia amplia, usa las propiedades dedicadas font-kerning, font-variant-ligatures o font-feature-settings.

La propiedad text-rendering se originó en SVG pero ahora está incluida en las especificaciones CSS Text Module Level 3 y Level 4. Los navegadores basados en Gecko (Firefox) y WebKit/Blink (Safari, Chrome) permiten aplicarla a contenido HTML mediante CSS. Como no es una propiedad CSS estandarizada en todos los entornos, trátala como una mejora progresiva: la página debe seguir luciendo bien cuando el navegador la ignore.

Valor inicial	auto
Se aplica a	Elementos de texto.
Heredada	Sí.
Animatable	Sí.
Versión	Scalable Vector Graphics (SVG) 1.1
Sintaxis DOM	object.style.textRendering = "optimizeLegibility";

Sintaxis

Valores de CSS text-rendering

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | initial | inherit;

Ejemplo de la propiedad text-rendering:

Ejemplo de código CSS text-rendering

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
        margin: 60px 0;
      }
      table {
        table-layout: fixed;
        padding: .3em;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        margin-bottom: 1em;
      }
      td {
        padding: 15px;
        border: 1px solid #eee;
      }
      h3 {
        font-size: 5em;
        line-height: 1;
        font-family: sans-serif;
      }
      .uppercase {
        text-transform: uppercase;
      }
      .italic {
        font-style: italic;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .optimizeLegibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Text-rendering example</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

La diferencia entre "optimizeSpeed" y "optimizeLegibility"

El siguiente ejemplo muestra la diferencia entre los valores optimizeSpeed y optimizeLegibility. El efecto más claro se aprecia en pares de letras que se benefician del kerning y las ligaduras (como AV, Wa o fi). Ten en cuenta que el resultado puede variar según el navegador, y en texto que ya se renderiza bien puede que no notes ningún cambio visible:

Ejemplo de la propiedad text-rendering con los valores "optimizeSpeed" y "optimizeLegibility":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 1.5em;
        color: #777777;
      }
      .optimize-speed {
        text-rendering: optimizeSpeed;
      }
      .optimize-legibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <p class="optimize-speed">AVADA Waffle — fi fl ffi (optimizeSpeed)</p>
    <p class="optimize-legibility">AVADA Waffle — fi fl ffi (optimizeLegibility)</p>
  </body>
</html>

Pruébalo tú mismo »

Aspectos a tener en cuenta

Es una sugerencia, no una garantía. Los navegadores pueden interpretar o ignorar text-rendering, y auto ya activa la legibilidad para textos grandes en algunos motores. No te bases en ella para resultados críticos de maquetación.
Coste de rendimiento en textos largos. optimizeLegibility en un bloque grande de texto puede ralentizar el renderizado e incluso causar un destello visible en el primer pintado. Aplícalo a elementos específicos (encabezados, etiquetas cortas) en lugar de a body o *.
Se hereda. Establecerla en un elemento padre se aplica a todos los descendientes, que es exactamente por qué un body { text-rendering: optimizeLegibility; } general es arriesgado en páginas con mucho texto.
Prefiere las propiedades estándar cuando sea posible. Para solo kerning o solo ligaduras, font-kerning y font-variant-ligatures están mejor especificadas y son más predecibles.

Valores

Valor	Descripción
auto	El navegador hace suposiciones sobre cuándo optimizar para velocidad, legibilidad y precisión geométrica al dibujar texto. Este valor es interpretado de manera diferente por cada navegador.
optimizeSpeed	Especifica que el navegador debe enfatizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto. El kerning y las ligaduras están desactivados.
optimizeLegibility	Especifica que el navegador debe enfatizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica.
geometricPrecision	Especifica que el navegador debe enfatizar la precisión sobre la velocidad de renderizado y la legibilidad.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

Si estás ajustando la tipografía, estas propiedades te dan un control más directo que la sugerencia amplia de text-rendering: font-kerning, font-variant-ligatures, font-feature-settings, font-family y letter-spacing.

Práctica

El valor geometricPrecision de la propiedad text-rendering especifica

que el navegador debe enfatizar la legibilidad sobre la velocidad de renderizado y la precisión geométrica.que el navegador debe enfatizar la velocidad de renderizado sobre la legibilidad y la precisión geométrica al dibujar texto.que el navegador debe enfatizar la precisión sobre la velocidad de renderizado y la legibilidad.