text-rendering
Quick Summary for text-rendering
The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.
Code Usage for text-rendering
/* Keyword values */ text-rendering: auto; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision;  /* Global values */ text-rendering: inherit; text-rendering: initial; text-rendering: revert; text-rendering: unset; 
More Details for text-rendering

text-rendering

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

The browser makes trade-offs among speed, legibility, and geometric precision.

/* Keyword values */ text-rendering: auto; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision;  /* Global values */ text-rendering: inherit; text-rendering: initial; text-rendering: revert; text-rendering: unset; 

Note: The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

One very visible effect is optimizeLegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri, Candara, Constantia, and Corbel, or the DejaVu font family).

Syntax

Values

auto

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

optimizeSpeed

The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

optimizeLegibility

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

geometricPrecision

The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

Note: WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility.

Formal definition

Initial valueauto
Applies totext elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Examples

Automatic application of optimizeLegibility

This demonstrates how optimizeLegibility is used by browsers automatically when the font-size is smaller than 20px.

HTML
<p class="small">LYoWAT - ff fi fl ffl</p> <p class="big">LYoWAT - ff fi fl ffl</p> 
CSS
.small { font: 19.9px "Constantia", "Times New Roman", "Georgia", "Palatino", serif; } .big   { font: 20px "Constantia", "Times New Roman", "Georgia", "Palatino", serif; } 
Result

optimizeSpeed vs optimizeLegibility

This example shows the difference between the appearance of optimizeSpeed and optimizeLegibility (in your browser; other browsers may vary).

HTML
<p class="speed">LYoWAT - ff fi fl ffl</p> <p class="legibility">LYoWAT - ff fi fl ffl</p> 
CSS
p { font: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", serif }  .speed       { text-rendering: optimizeSpeed; } .legibility  { text-rendering: optimizeLegibility; } 
Result

Specifications

Specification
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # TextRenderingProperty

See also

Drawing text in a <canvas> CSS Text Decoration CSS module Related CSS properties text-decoration (and its longhand properties, such as text-decoration-line, text-decoration-style, and text-decoration-thickness) text-emphasis (and its longhand properties, including text-emphasis-color, text-emphasis-position, and text-emphasis-style) text-shadow text-transform The SVG text-rendering attribute SVG and CSS

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

<angle-percentage>

The <angle-percentage> CSS data type represents a value that can be either a <angle> or a <percentage>.
<angle-percentage> css reference