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.
