Type Rendering

Deep dive into type rendering in web browsers.

Transcript

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. TTF, OTF, SVG (WOFF, EOT)
3. TTF, OTF, SVG (WOFF, EOT)
4. TTF, OTF, SVG (WOFF, EOT)
5. OpenType
6. Outlines BASELINE X-HEIGHT CAP HEIGHT
10. Hinting
15. Antialiasing
21. Subpixel Antialiasing
22. Brian Wotherspoon - flickr.com/photos/brian_digital/
25. Black and White Grayscale Subpixel
26. Browsers
27. Browsers Platform
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
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
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
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
32. Responsive Typography
38. html { font-family: “Proxima Nova”, Verdana, sans-serif; font-weight: 300; }
39. <html class=”tr-gdi tr-aa-none”> <html class=”tr-gdi tr-aa-subpixel”>
40. html.tr-aa-none { font-family: Verdana; } ! html.tr-gdi { font-weight: 400; }
41. typerendering.com
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