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.

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
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
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/
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/