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

Web Typography Workshop

Steve Hickey
February 12, 2015

Web Typography Workshop

Steve Hickey

February 12, 2015
Tweet

More Decks by Steve Hickey

Other Decks in Design

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