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, the browser prioritizes legibility by enabling kerning and ligatures.

The text-rendering property originated in SVG but is now included in the CSS Text Module Level 3 and Level 4 specifications. Gecko-based and WebKit-based browsers allow applying it to HTML content via CSS.

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

CSS text-rendering values

css

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

Example of the text-rendering property:

CSS text-rendering code example

html

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

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

html

<!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 optimizeLegibility</p>
    <p class="optimize-legibility">optimizeSpeed vs optimizeLegibility</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.

Practice

The geometricPrecision value of text-rendering property specifies

that the browser should emphasize legibility over rendering speed and geometric precision.that the browser should emphasize rendering speed over legibility and geometric precision when drawing text.that the browser should emphasize precision over rendering speed and legibility.

CSS text-rendering Property ​

Syntax ​

Example of the text-rendering property: ​

The Difference Between the "optimizeSpeed" and "optimizeLegibility" ​

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

Values ​