Note for Lightning Talk at Frog House 1
Font rendering difference
- Display (Pixel density)
- OS / Browser rendering engine
- CSS
Rendering engines
Bug used to cause font rendering difference between OSX Safari and Chrome (Chrome just got darker)
CSS
- Lots of properties related to fonts (Fundamental text and font styling)
- Pick up font-smooth
font-smooth (MDN: font-smooth)
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
- antialiased - smooth the font on the level of the pixel, as opposed to the subpixel.
- subpixel-antialiased - on most non-retina displays this will give the sharpest text.
- grayscale - Render text with grayscale antialiasing, as opposed to the subpixel.
For antialiased and grayscale…
Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
See the Pen LT: font-smoothing by Kei (@kay8) on CodePen.
Subpixel rendering
- Understanding Sub-Pixel (LCD Screen) Anti-Aliased Font Rendering
- Please Stop Disabling Subpixel Rendering
The fonts on our LCD displays are rendered using pixels, each made up of 3 colors: red, green and blue. Instead of using the whole pixel to show a piece of a letter, subpixel rendering actually uses these 3 individual colors separately to increase the effective resolution of the screen
