Web Typography Workshop

Transcript

1. Steve Hickey
   GDI Boston
   Web Typography
   Workshop
   

   View Slide

2. Why does typography
   even matter?
   

   View Slide

3. Because I said so.
   

   View Slide

4. Actually…
   

   View Slide

5. When Everything Works…
   

   View Slide

6. …When Images/Fonts Fail…
   

   View Slide

7. …And When It All Fails
   

   View Slide

8. Type As Brand Expression
   (demo borrowed from Jason Pamental: goo.gl/JRHqGe)
   

   View Slide

9. Type As Brand Expression
   (demo borrowed from Jason Pamental: goo.gl/JRHqGe)
   

   View Slide

10. 1: Basics
    

    View Slide

11. Typeface vs. Font
    

    View Slide

12. Typeface vs. Font
    

    View Slide

13. Classification: Serif
    Aa Aa
    Baskerville
    (transitional)
    Caslon
    (humanist)
    Bodoni
    (modern)
    Aa
    

    View Slide

14. Classification: Sans-serif
    Aa Aa Aa
    Helvetica
    (transitional)
    Gill Sans
    (humanist)
    Futura
    (modern)
    

    View Slide

15. Classification: Slab-serif
    Aa
    Clarendon
    

    View Slide

16. Classification: Script
    Aa
    Monotype Corsiva
    

    View Slide

17. Classification: Display
    Aa
    Braggadocio
    

    View Slide

18. Basic Anatomy
    Descender height
    Bhpxff
    Baseline
    X height
    Cap height
    Stem
    Descender
    Ascender
    Counter
    Ligature
    

    View Slide

19. Normal Letter-spacing
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

20. Tight Letter-spacing
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

21. Loose Letter-spacing
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

22. Don't letter-space the
    lower case.
    

    View Slide

23. Ever.
    

    View Slide

24. Seriously.
    

    View Slide

25. Un-Kerned
    Tyson
    

    View Slide

26. Kerned
    yson
    T
    

    View Slide

27. Left Aligned
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

28. Right Aligned
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

29. Center Aligned
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

30. Justified
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

31. The Trinity: Size
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

32. Too Small
    I confess at these words a shudder passed through me. There was a thrill in the doctor’s voice which showed that he was himself deeply moved by that which he told us. Holmes leaned forward in his
    excitement and his eyes had the hard, dry glitter which shot from them when he was keenly interested.
    

    View Slide

33. The Trinity: Line Length
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

34. Too Wide
    I confess at these words a shudder passed through me. There was a thrill in the doctor’s voice which showed that he was
    himself deeply moved by that which he told us. Holmes leaned forward in his excitement and his eyes had the hard, dry
    glitter which shot from them when he was keenly interested. On the night of Sir Charles’s death Barrymore the butler,
    who made the discovery, sent Perkins the groom on horseback to me, and as I was sitting up late I was able to reach
    Baskerville Hall within an hour of the event. I checked and corroborated all the facts which were mentioned at the
    inquest. I followed the footsteps down the Yew Alley, I saw the spot at the moor-gate where he seemed to have waited, I
    remarked the change in the shape of the prints after that point, I noted that there were no other footsteps save those of
    Barrymore on the soft gravel, and finally I carefully examined the body, which had not been touched until my arrival. Sir
    Charles lay on his face, his arms out, his fingers dug into the ground, and his features convulsed with some strong
    emotion to such an extent that I could hardly have sworn to his identity. There was certainly no physical injury of any
    kind. But one false statement was made by Barrymore at the inquest. He said that there were no traces upon the ground
    round the body. He did not observe any. But I did—some little distance off, but fresh and clear.
    

    View Slide

35. Too Narrow
    I confess at these words a
    shudder passed through me.
    There was a thrill in the
    doctor’s voice which showed
    that he was himself deeply
    moved by that which he
    told us. Holmes leaned
    forward in his excitement
    and his eyes had the hard,
    dry glitter which shot from
    them when he was keenly
    interested.
    

    View Slide

36. The Trinity: Line-Height
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

37. Too Little
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

38. Too Much
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

39. Size, line-length and
    line-height create
    readable text.
    

    View Slide

40. Changing one affects
    the others.
    

    View Slide

41. 2: Hierarchy
    

    View Slide

42. Pairing Typefaces
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    Bodoni
    Futura
    Helvetica
    Garamond
    Baskerville
    Univers
    

    View Slide

43. Typeface
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading blends into the paragraph below it.
    

    View Slide

44. Typeface
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading stands out.
    

    View Slide

45. Scale
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading blends into the paragraph below it.
    

    View Slide

46. Scale
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading stands out.
    

    View Slide

