Pro Yearly is on sale from $80 to $50! »

Web Typ

54d5fa57f499bd09aa3b713bc7fdbe37?s=47 Steve Hickey
September 10, 2016
94

Web Typ

54d5fa57f499bd09aa3b713bc7fdbe37?s=128

Steve Hickey

September 10, 2016
Tweet

Transcript

  1. Steve Hickey GDI Boston Web Typography Workshop

  2. Why does typography even matter?

  3. When Everything Works…

  4. …When Images/Fonts Fail…

  5. …And When It All Fails

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

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

  8. 1: Basics

  9. Typeface vs. Font

  10. Typeface vs. Font

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

    Aa
  12. Classification: Sans-serif Aa Aa Aa Helvetica (transitional) Gill Sans (humanist)

    Futura (modern)
  13. Classification: Slab-serif Aa Clarendon

  14. Classification: Script Aa Monotype Corsiva

  15. Classification: Display Aa Braggadocio

  16. Basic Anatomy Descender height Bhpxff Baseline X height Cap height

    Stem Descender Ascender Counter Ligature
  17. 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.
  18. 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.
  19. 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.
  20. Don't letter-space the lower case.

  21. Ever.

  22. Seriously.

  23. Un-Kerned Tyson

  24. Kerned yson T

  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. Size, line-length and line-height create readable text.

  38. Changing one affects the others.

  39. 2: Hierarchy

  40. 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
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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.
  50. 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.
  51. Rule of Thumb: One or two points of differentiation.

  52. Subtlety is the key.

  53. 3: Choice

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

  56. Numerals 123456789 Lowercase 123456789 Uppercase

  57. Proper Punctuation - Hyphen “ ” Smart quotes ' '

    ˝ Dumb quotes Primes – — En dash Em dash
  58. Ligatures They flew stuff They flew stuff No ligatures Ligatures

  59. 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.
  60. 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.
  61. Legibility I Lowercase l Uppercase i Numeral 1 l 1

  62. 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.
  63. 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.
  64. 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.
  65. 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.
  66. My Google Web Fonts trick…

  67. 4: Implementation

  68. Web Font Services Fonts

  69. Adobe Typekit

  70. Adobe Typekit: Kits

  71. Adobe Typekit: Domains

  72. Detour: Using the Terminal $ cd ~/Sites/gdi-type-workshop/ $ php -S

    localhost:4000 or $ cd ~/Sites/gdi-type-workshop/ $ python -m SimpleHTTPServer 4000
  73. Adobe Typekit: Install

  74. Adobe Typekit: Using in CSS

  75. Adobe Typekit: Kit Settings

  76. Adobe Typekit: Subsetting

  77. Adobe Typekit: OpenType

  78. Adobe Typekit: Weights & Styles

  79. Google Fonts

  80. Google Fonts: Quick Use

  81. Google Fonts: Weights & Styles

  82. Google Fonts: Weights & Styles

  83. Google Fonts: Weights & Styles

  84. Google Fonts: Weights & Styles

  85. Google Fonts: Use

  86. Using @font-face

  87. 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; }
  88. 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; }
  89. I KNOW, RIGHT?

  90. Fullest @font-face Support

  91. 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; }
  92. WOFF Support

  93. WOFF2 Support

  94. WOFF/WOFF 2 is much more manageable.

  95. Older browsers just get your fallbacks.

  96. Calling a Font Family body { font-family: Alegreya; } h1

    { font-family: "Alegreya Sans"; }
  97. Falling Back to Defaults body { font-family: Alegreya, Georgia, serif;

    } h1 { font-family: "Alegreya Sans", Arial, sans-serif; }
  98. 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; }
  99. 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 */
  100. 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 */
  101. 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 */
  102. Rem Support

  103. …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 */
  104. 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 */
  105. Modular Scales goo.gl/Ot3XHa

  106. 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.
  107. Setting a baseline grid is very frustrating.

  108. 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; }
  109. Baseline Grid Reference body { background-image: linear-gradient(transparent 97%, red 100%);

    background-size: 100% 28px; /* line-height */ }
  110. You've been warned.

  111. – 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 ″
  112. 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.
  113. 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
  114. 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;
  115. Support for OpenType Features

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

  117. 5: Resources

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

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

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

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

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

  123. Exercise

  124. 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.
  125. 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