Web Typography: State of the Art

Presented at WriteTheDocs Europe, 31st Mar 2014.
Presented at Djangocon EU, 14th May 2014

Transcript

1. typography
   and the
   web
   the state of the art
   #writethedocs eu 2014
   

   View Slide

2. Idan Gazit
   Hello there! I’m
   @idangazit
   Please,
   Sit back.
   Relax.
   Enjoy yourself!
   !
   All of the slides will be online.
   

   View Slide

3. core designer for
   visualizing data at
   a lovely web framework
   the popular platform-as-a-service
   

   View Slide

4. commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg
   

   View Slide

5. View Slide

6. Daniel Kahneman
   The general principle is that anything you can do to
   reduce cognitive strain will help you [be persuasive],
   so you should first maximize legibility.
   

   View Slide

7. typography
   SET A
   typefaces
   SET
   

   View Slide

8. Presenting Textual Information
   The
   Art
   &
   Science
   of
   

   View Slide

9. vs
   typeface
   kerning
   macro
   micro
   measure (aka “width”)
   leading (aka “spacing”)
   flow of type on page
   elupton.com/2009/10/science-of-typography/
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. http://retinart.net/graphic-design/secret-law-of-page-harmony/
    

    View Slide

15. View Slide

16. LIKE, NEW INFORMATION
    HAS COME TO LIGHT, MAN
    

    View Slide

17. control
    

    View Slide

18. none
    nil
    nada
    zero
    zip
    zilch
    nothing
    naught
    no
    no
    control
    

    View Slide

19. @idangazit
    HI THERE, I’M
    flic.kr/p/6iLEF
    

    View Slide

20. @idangazit
    HI THERE, I’M
    flic.kr/p/89Utsr
    

    View Slide

21. typography
    and the
    web
    the state of the art
    #writethedocs eu 2014
    

    View Slide

22. print
    web
    March of Progress
    IN WEB TYPOGRAPHY
    THE
    

    View Slide

23. Sometimes hard to use.
    Pays dividends.
    

    View Slide

24. Sizing Type
    

    View Slide

25. ?
    ABSOLUTE
    ?
    RELATIVE
    

    View Slide

26. 16px
    ABSOLUTE
    1em or 100%
    RELATIVE
    

    View Slide

27. View Slide

28. 16px
    ABSOLUTE
    1em or 100%
    RELATIVE
    =
    

    View Slide

29. The quick brown fox jumps over a lazy dog.
    The quick brown fox jumps over a lazy dog.
    TIMES
    GEORGIA
    M
    “1 EM”
    

    View Slide

30. ∅ defaults to 1em
    1.2em
    3em
    1.5em
    5.4em (1 × 1.2 × 3 × 1.5)
    or 86.4px (5.4em × 16px/1em)
    =
    

    View Slide

31. That wasn’t too bad
    RIGHT?
    

    View Slide

32. pop quiz!
    OK, DOCUMENTARIANS
    

    View Slide

33. 
    body { font-size: 1em; }
    
    
    
    
    
    header { font-size: 1.5em; }
    article { font-size: 1em; }
    ?
    ?
    h1 { font-size: 2em; }
    

    View Slide

34. 
    body { font-size: 1em; }
    
    
    
    
    
    header { font-size: 1.5em; }
    article { font-size: 1em; }
    ?
    ?
    h1 { font-size: 2em; }
    

    View Slide

35. 
    body { font-size: 1em; }
    
    
    
    header { font-size: 1.5em; }
    article { font-size: 1em; }
    1em × 1.5em × 2em = 3em
    ?
    h1 { font-size: 2em; }
    

    View Slide

36. 
    body { font-size: 1em; }
    
    
    
    header { font-size: 1.5em; }
    article { font-size: 1em; }
    1em × 1.5em × 2em = 3em
    1em × 1em × 2em = 2em
    h1 { font-size: 2em; }
    

    View Slide

37. 
    body { font-size: 1em; }
    
    
    
    
    
    header { font-size: 1.5em; }
    article { font-size: 1em; }
    1em × 1.5em × 2em = 3em
    1em × 1em × 2em = 2em
    h1 { font-size: 2em; }
    

    View Slide

38. Root Ems
    “REMS”
    (to the rescue!)
    

    View Slide

39. EMS
    1em
    1em
    
    2em
    2em
    
    1.5em
    1.5em
    
    1.5em
    1.5rem
    
    REMS
    

    View Slide

40. REMS
    9+
    github.com/chuckcarpenter/REM-unit-polyfill
    

    View Slide

41. Sometimes you want the cascade.
    Sometimes you don’t.
    

    View Slide

42. typography
    SET A
    typefaces
    SET
    

    View Slide

43. typography
    SET A
    typefaces
    SET
    

    View Slide

44. Foo & Bar
    .amp { font-family: SomeFancyFont, sans; }
    Bar
    Foo&
    

    View Slide

45. font-family: Helvetica, Arial, sans-serif;
    La la la A’BC םולש abc123 ⊗≄∭∑ὐ
    
    
    

    View Slide

46. DATABASE
    a
    of
    FONTS
    

    View Slide