47. Color
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading blends into the paragraph below it.
    

    View Slide

48. Color
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading stands out.
    

    View Slide

49. Style
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading blends into the paragraph below it.
    

    View Slide

50. Style
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading stands out.
    

    View Slide

51. Placement
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading blends into the paragraph below it.
    

    View Slide

52. Placement
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    This heading stands out.
    

    View Slide

53. Rule of Thumb:
    One or two points of
    differentiation.
    

    View Slide

54. Subtlety is the key.
    

    View Slide

55. 3: Choice
    

    View Slide

56. Number of Styles
    The quick brown fox jumped over the lazy dog.
    Sorts Mill Goudy
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    Adobe Caslon Pro
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog.
    

    View Slide

57. Character Sets
    abcdefghijklmnopqrstuvwxyz
    Latin
    абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    αβγδεζηθικλμνξοπρσςτυφχψω
    Cyrillic
    Greek
    

    View Slide

58. Numerals
    123456789
    Lowercase
    123456789
    Uppercase
    

    View Slide

59. Proper Punctuation
    -
    Hyphen
    “ ”
    Smart quotes
    ' ' ˝
    Dumb quotes Primes
    – —
    En dash Em dash
    

    View Slide

60. Ligatures
    They flew stuff
    They flew stuff
    No ligatures
    Ligatures
    

    View Slide

61. Legibility
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

62. Legibility
    I confess at these words a shudder
    passed through me. There was a thrill in
    the doctor’s voice which showed that he
    was himself deeply moved by that which
    he told us. Holmes leaned forward in his
    excitement and his eyes had the hard,
    dry glitter which shot from them when
    he was keenly interested.
    

    View Slide

63. Legibility
    I
    Lowercase l
    Uppercase i Numeral 1
    l 1
    

    View Slide

64. Readability
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

65. Readability
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

66. Appropriateness
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

67. Appropriateness
    I confess at these words a shudder passed through me.
    There was a thrill in the doctor’s voice which showed
    that he was himself deeply moved by that which he
    told us. Holmes leaned forward in his excitement and
    his eyes had the hard, dry glitter which shot from them
    when he was keenly interested.
    

    View Slide

68. My Google Web Fonts trick…
    

    View Slide

69. Exercise 1
    

    View Slide

70. Choose two different typefaces and create a simple
    typographic hierarchy with them. You must use three
    different heading levels and two paragraph sizes.
    I’d recommend giving Typecast a try for this exercise:
    http://typecast.com
    

    View Slide

71. 4: Implementation
    

    View Slide

72. Web Font Services
    Fonts
    

    View Slide

73. Adobe Typekit
    

    View Slide

74. Adobe Typekit: Kits
    

    View Slide

75. Adobe Typekit: Domains
    

    View Slide

76. Detour: Using the Terminal
    $ cd ~/Sites/gdi-type-workshop/
    $ php -S localhost:4000
    or
    $ cd ~/Sites/gdi-type-workshop/
    $ python -m SimpleHTTPServer 4000
    

    View Slide

77. Adobe Typekit: Install
    

    View Slide

78. Adobe Typekit: Using in CSS
    

    View Slide

79. Adobe Typekit: Kit Settings
    

    View Slide

80. Adobe Typekit: Subsetting
    

    View Slide

81. Adobe Typekit: OpenType
    

    View Slide

82. Adobe Typekit: Weights & Styles
    

    View Slide

83. Google Fonts
    

    View Slide

84. Google Fonts: Quick Use
    

    View Slide

85. Google Fonts: Weights & Styles
    

    View Slide

86. Google Fonts: Weights & Styles
    

    View Slide

87. Google Fonts: Weights & Styles
    

    View Slide

88. Google Fonts: Weights & Styles
    

    View Slide

89. Google Fonts: Use
    

    View Slide

90. Using @font-face
    

    View Slide

91. Fullest @font-face Possible
    @font-face {
    font-family: proxima-nova-regular;
    src: url("../fonts/proxima-nova-regular.eot");
    src: url("../fonts/proxima-nova-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/proxima-nova-regular.woff2") format("woff2"),
    url("../fonts/proxima-nova-regular.woff") format("woff"),
    url("../fonts/proxima-nova-regular.ttf") format("truetype"),
    url("../fonts/proxima-nova-regular.svg#proxima-nova-regular") format("svg");
    font-weight: 400;
    font-style: normal;
    }
    

    View Slide

