Frog House Lighting Talk Cover

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

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

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

Resources