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

Typesetting the Web

8ee8797254d515adcf0b4e3aba71ae7f?s=47 Kyle Fox
November 16, 2012

Typesetting the Web

This is a talk I gave at WordCamp Edmonton in November 2012. For other type, design & web nerdery, follow me on Twitter: http://twitter.com/kylefox

"Typography is the vessel that carries an ideas to your audience. In addition to being beautiful, proper typography affords your message credibility, clarity, and emotional resonance. This talk explains why typography is crucial to the success of a website and demonstrates best practices for styling text on the web. You’ll learn basic typeface anatomy & terminology, typesetting techniques (such as font sizing, line length & line height), and how to choose appropriate fonts for the web."

Primary typefaces in the slides are:

* Alegreya (http://www.google.com/webfonts/specimen/Alegreya)
* Pluto Sans (http://www.myfonts.com/fonts/hvdfonts/pluto-sans/).

Also making appearances are Chaparral Pro, Changa One, Klavika Condensed, Exo, Omnes, and Skolar. I know, I violated some of my own guidelines by used a big range of faces but OH WELL.

8ee8797254d515adcf0b4e3aba71ae7f?s=128

Kyle Fox

November 16, 2012
Tweet

Transcript

  1. typesetting the web KYLE FOX // kylefox.ca // @kylefox WORDCAMP

    EDMONTON // 2012
  2. What this talk is about ‣ Why care about type?

    ‣ Choosing typefaces ‣ Setting text to look snazzy
  3. What this talk is not about ‣ Jessica Hische and/or

    lettering ‣ Typeface classification ‣ Webfonts or @font-face
  4. This is your last chance to leave the room without

    gravely hurting my feelings.
  5. Kyle Fox Designer guy @ Granify Co-organizer of Crafting Type

    Lifelong type geek
  6. Why care about type?

  7. “the differences between good and poor typography appear to have

    little effect on common performance measures such as reading speed and comprehension.”
  8. “the differences between good and poor typography appear to have

    little effect on common performance measures such as reading speed and comprehension.” Source: The Aesthetics of Reading Dr. Kevin Larson & Dr. Rosalind W. Picard
  9. “high quality typography appears to induce a positive mood.” “Creative

    cognitive tasks have shown performance improvements when participants were induced into a positive mood.”
  10. - STUDIES SHOW - Good typography makes people frown less.

  11. - STUDIES SHOW - Good typography makes people happier &

    smarter.
  12. “One cannot not communicate.” Paul Watzlawick

  13. Good typography H invitation to read

  14. Good typography H evoke feeling

  15. Good typography H body language

  16. Good typography H soundtrack

  17. None
  18. None
  19. CH O OSIN G typefaces

  20. - QUALITY INGREDIENTS- Good typography requires good typefaces. A bad

    font cannot be made to look good! Sorry :(
  21. 3 considerations ‣ Voice (Style) ‣ Legibility (Distinguishable) ‣ Technical

    Quality (Not from dafont)
  22. Like people, typefaces have voices. Fonts are people too. Huh?

  23. Voices convey feeling. That feeling should reinforce your message.

  24. Two guys known for their voices Imagine them switched?

  25. Basic

  26. Basic

  27. Basic

  28. Macho

  29. Macho

  30. Macho

  31. Lovely

  32. Lovely

  33. Lovely

  34. Sans vs Serif

  35. WordCamp WordCamp SANS-SERIF SERIF

  36. Sans vs Serif

  37. None
  38. Everyone is wrong.

  39. serif vs. sans-serif has resulted in a body of research

    consisting of weak claims and counter-claims, and study after study with ndings of no difference. “
  40. Legibility refers to how easily individual letters or characters can

    be distinguished from each other.
  41. Legibility is affected by the typeface and the manner in

    which it’s set.
  42. baseline median cap height ascender height Sphinx descender height x-height

  43. Small x-height Source: Ralf Herrmann, www.opentype.info, (used with permission) Large

    x-height (more legible)
  44. Closed counters oce oce Open counters (easier to distinguish)

  45. Unambiguous letterforms Il1O0 Il1O0 Il1O0 Il1O0 Il1O0 Il1O0

  46. Technical Quality

  47. Complete glyph set?

  48. Proper Tracking? Bright vixens jump dozy fowl quack. Bright vixens

    jump dozy fowl quack. Bright vixens jump dozy fowl quack.
  49. Proper Kerning?

  50. Proper Kerning?

  51. Proper Kerning?

  52. Proper Hinting? From http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

  53. Look for Variations within a typeface

  54. Does it have: ‣ Condensed + WIDE ‣ Numerous different

    weights? ‣ True italics? ‣ pen yp feature
  55. Look how awesome italics can be! @

  56. Look how awful faux bold & italics are! (it looks

    really bad)
  57. It’s unsettling when things lean at unnatural angles.

  58. Final words about choosing fonts: ‣ Test your fonts all

    over. Mobile, retina, etc. ‣ Pay for (don’t pirate) good fonts. ‣ Don’t use display (decorative) fonts for text. ‣ Don’t reuse your logo’s typeface. ‣ Experiment with pairing fonts. Sticking to one serif and one sans-serif usually yields good results.
  59. typesetting

  60. Typesetting* refers to how pieces of text are styled &

    arranged to work together in a composition. * typesetting & typography are roughly equivalent
  61. Typography is making language visible.

  62. A quick discussion about CSS units ‣ Don’t use absolute

    physical units (pt, in, cm, etc.) ‣ Pixels (px) are ... okay. Pixels make it difficult to define proportional relationships. ‣ Prefers %, em, rem
  63. em units Relative to parent’s computed font-size

  64. rem units Relative to <html> font-size Not supported in <

    IE8
  65. font-size px, em, rem

  66. 16px on screen ~= 12pt in print Source: http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/

  67. None
  68. Make the typeface big. Then make the typeface bigger. ‣

    16px should be the standard for long text. ‣ Consider making it even bigger. ‣ Mobile can be smaller (~12px) as it’s held closer to the eye. ‣ Use a typographic scale to inform your font size choices.
  69. an example typographic scale Source: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4

  70. line-height unitless, %, em

  71. For too long typographic style and its accompanying attention to

    detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. line-height: 1; too tight For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. line-height: 1.5; just right For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. line-height: 2; too much
  72. 1.6 is a nice, easy number

  73. For too long typographic style and its accompanying attention to

    detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. Robert Bringhurst’s book The Elements of Typographic Style is on many a designer’s bookshelf and is considered to be a classic in the field. Indeed the renowned typographer Hermann Zapf proclaims the book to be “a must for everybody in the graphic arts, and especially for our new friends entering the field.” In order to allay some of the myths surrounding typography on the web, I have structured this website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in html and css. The future is considered with coverage of css3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers. Pro tip: use same proportion for bottom margin
  74. Add and delete vertical space in measured intervals line-height: 1.5;

    too loose Headings: keep them tighter Add and delete vertical space in measured intervals line-height: 1.1; much better
  75. line length max-width: ??em;

  76. 52-78 characters per line is a safe bet.

  77. For too long typographic style and its accompanying attention to

    detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. ~130 characters way too wide For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. ~40 characters too narrow For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. ~75 characters looks good!
  78. Sadly, can’t just set max-width:75em; ems in CSS don’t have

    anything to do with the font’s character width. Instead, ems refer to the current font size (height). We’ve been lied to. Solution: you’ll need to eyeball it
  79. For too long typographic style and its accompanying attention to

    detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse. Relationship between line height & length Line height increases proportionally to line length. Narrow line, less line height. Wider line, more line height.
  80. ... in addition to creating texture and making the reader

    feel good ...
  81. typography establishes a visual hierarchy

  82. If everything is equal, nothing stands out.

  83. Use the trusty CRAP approach to create hierarchy. ‣ Contrast

    ‣ Repetition ‣ Alignment ‣ Proximity
  84. Use the trusty CRAP approach to create hierarchy. ‣ Contrast

    (size, weight, italic, condensed/wide, small-caps, tone) ‣ Repetition ‣ Alignment ‣ Proximity
  85. Use the trusty CRAP approach to create hierarchy. ‣ Contrast

    (size, weight, italic, condensed/wide, small-caps, tone) ‣ Repetition (stick to a handful of typographic arrangements, use in same contexts) ‣ Alignment ‣ Proximity
  86. Use the trusty CRAP approach to create hierarchy. ‣ Contrast

    (size, weight, italic, condensed/wide, small-caps, tone) ‣ Repetition (stick to a handful of typographic arrangements, use in same contexts) ‣ Alignment (blocks of text should align. more of a layout thing) ‣ Proximity (use vertical margins to group related content and space dissimilar content)
  87. Type study: Typographic hierarchy by Frank Chimero. http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/

  88. No typographic devices. One font, one weight.

  89. Introducing margin groups related content together. (proximity)

  90. Lecture title now appears in bold. (contrast) Note that this

    change was drastic enough that the order of the text can be changed without sacrificing clarity.
  91. A larger font size it used to add even more

    contrast to the lecture title. More vertical space further emphasizes grouped content.
  92. Drastic weights & sizes changes (along with a break in

    alignment) reinforce the talk title as the first piece of content a reader should be drawn to.
  93. Quick recap...

  94. Once basic legibility & readability are achieved, the real power

    of typography is to evoke an emotional response.
  95. Choose the best fonts that have an appropriate voice, ensure

    legibility & are of high technical quality.
  96. Use typesetting to establish texture, contrast & visual hierarchy.

  97. Go forth and typogrify!

  98. thanks! questions? slides will be posted to kylefox.ca/typesetting-the-web/ Twitter: @kylefox

    Email: kyle.fox@gmail.com Web: kylefox.ca
  99. Photo Credits http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg http://www.flickr.com/photos/davepc/7029922257/in/photostream/ http://www.flickr.com/photos/cybertoad/510187391/ http://www.flickr.com/photos/andrein/897274472/