92. Repeat For Every Font
    @font-face {
    font-family: proxima-nova-regular;
    src: url("../fonts/proxima-nova-regular.eot");
    src: url("../fonts/proxima-nova-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/proxima-nova-regular.woff2") format("woff2"),
    url("../fonts/proxima-nova-regular.woff") format("woff"),
    url("../fonts/proxima-nova-regular.ttf") format("truetype"),
    url("../fonts/proxima-nova-regular.svg#proxima-nova-regular") format("svg");
    font-weight: 400; font-style: normal; }
    @font-face {
    font-family: proxima-nova-regular-italic;
    src: url("../fonts/proxima-nova-regular-italic.eot");
    src: url("../fonts/proxima-nova-regular-italic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/proxima-nova-regular-italic.woff2") format("woff2"),
    url("../fonts/proxima-nova-regular-italic.woff") format("woff"),
    url("../fonts/proxima-nova-regular-italic.ttf") format("truetype"),
    url("../fonts/proxima-nova-regular-italic.svg#proxima-nova-regular-italic") format("svg");
    font-weight: 400; font-style: italic; }
    @font-face {
    font-family: proxima-nova-bold;
    src: url("../fonts/proxima-nova-bold.eot");
    src: url("../fonts/proxima-nova-bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/proxima-nova-bold.woff2") format("woff2"),
    url("../fonts/proxima-nova-bold.woff") format("woff"),
    url("../fonts/proxima-nova-bold.ttf") format("truetype"),
    url("../fonts/proxima-nova-bold.svg#proxima-nova-bold") format("svg");
    font-weight: 700; font-style: normal; }
    @font-face {
    font-family: proxima-nova-bold-italic;
    src: url("../fonts/proxima-nova-bold-italic.eot");
    src: url("../fonts/proxima-nova-bold-italic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/proxima-nova-bold-italic.woff2") format("woff2"),
    url("../fonts/proxima-nova-bold-italic.woff") format("woff"),
    url("../fonts/proxima-nova-bold-italic.ttf") format("truetype"),
    url("../fonts/proxima-nova-bold-italic.svg#proxima-nova-bold-italic") format("svg");
    font-weight: 700; font-style: italic; }
    

    View Slide

93. I KNOW, RIGHT?
    

    View Slide

94. Fullest @font-face Support
    

    View Slide

