X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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

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

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.

Browser support

4.0+ x 1.0+ 5.0+ 15.0+

Practice Your Knowledge

The geometricPrecision value of text-rendering property specifies



Do you find this helpful?

Related articles