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
   

   View Slide

2. What this talk is about
   ‣ Why care about type?
   ‣ Choosing typefaces
   ‣ Setting text to look snazzy
   

   View Slide

3. What this talk
   is not about
   ‣ Jessica Hische and/or lettering
   ‣ Typeface classification
   ‣ Webfonts or @font-face
   

   View Slide

4. This is your last chance to leave the room
   without gravely hurting my feelings.
   

   View Slide

5. Kyle Fox
   Designer guy @ Granify
   Co-organizer of Crafting Type
   Lifelong type geek
   

   View Slide

6. Why care about
   type?
   

   View Slide

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

   View Slide

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
   

   View Slide

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.”
   

   View Slide

10. - STUDIES SHOW -
    Good typography makes people frown less.
    

    View Slide

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

    View Slide

12. “One cannot not communicate.”
    Paul Watzlawick
    

    View Slide

13. Good typography
    H
    invitation to read
    

    View Slide

14. Good typography
    H
    evoke feeling
    

    View Slide

15. Good typography
    H
    body language
    

    View Slide

16. Good typography
    H
    soundtrack
    

    View Slide

17. View Slide

18. View Slide

19. CH O OSIN G
    typefaces
    

    View Slide

20. - QUALITY INGREDIENTS-
    Good typography
    requires good typefaces.
    A bad font cannot be made to look good!
    Sorry :(
    

    View Slide

21. 3 considerations
    ‣ Voice (Style)
    ‣ Legibility (Distinguishable)
    ‣ Technical Quality (Not from dafont)
    

    View Slide

22. Like people,
    typefaces have voices.
    Fonts are people too. Huh?
    

    View Slide

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

    View Slide

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

    View Slide

25. Basic
    

    View Slide

26. Basic
    

    View Slide

27. Basic
    

    View Slide

28. Macho
    

    View Slide

29. Macho
    

    View Slide

30. Macho
    

    View Slide

31. Lovely
    

    View Slide

32. Lovely
    

    View Slide

33. Lovely
    

    View Slide

34. Sans vs
    Serif
    

    View Slide

35. WordCamp
    WordCamp
    SANS-SERIF
    SERIF
    

    View Slide

36. Sans vs
    Serif
    

    View Slide

37. View Slide

38. Everyone is wrong.
    

    View Slide

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.
    “
    

    View Slide

40. Legibility refers to how easily
    individual letters or characters can be
    distinguished from each other.
    

    View Slide

41. Legibility is affected by the typeface
    and the manner in which it’s set.
    

    View Slide

42. baseline
    median
    cap height
    ascender height
    Sphinx
    descender height
    x-height
    

    View Slide

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

    View Slide

44. Closed counters
    oce
    oce
    Open counters
    (easier to distinguish)
    

    View Slide

45. Unambiguous letterforms
    Il1O0
    Il1O0
    Il1O0
    Il1O0
    Il1O0 Il1O0
    

    View Slide

46. Technical Quality
    

    View Slide

47. Complete glyph set?
    

    View Slide

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

    View Slide

49. Proper Kerning?
    

    View Slide

50. Proper Kerning?
    

    View Slide

51. Proper Kerning?
    

    View Slide

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

    View Slide

53. Look for
    Variations
    within a typeface
    

    View Slide

54. Does it have:
    ‣ Condensed + WIDE
    ‣ Numerous different weights?
    ‣ True italics?
    ‣ pen yp feature
    

    View Slide

55. Look how awesome italics can be!
    @
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

59. typesetting
    

    View Slide

60. Typesetting* refers to how pieces of
    text are styled & arranged to work
    together in a composition.
    * typesetting & typography are roughly equivalent
    

    View Slide

61. Typography is making
    language visible.
    

    View Slide

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
    

    View Slide

63. em units
    Relative to parent’s computed font-size
    

    View Slide

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

    View Slide

65. font-size
    px, em, rem
    

    View Slide

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

    View Slide

67. View Slide

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.
    

    View Slide

69. an example typographic scale
    Source: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-4
    

    View Slide

70. line-height
    unitless, %, em
    

    View Slide

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
    

    View Slide

72. 1.6
    is a nice, easy number
    

    View Slide

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
    

    View Slide

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
    

    View Slide

75. line length
    max-width: ??em;
    

    View Slide

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

    View Slide

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!
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

80. ... in addition to creating texture
    and making the reader feel good ...
    

    View Slide

81. typography
    establishes a visual hierarchy
    

    View Slide

82. If everything is equal,
    nothing stands out.
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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)
    

    View Slide

87. Type study: Typographic hierarchy
    by Frank Chimero.
    http://blog.typekit.com/2011/03/17/type-study-typographic-hierarchy/
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

91. A larger font size it used to
    add even more contrast to
    the lecture title.
    More vertical space further
    emphasizes grouped content.
    

    View Slide

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.
    

    View Slide

93. Quick recap...
    

    View Slide

94. Once basic legibility & readability are
    achieved, the real power of typography
    is to evoke an emotional response.
    

    View Slide

95. Choose the best fonts that have an
    appropriate voice, ensure legibility & are
    of high technical quality.
    

    View Slide

96. Use typesetting to establish texture,
    contrast & visual hierarchy.
    

    View Slide

97. Go forth and typogrify!
    

    View Slide

98. thanks!
    questions?
    slides will be posted to
    kylefox.ca/typesetting-the-web/
    Twitter: @kylefox
    Email: kyle.fox@gmail.com
    Web: kylefox.ca
    

    View Slide

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/
    

    View Slide