text-rendering in css, what is it? and how to use it?

Question

I was reading an article on text-rendering in css.

According to that blog:

The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen. It 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.

Also it is useful now for optimization purposes for decreasing page load time, as mentioned there. But some terms confused me while reading that article and I thought Experts here will elaborate those terms for better understanding. So here are those terms:

• What is meant by rendering? how it is done (with regard to CSS)?

• What is Legibility?

• Can anyone please differ in between optimizeLegibility and optimizeSpeed? How and where each of them or both should be used?

Also except IE every browser supports this property, So Simply 81.0% of world will have no problem using it. Thats why I am asking this question in order to clear the understanding of these concepts.

Answer 1

What is meant by rendering? how it is done (with regard to CSS)?

I'd say "rendering" roughly equals taking instructions about what should be and materializing it into something tangible (in this case, pixels on a display).

"Rendering" encompasses much more than text when talking about a web browser. There are many components and stages involved in rendering.

Text rendering impacts layout (width, height, line wrapping, etc) and impacts painting ("draw these pixels and/or this string").

What renders the text?

Here's an interesting quote from the IE team that explains how the process is done in IE9+:

In addition to superior text positioning, Internet Explorer 9 also features hardware-accelerated text. The job of rendering both text and graphics has been pushed off of the central processing unit (CPU) and onto the graphics processing unit (GPU). This is accomplished using both DirectWrite and Direct2D—part of the DirectX families of APIs—which enable Internet Explorer 9 to use the underlying hardware through Windows.

Source

This is a common theme among most (all?) browsers: they hand off the final stage(s) of their text rendering to an underlying layer that is closer to the device itself.

For example, Webkit uses a GraphicContext abstraction to talk to the OS. (Excellent talk on rendering in WebKit). Each OS may have a different implementation. And each port of WebKit may be different.

That doesn't mean that the rendering engine can't give detailed hints/instructions to the layer(s) below it. It does mean that results will vary across hardware, OS, browser and fonts.

Legibility

What is Legibility?

"The quality of being clear enough to read" (Source) or "Legibility is the degree to which glyphs (individual characters) in text are understandable or recognizable based on appearance." (Source)

This agrees with the description of optimizeLegibility:

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

In other words, the browser (via the rendering engine) may take additional steps to display text in a manner that may be easier to read and/or more visually pleasing.

It may use additional ligature information contained in the font, and it may adjust the spacing between letters (kerning).

Differences

Can anyone please differ in between optimizeLegibility and optimizeSpeed?

Quality (legibility) versus quantity (speed, that is, number of characters rendered in a given period of time).

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.

Source

How and where each of them or both should be used?

Only one of them (if any) should be used. Personally, I would only specify text-rendering after seeing that it had a positive impact and behaved well on all devices (which is a daunting task).

Also except IE every browser supports this property, So Simply 81.0% of world will have no problem using it.

I think that statement may be overly optimistic. Also, don't discount Internet Explorer, which often renders text extremely well due to its tight hardware integration.