Popular posts

As for the first part, your question was already asked (more or less) and answered, please use the really good Hashnode search :)

For the second part: Font smoothing is no standard, yet. MDN explains it pretty well:

Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from this specification and is currently not on the standard track.

How Firefox works (property -moz-osx-font-smoothing: grayscale;):

Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

What it means is the following: Lets simplify font. From now on we just look at black lines on white background. Such a line has to be drawn on a pixel-based monitor:

Putting a line into pixels results in these strange looking box arrangements which might not even resemble a line from a distance. That's why intelligent people started looking into how to use pixels surrounding the black boxes in the image above can be used in order to create the look of pixels in between real pixels. Monitors usually use pixels which are made of the colors [RGB]. But the human eye does not differentiate between [RGB] and [GBR] or [BRG] coloring. So what they did is they turned off certain colors of two pixels which are next to each other so they look like [0GB][R00]. As you can see, this results in a [GBR] pixel right in between those two pixels. If they are fully on, they will create the color white. That's what they call "subpixel rendering" and it allows for sharper edges, since yuo now can have pixels in between other pixels. Many font-rendering techniques base on subpixel rendering, for example Microsoft's ClearType. The image below shows how subpixel rendering can make a very crisp line, compared to "normal" rendering (see 1 vs 4 in the below image).

"Grayscale rendering" on the other hand takes a look at all pixels which are crossed by the line and calculates, how centered the line is on these pixels. The more centered, the stronger the color of the pixel. This usually results in a blurry line and is what the average guy means when they say "antialiasing" (see 2 in the picture below). Mozilla claims it looks better for light text on dark backgrounds for Retina displays, which is a quite uncommon combination in today's internet, but all in all a neat thing to know. I think, firefox normally renders using subpixel anialiasing, but you can explicitely switch it to grayscale antialiasing. The article, which is referenced on MDN, confirms that.