typesetting the web KYLE FOX // kylefox.ca // @kylefox WORDCAMP EDMONTON // 2012

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

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

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

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

Why care about type?

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

“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

“high quality typography appears to induce a positive mood.” “Creative cognitive tasks have shown performance improvements when participants were induced into a positive mood.”

- STUDIES SHOW - Good typography makes people frown less.

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

“One cannot not communicate.” Paul Watzlawick

Good typography H invitation to read

Good typography H evoke feeling

Good typography H body language

Good typography H soundtrack

No content

No content

CH O OSIN G typefaces

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

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

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

Voices convey feeling. That feeling should reinforce your message.

Two guys known for their voices Imagine them switched?

Basic

Basic

Basic

Macho

Macho

Macho

Lovely

Lovely

Lovely

Sans vs Serif

WordCamp WordCamp SANS-SERIF SERIF

Sans vs Serif

No content

Everyone is wrong.

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

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

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

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

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

Closed counters oce oce Open counters (easier to distinguish)

Unambiguous letterforms Il1O0 Il1O0 Il1O0 Il1O0 Il1O0 Il1O0

Technical Quality

Complete glyph set?

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

Proper Kerning?

Proper Kerning?

Proper Kerning?

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

Look for Variations within a typeface

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

Look how awesome italics can be! @

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

It’s unsettling when things lean at unnatural angles.

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.

typesetting

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

Typography is making language visible.

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

em units Relative to parent’s computed font-size

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

font-size px, em, rem

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

No content

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.

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

line-height unitless, %, em

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

1.6 is a nice, easy number

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

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

line length max-width: ??em;

52-78 characters per line is a safe bet.

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!

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

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.

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

typography establishes a visual hierarchy

If everything is equal, nothing stands out.

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

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

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

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)

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

No typographic devices. One font, one weight.

Introducing margin groups related content together. (proximity)

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.

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

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.

Quick recap...

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

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

Use typesetting to establish texture, contrast & visual hierarchy.

Go forth and typogrify!

thanks! questions? slides will be posted to kylefox.ca/typesetting-the-web/ Twitter: @kylefox Email: [email protected] Web: kylefox.ca

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/