Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Typ

Steve Hickey
September 10, 2016
110

Web Typ

Steve Hickey

September 10, 2016
Tweet

Transcript

  1. Steve Hickey
    GDI Boston
    Web Typography
    Workshop

    View full-size slide

  2. Why does typography
    even matter?

    View full-size slide

  3. When Everything Works…

    View full-size slide

  4. …When Images/Fonts Fail…

    View full-size slide

  5. …And When It All Fails

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Typeface vs. Font

    View full-size slide

  9. Typeface vs. Font

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Classification: Slab-serif
    Aa
    Clarendon

    View full-size slide

  13. Classification: Script
    Aa
    Monotype Corsiva

    View full-size slide

  14. Classification: Display
    Aa
    Braggadocio

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. Un-Kerned
    Tyson

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

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

    View full-size slide

  34. Changing one affects
    the others.

    View full-size slide

  35. 2: Hierarchy

    View full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. 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 full-size slide

  43. 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 full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

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

    View full-size slide

  48. Subtlety is the key.

    View full-size slide

  49. 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 full-size slide

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

    View full-size slide

  51. Numerals
    123456789
    Lowercase
    123456789
    Uppercase

    View full-size slide

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

    View full-size slide

  53. Ligatures
    They flew stuff
    They flew stuff
    No ligatures
    Ligatures

    View full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

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

    View full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

  61. My Google Web Fonts trick…

    View full-size slide

  62. 4: Implementation

    View full-size slide

  63. Web Font Services
    Fonts

    View full-size slide

  64. Adobe Typekit

    View full-size slide

  65. Adobe Typekit: Kits

    View full-size slide

  66. Adobe Typekit: Domains

    View full-size slide

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

    View full-size slide

  68. Adobe Typekit: Install

    View full-size slide

  69. Adobe Typekit: Using in CSS

    View full-size slide

  70. Adobe Typekit: Kit Settings

    View full-size slide

  71. Adobe Typekit: Subsetting

    View full-size slide

  72. Adobe Typekit: OpenType

    View full-size slide

  73. Adobe Typekit: Weights & Styles

    View full-size slide

  74. Google Fonts

    View full-size slide

  75. Google Fonts: Quick Use

    View full-size slide

  76. Google Fonts: Weights & Styles

    View full-size slide

  77. Google Fonts: Weights & Styles

    View full-size slide

  78. Google Fonts: Weights & Styles

    View full-size slide

  79. Google Fonts: Weights & Styles

    View full-size slide

  80. Google Fonts: Use

    View full-size slide

  81. Using @font-face

    View full-size slide

  82. 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 full-size slide

  83. 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 full-size slide

  84. I KNOW, RIGHT?

    View full-size slide

  85. Fullest @font-face Support

    View full-size slide

  86. 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 full-size slide

  87. WOFF Support

    View full-size slide

  88. WOFF2 Support

    View full-size slide

  89. WOFF/WOFF 2 is much
    more manageable.

    View full-size slide

  90. Older browsers just get
    your fallbacks.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. 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 full-size slide

  94. 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 full-size slide

  95. 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 full-size slide

  96. 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 full-size slide

  97. …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 full-size slide

  98. 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 full-size slide

  99. Modular Scales
    goo.gl/Ot3XHa

    View full-size slide

  100. 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 full-size slide

  101. Setting a baseline grid
    is very frustrating.

    View full-size slide

  102. 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 full-size slide

  103. Baseline Grid Reference
    body {
    background-image:
    linear-gradient(transparent 97%, red 100%);
    background-size: 100% 28px; /* line-height */
    }

    View full-size slide

  104. You've been warned.

    View full-size slide


  105. En dash


    Right single quote

    “ ”
    Left double quote

    Right double quote

    — ´
    Em dash

    Single prime

    HTML Entities
    goo.gl/tshnCZ
    &
    Ampersand
    &

    Left single quote


    Ellipsis

    ˝
    Double prime

    View full-size slide

  106. 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 full-size slide

  107. 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 full-size slide

  108. 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 full-size slide

  109. Support for OpenType Features

    View full-size slide

  110. Stupidly Hard New Stuff: CSS Locks
    goo.gl/6KYS4t

    View full-size slide

  111. 5: Resources

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  116. Typekit Practice
    http://practice.typekit.com

    View full-size slide

  117. 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 full-size slide

  118. You can fork this pen on CodePen: goo.gl/mD19w5
    Or you can download these files to work with directly
    on your laptop: goo.gl/W60X0A

    View full-size slide