47. @font-face {
    family-name
    src
    unicode-range
    font-variant
    font-feature-settings
    font-stretch
    font-weight
    font-style
    }
    !
    “FooBar”
    local(…), url(…)
    U+41-5A, U+C0-FF
    !
    !
    same as font-* rules
    !
    !
    

    View Slide

48. @font-face {
    font-family: Alef;
    src: url(AlefNormal.woff);
    font-weight: normal;
    unicode-range: U+590-5FF; /* Hebrew! */
    }
    !
    /* Use Alef font only for Hebrew */
    p { font-face: Alef, Times, serif;}
    Unicode
    ranges
    

    View Slide

49. @font-face {
    font-family: MathFont;
    src: url(MathFont.woff);
    font-weight: normal;
    unicode-range: U+1D6B0-1D71B; /* math */
    }
    !
    /* Consistent math symbols */
    p { font-face: MathFont, Times, serif;}
    Unicode
    ranges
    

    View Slide

50. COOL, HUH?
    

    View Slide

51. CAREFUL.
    

    View Slide

52. @font-face {
    font-family: FooBar;
    src: url(FooBarNormal.woff);
    font-weight: normal;
    }
    !
    p {
    font-face: FooBar;
    font-weight: bold
    }
    Faux-Bold
    alistapart.com/article/say-no-to-faux-bold
    Faux-Italic
    

    View Slide

53. FOUT
    the dreaded
    Flash
    Of
    Unstyled
    Text
    

    View Slide

54. View Slide

55. FOUT
    the dreaded
    Flash
    Of
    Unstyled
    Text
    

    View Slide

56. FOUT
    the dreaded
    Flash
    Of
    Unstyled
    Text
    FONT
    the somewhat-better
    Flash
    Of
    No
    Text
    

    View Slide

57. 
    

    View Slide

58. 2s FOUT 2s FONT
    

    View Slide

59. 3s FONT, 1s FOUT 4s FONT
    Soon (~v35ish) Now (v33)
    >3 seconds
    

    View Slide

60. Adobe Blank
    blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html
    font-family: “My Custom Font”, “Adobe Blank”, sans-serif;
    

    View Slide

61. IE9 Data-URI
    fettblog.eu/blog/2012/11/16/preventing-fout-on-ie9/
    @font-face {
    font-family: somefont;
    src: url(“data:application/x-font-woff;base64,AS8796ADS…”)
    }
    

    View Slide

62. Cache aggressively
    Don’t make users download the font more than once
    

    View Slide

63. CSS3 Font Loading
    http://dev.w3.org/csswg/css-font-loading/
    

    View Slide

64. flic.kr/p/auuCWk
    

    View Slide

65. Type Rendering
    

    View Slide

66. RASTERIZERS
    

    View Slide

67. OSX WINDOWS GDI WIN DIRECTWRITE
    CLEARTYPE
    GRAYSCALE
    

    View Slide

68. FONT OUTLINES
    POSTSCRIPT, TRUETYPE
    

    View Slide

69. POSTSCRIPT TRUETYPE
    IE 6-8
    IE 6-8
    on Windows XP
    IE 9+
    FIREFOX
    CHROME
    OPERA
    nope.
    nope.
    DirectWrite
    DirectWrite
    GDI Grayscale
    GDI Grayscale
    GDI Grayscale
    GDI ClearType
    DirectWrite
    DirectWrite
    GDI ClearType
    GDI ClearType
    HTTP://WWW.SMASHINGMAGAZINE.COM/2012/04/24/A-CLOSER-LOOK-AT-FONT-RENDERING/
    

    View Slide

70. TEST YOUR INTENDED TYPEFACES.
    TEST THEM EVERYWHERE TO BE SAFE.
    

    View Slide

71. ENOUGH OF THIS DOOM AND GLOOM.
    TELL ME ABOUT MORE AWESOME STUFF.
    

    View Slide

72. Ligatures
    Ligat
    

    View Slide

73. Ligatures
    Ligat
    

    View Slide

74. The Four Numerals
    

    View Slide

75. in 1956 I bought…
    in 1956 I bought…
    OLDSTYLE
    LINING
    FIGURES
    

    View Slide

76. PROPORTIONAL
    TABULAR
    $131.96
    $589.22
    $131.96
    $589.22
    FIGURES
    

    View Slide

77. .ligatures {
    font-feature-settings: “liga”;
    }
    !
    .lining-numerals {
    font-feature-settings: “lnum”;
    }
    !
    .tabular-numerals {
    font-feature-settings: “tnum”;
    }
    Feature
    tag-value
    

    View Slide

78. font-feature-settings
    10+
    docs.webplatform.org/wiki/css/properties/font-feature-settings
    

    View Slide

79. whew.
    NOW YOU KNOW KUNG FU
    

    View Slide

80. IS OUR FUTURE BETTER?
    

    View Slide

81. CANIUSE.COM
    CAN I USE … ?
    

    View Slide

82. GO MAKE STUFF.
    BETTER.
    

    View Slide

83. @IDANGAZIT
    Don’t be shy.
    Thank you!
    

    View Slide