$30 off During Our Annual Pro Sale. View Details »

Typesetting the Web

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.

Kyle Fox

November 16, 2012
Tweet

More Decks by Kyle Fox

Other Decks in Design

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: [email protected]
    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