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
   

   View Slide

2. TTF, OTF, SVG
   (WOFF, EOT)
   

   View Slide

3. TTF, OTF, SVG
   (WOFF, EOT)
   

   View Slide

4. TTF, OTF, SVG
   (WOFF, EOT)
   

   View Slide

5. OpenType
   

   View Slide

6. Outlines
   BASELINE
   X-HEIGHT
   CAP HEIGHT
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. Hinting
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Antialiasing
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. Subpixel
    Antialiasing
    

    View Slide

22. Brian Wotherspoon - flickr.com/photos/brian_digital/
    

    View Slide

23. View Slide

24. View Slide

25. Black and White Grayscale Subpixel
    

    View Slide

26. Browsers
    

    View Slide

27. Browsers
    Platform
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. Responsive
    Typography
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. html {
    font-family: “Proxima Nova”, Verdana, sans-serif;
    font-weight: 300;
    }
    

    View Slide

39. 
    
    

    View Slide

40. html.tr-aa-none {
    font-family: Verdana;
    }
    !
    html.tr-gdi {
    font-weight: 400;
    }
    

    View Slide

41. typerendering.com
    

    View Slide

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
    

    View Slide