CSS text-rendering Property

The text-rendering property gives information to the rendering engine about what to optimize for when rendering text.

The text-rendering property has four values:

auto
optimizeSpeed
optimizeLegibility
geometricPrecision

When the text-rendering property is set to "optimizeLegibility" successive capital letters become more spaced, and ligatures are enabled.

The text-rendering is actually not a CSS property and is not defined in any CSS specification.

It's an SVG property, but Gecko-based and WebKit-based browsers allow to apply it to HTML content via CSS.

The text-rendering property works only in Windows and Linux.

Initial Value	auto
Applies to	Text elements.
Inherited	Yes.
Animatable	Yes.
Version	Scalable Vector Graphics (SVG) 1.1
DOM Syntax	object.style.textRendering = "optimizeLegibility";

Syntax

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

Example of the text-rendering property:

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

Try it Yourself »

The Difference Between the "optimizeSpeed" and "optimizeLegibility"

The example below will show the difference between the "optimizeSpeed" and "optimizeLegibility" values. Take into account, that the result may be different depending on the browser you use:

Example of the text-rendering property with the "optimizeSpeed" and "optimizeLegibility" values:

<!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">optimizeSpeed vs optimizeLegability</p>
    <p class="optimize-legibility">optimizeSpeed vs optimizeLegability</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	The browser makes guesses about when to optimize for speed, legibility, and geometric precision while drawing text. This value is interpreted differently by the browsers.
optimizeSpeed	Specifies that the browser should emphasize rendering speed over legibility and geometric precision when drawing text. Kerning and ligatures are disabled.
optimizeLegibility	Specifies that the browser should emphasize legibility over rendering speed and geometric precision.
geometricPrecision	Specifies that the browser should emphasize precision over rendering speed and legibility.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.