$30 off During Our Annual Pro Sale. View Details »

Type Rendering

Bram Stein
November 14, 2014

Type Rendering

Deep dive into type rendering in web browsers.

Bram Stein

November 14, 2014
Tweet

More Decks by Bram Stein

Other Decks in Design

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