95. Now Let's Slim It Down
    @font-face {
    font-family: proxima-nova-regular;
    src: url("../fonts/proxima-nova-regular.woff2") format("woff2"),
    url("../fonts/proxima-nova-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    }
    

    View Slide

96. WOFF Support
    

    View Slide

97. WOFF2 Support
    

    View Slide

98. WOFF/WOFF 2 is much
    more manageable.
    

    View Slide

99. Older browsers just get
    your fallbacks.
    

    View Slide

100. Calling a Font Family
     body {
     font-family: Alegreya;
     }
     h1 {
     font-family: "Alegreya Sans";
     }
     

     View Slide

101. Falling Back to Defaults
     body {
     font-family: Alegreya, Georgia, serif;
     }
     h1 {
     font-family: "Alegreya Sans", Arial, sans-serif;
     }
     

     View Slide

102. Solving Faux Bold and Italic
     body {
     font-family: alegreya, Georgia, serif;
     font-weight: normal;
     font-weight: 400;
     font-style: normal; }
     h1 {
     font-family: alegreya-sans-bold, sans-serif;
     font-weight: bold;
     font-weight: 700;
     font-style: normal; }
     

     View Slide

103. Setting Text Size
     body {
     font-size: 100%; } /* usually = 16px */
     h1 {
     font-size: 3em; } /* 3×16px = 48px */
     h2 {
     font-size: 1.5em; } /* 1.5×16px = 24px */
     p {
     font-size: 1em; } /* 1×16px = 16px */
     

     View Slide

104. Ems Are Tricksy
     body {
     font-size: 100%; } /* usually = 16px */
     p {
     font-size: 1.5em; } /* 1.5×16px = 24px */
     .caption {
     font-size: 1em; } /* 1×24px = 24px */
     

     View Slide

105. Rems Are Nicer…
     body {
     font-size: 100%; } /* usually = 16px */
     p {
     font-size: 1.5rem; } /* 1.5×16px = 24px */
     .caption {
     font-size: 1rem; } /* 1×16px = 16px */
     

     View Slide

106. Rem Support
     

     View Slide

107. …But, You Need a Fallback
     body {
     font-size: 100%; } /* usually = 16px */
     p {
     font-size: 24px;
     font-size: 1.5rem; } /* 1.5×16px = 24px */
     .caption {
     font-size: 16px;
     font-size: 1rem; } /* 1×16px = 16px */
     

     View Slide

108. Setting Line-Height
     body {
     font-size: 100%;
     line-height: 1.6; } /* 1.6×16px ≈ 26px */
     h1 {
     font-size: 3em;
     line-height: inherit; } /* 1.6×48px ≈ 77px */
     p {
     font-size: 1em;
     line-height: inherit; } /* 1.6×16px ≈ 26px */
     

     View Slide

109. http://modularscale.com
     

     View Slide

110. Baseline Grids
     I confess at these words a shudder passed through me. There
     was a thrill in the doctor’s voice which showed that he was
     himself deeply moved by that which he told us.
     Heading Level 1
     Heading Level 2
     I confess at these words a shudder passed through me. There
     was a thrill in the doctor’s voice which showed that he was
     himself deeply moved by that which he told us.
     HEADING LEVEL 3
     I confess at these words a shudder passed through me. There
     was a thrill in the doctor’s voice which showed that he was
     himself deeply moved by that which he told us.
     

     View Slide

111. Setting a baseline grid
     is very frustrating.
     

     View Slide

112. Target Adjacent Siblings
     p { font-size: 1em; /* 16px */
     line-height: 1.5; /* 24px */
     margin-bottom: 1.5em; } /* 24px */
     h1 { font-size: 2em; /* 32px */
     line-height: 1.5; } /* 48px */
     h2 { font-size: 1.5em; /* 24px */
     line-height: 1; } /* 24px */
     h1 + h2 { margin-bottom: -.625em; }
     

     View Slide

113. GridOverlay Plugin
     http://freshtilledsoil.github.io/gridOverlay/
     

     View Slide

114. You've been warned.
     

     View Slide

115. –
     En dash
     –
     ’
     Right single quote
     ’
     “ ”
     Left double quote
     “
     Right double quote
     ”
     — ´
     Em dash
     —
     Single prime
     ′
     HTML Entities
     http://www.freeformatter.com/html-entities.html
     &
     Ampersand
     &
     ‘
     Left single quote
     ‘
     …
     Ellipsis
     …
     ˝
     Double prime
     ″
     

     View Slide

116. Responsive Type: Wide Viewport
     I confess at these words a shudder passed through me. There was a
     thrill in the doctor’s voice which showed that he was himself deeply
     moved by that which he told us.
     Heading Level 1
     Heading Level 2
     I confess at these words a shudder passed through me. There was a
     thrill in the doctor’s voice which showed that he was himself deeply
     moved by that which he told us.
     HEADING LEVEL 3
     I confess at these words a shudder passed through me. There was a
     thrill in the doctor’s voice which showed that he was himself deeply
     moved by that which he told us.
     

     View Slide

117. Responsive Type: Narrow Viewport
     I confess at these words a shudder passed
     through me. There was a thrill in the doctor’s
     voice which showed that he was himself deeply
     moved by that which he told us.
     Heading Level 1
     Heading Level 2
     HEADING LEVEL 3
     I confess at these words a shudder passed
     through me. There was a thrill in the doctor’s
     voice which showed that he was himself deeply
     moved by that which he told us.
     I confess at these words a shudder passed
     through me. There was a thrill in the doctor’s
     voice which showed that he was himself deeply
     moved by that which he told us.
     I confess at these words a
     shudder passed through me.
     There was a thrill in the
     doctor’s voice which showed
     that he was himself deeply
     moved by that which he told us.
     Heading
     Level 1
     Heading Level
     2
     I confess at these words a
     

     View Slide

118. OpenType:
     /* no OpenType features (default) */
     font-feature-settings: normal;
     /* enable small caps */
     font-feature-settings: “smcp”;
     /* enable small caps (explicitly on) */
     font-feature-settings: “smcp” on;
     /* use 2nd available swash character */
     font-feature-settings: “swsh” 2;
     /* disable ligatures */
     font-feature-settings: “liga” 0;
     /* use 1st swash and enable ligatures */
     font-feature-settings: “swsh” 1, “liga” on;
     

     View Slide

119. Support for OpenType Features
     

     View Slide

120. 5: Resources
     

     View Slide

121. Thinking With Type
     http://thinkingwithtype.com
     

     View Slide

122. The Elements of Typographic Style
     http://webtypography.net
     

     View Slide

123. Butterick's Practical Typography
     http://practicaltypography.com
     

     View Slide

124. iA Writer Blog
     http://ia.net/blog
     

     View Slide

125. Exercise 2
     

     View Slide

126. We’re going to create another hierarchy, but this time
     you’ll be working with HTML/CSS in the browser. You
     must use at least two typefaces, demonstrate six levels
     of headings, two paragraph sizes, an image caption,
     and ordered/unordered lists.
     You must also demonstrate an alternative typographic
     scale for smaller viewports.
     

     View Slide