This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

text-rendering

Summary

The text-rendering CSS property provides information to the browser about how to optimize when rendering text. Options are: legibility, speed or geometric precision.

Overview table

Initial value
auto
Applies to
text elements
Inherited
Yes
Media
visual
Computed value
auto
Animatable
Yes
CSS Object Model Property
text-rendering
Percentages
N/A

Syntax

  • text-rendering: auto
  • text-rendering: geometricPrecision
  • text-rendering: optimizeLegibility
  • text-rendering: optimizeSpeed

Values

auto
Indicates that the browser should choose the most appropriate method between speed, legibility and geometric precision, but favors legibility over speed and geometric precision.
optimizeSpeed
Indicates that the browser should favor rendering speed over legibility and geometric precision. Browsers usually disable kerning and ligatures and sometimes turn off anti-aliasing.
optimizeLegibility
Indicates that the browser should favor legibility over rendering speed and geometric precision. Browsers usually apply anti-aliasing or font hinting to display the most legible text.
geometricPrecision
Indicates that the browser should favor geometric precision over rendering speed and legibility. Usually, this option causes the browser to not use hinting. Instead glyph outlines are drawn with comparable geometric precision to the rendering of path data.

This setting can be helpful when using kerning, which does often not scale linearly and can make text using such fonts look good.

Examples

/* The user agent will decide how to optimize text for speed, legibility and geometric precision. */
body {
    text-rendering: auto;
}

/* The user agent will prioritize the rendering speed of text. */
body {
    text-rendering: optimizeSpeed;
}

/* The user agent will prioritize the legibility of text. */
body {
    text-rendering: optimizeLegibility;
}

/* The user agent will prioritize the geometric precision of text. */
body {
    text-rendering: optimizePrecision;
}

Usage

 Gecko note:

In Gecko browsers there is a way to set the threshold value for the auto keyword by changing the preference in browser.display.auto_quality_min_font_size. By default it is set to 20px. On Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) the optimizeSpeed option has no effect because there is no faster way of rendering text than the standard code already does. See bug bug 595688 for more details on that.

Notes

The property is a SVG property not specified in any CSS standard yet. However, user agents including Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux via CSS.

Related specifications

CSS Text Module Level 3
W3C Last Call Working Draft

See also

Related articles

CSS Font

CSS Attributes

Text