Type Rendering

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
November 14, 2014

Type Rendering

Deep dive into type rendering in web browsers.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

November 14, 2014
Tweet

Transcript

  1. 1.

    Type Rendering Outlines Hinting ANTIALIASING sub-pixel antialiasing Rasterizers CoreText web

    fonts GDI DirectWrite Sampling BLACK & WHITE grayscale color filtering LCD pixels TrueType SVG WOFF Bezier opentype ClearType Design Responsive Smoothing Typography twitter.com/@bram_stein
  2. 7.
  3. 8.
  4. 9.
  5. 10.
  6. 11.
  7. 12.
  8. 13.
  9. 14.
  10. 16.
  11. 17.
  12. 18.
  13. 19.
  14. 20.
  15. 23.
  16. 24.
  17. 26.
  18. 28.

    OSX iOS Chrome Sub-pixel / Grayscale Grayscale Firefox Sub-pixel /

    Grayscale n/a Opera <= 12 Sub-pixel / Grayscale n/a Safari Sub-pixel / Grayscale Grayscale
  19. 29.

    Linux Android Firefox OS ChromeOS Chrome * Grayscale n/a Grayscale

    Firefox * Grayscale Grayscale n/a Opera <= 12 * Grayscale n/a n/a Safari n/a n/a n/a n/a Android n/a Grayscale n/a n/a
  20. 30.

    Windows XP TTF Windows XP CFF Windows XP TTF ClearType

    Windows XP CFF ClearType IE6 Grayscale - Subpixel - IE7 Grayscale - Subpixel - IE8 Grayscale ?? Subpixel ?? Chrome Grayscale Grayscale Subpixel / Grayscale Grayscale Firefox Subpixel Grayscale Subpixel Grayscale Opera <= 12 Grayscale Grayscale Subpixel Grayscale
  21. 31.

    Windows Vista Windows 7 Windows 8 Windows Phone IE7 Subpixel

    (GDI) n/a n/a n/a IE8 Subpixel (GDI) Subpixel (GDI) n/a ?? IE9 Subpixel (DW) Subpixel (DW) n/a Grayscale (DW) IE10 n/a Subpixel (DW) Grayscale (DW) Grayscale (DW) Chrome Subpixel / Grayscale (GDI) Subpixel / Grayscale (GDI) Subpixel / Grayscale (GDI) n/a Firefox Subpixel (DW) Subpixel (DW) Subpixel (DW) n/a Opera <= 12 Subpixel (GDI) Subpixel (GDI) Subpixel (GDI) n/a
  22. 33.
  23. 34.
  24. 35.
  25. 36.
  26. 37.
  27. 42.

    Outlines Hinting ANTIALIASING sub-pixel antialiasing Rasterizers CoreText web fonts GDI

    DirectWrite Sampling BLACK WHITE grayscale color filtering LCD pixels TrueType SVG WOFF Bezier opentype ClearType Design Responsive Smoothing Typography Resolution DPI Mobile Typekit Request fin Thank you twitter.com/@bram_stein