Propriedade CSS text-rendering

A propriedade CSS text-rendering informa ao motor de renderização do navegador o que otimizar ao desenhar texto: velocidade bruta de desenho, a melhor legibilidade possível ou precisão geométrica. Na prática, é uma dica que permite ativar ou desativar recursos de fonte como kerning (ajuste do espaço entre pares específicos de letras) e ligaduras (combinação de caracteres como fi em um único glifo).

Esta página aborda o que cada valor faz, quando vale a pena configurá-lo, os cuidados a tomar e exemplos executáveis que você pode comparar lado a lado.

Quando devo usá-lo?

Na maioria das páginas você nunca precisa de text-rendering — auto já faz um trabalho sensato. Você o utiliza em duas situações:

Texto grande e proeminente (títulos, títulos de herói, logotipos) onde um bom kerning e ligaduras melhoram visivelmente a aparência. optimizeLegibility é o valor para isso.
Páginas longas e sensíveis ao desempenho com muito texto em dispositivos de baixo poder, onde você quer pular o trabalho tipográfico extra. É para isso que serve o optimizeSpeed.

A propriedade text-rendering possui quatro valores de palavra-chave:

auto — o navegador decide (o padrão).
optimizeSpeed — prioriza a velocidade de desenho; kerning e ligaduras são desativados.
optimizeLegibility — prioriza a legibilidade; kerning e ligaduras são ativados.
geometricPrecision — prioriza a geometria precisa para que o texto possa ser dimensionado suavemente.

Quando text-rendering é definido como optimizeLegibility, o navegador prioriza a legibilidade ativando kerning e ligaduras. A contrapartida é o desempenho: em uma página com grande quantidade de texto, forçar a legibilidade pode retardar visivelmente a renderização, portanto, aplique-o seletivamente em vez de ao body.

Se você quiser controle refinado sobre recursos tipográficos individuais em vez de uma dica ampla, use as propriedades dedicadas font-kerning, font-variant-ligatures ou font-feature-settings.

A propriedade text-rendering se originou no SVG, mas agora está incluída nas especificações CSS Text Module Level 3 e Level 4. Navegadores baseados em Gecko (Firefox) e WebKit/Blink (Safari, Chrome) permitem aplicá-la ao conteúdo HTML via CSS. Por não ser uma propriedade CSS padronizada em todos os lugares, trate-a como um aprimoramento progressivo: a página deve ainda ficar adequada quando o navegador a ignorar.

Valor Inicial	auto
Aplica-se a	Elementos de texto.
Herdado	Sim.
Animável	Sim.
Versão	Scalable Vector Graphics (SVG) 1.1
Sintaxe DOM	object.style.textRendering = "optimizeLegibility";

Sintaxe

Valores CSS de text-rendering

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

Exemplo da propriedade text-rendering:

Exemplo 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>

Experimente Você Mesmo »

A diferença entre "optimizeSpeed" e "optimizeLegibility"

O exemplo abaixo mostra a diferença entre os valores optimizeSpeed e optimizeLegibility. O efeito mais claro é nos pares de letras que se beneficiam de kerning e ligaduras (como AV, Wa ou fi). Tenha em mente que o resultado pode variar entre navegadores e, em texto que já é bem renderizado, você pode não ver nenhuma mudança visível:

Exemplo da propriedade text-rendering com os valores "optimizeSpeed" e "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>

Experimente Você Mesmo »

Pontos de atenção

É uma dica, não uma garantia. Os navegadores podem interpretar ou ignorar text-rendering, e auto já ativa a legibilidade para textos grandes em alguns motores. Não dependa dele para resultados críticos de layout.
Custo de desempenho em textos longos. optimizeLegibility em um grande bloco de texto pode retardar a renderização e até causar um flash visível na primeira pintura. Aplique-o a elementos específicos (títulos, rótulos curtos) em vez de ao body ou *.
É herdado. Definir em um elemento pai aplica-se a todos os descendentes, que é exatamente por que um body { text-rendering: optimizeLegibility; } abrangente é arriscado em páginas com muito texto.
Prefira as propriedades padrão quando possível. Para apenas kerning ou apenas ligaduras, font-kerning e font-variant-ligatures são mais bem especificadas e mais previsíveis.

Valores

Valor	Descrição
auto	O navegador faz suposições sobre quando otimizar para velocidade, legibilidade e precisão geométrica ao desenhar texto. Este valor é interpretado de forma diferente pelos navegadores.
optimizeSpeed	Especifica que o navegador deve enfatizar a velocidade de renderização em detrimento da legibilidade e da precisão geométrica ao desenhar texto. Kerning e ligaduras são desativados.
optimizeLegibility	Especifica que o navegador deve enfatizar a legibilidade em detrimento da velocidade de renderização e da precisão geométrica.
geometricPrecision	Especifica que o navegador deve enfatizar a precisão em detrimento da velocidade de renderização e da legibilidade.
initial	Faz com que a propriedade use seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

Se você estiver ajustando a tipografia com precisão, estas propriedades oferecem controle mais direto do que a dica ampla text-rendering: font-kerning, font-variant-ligatures, font-feature-settings, font-family e letter-spacing.

Prática

O valor geometricPrecision da propriedade text-rendering especifica

que o navegador deve enfatizar a legibilidade em detrimento da velocidade de renderização e da precisão geométrica.que o navegador deve enfatizar a velocidade de renderização em detrimento da legibilidade e da precisão geométrica ao desenhar texto.que o navegador deve enfatizar a precisão em detrimento da velocidade de renderização e da legibilidade.