This document outlines 10 best practices for web typesetting and 5 key differences between web and print typesetting. The best practices include using an abstraction layer, hyphenation, controlling line length, increasing line spacing, using larger body text sizes, maintaining color contrast, carefully using all caps, activating kerning and ligatures, and establishing an effective visual hierarchy. Some differences between web and print are that web layout is fluid, color usage is freer, available fonts can vary by user, and screen resolution is typically lower than print. The overall message is to keep web typesetting attractive but also optimizing for legibility.
3. 15 Things
10 web typesetting best practices
5 ways web type is not print
4. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
5. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
7. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
8. Use Hyphenation
âPretty much the only forms of
Western literature that donât use
hyphenation are childrenâs books
and websites. Until now.â
âRichard Rutter
15. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
16. Limit & Control
Line Length
â˘âŻ Impacts reading comfort
â˘âŻ Aim for 55â75 characters/line
â˘âŻ Type size Ă30 is a good start
â˘âŻ width: 30em;
â˘âŻ Or, use max
â˘âŻ max-width: 30em;
18. Line length
research?
â˘âŻ Shaikh & Chaparro (2004)
â˘âŻ 35, 55, 75, 95 cpl
â˘âŻ 35â75 similar speed
â˘âŻ 95 cpl = +6% speed
â˘âŻ 60% pref 35 or 95
â˘âŻ least fave? 45%=35, 55%=95
19. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
20. Line Spacing
â˘âŻ CSS âline-heightâ
a.k.a âLeadingâ
â˘âŻ Large x-height >
more line spacing
â˘âŻ Longer lines >
more line spacing
22. More Line Spacing
â˘âŻ âNormalâ (default) â 1
â˘âŻ Includes ~20% extra space
â˘âŻ Varies depending on font
vertical metrics
â˘âŻ Consider 1.3â1.6
line-spacing
23. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
24. Paragraph
Separation
â˘âŻ Full line space is default
â˘âŻ +/- from there
â˘âŻ p { margin-top: 1em; }
â˘âŻ p + p { margin-top: 1em; }
â˘âŻ When first line indent?
â˘âŻ When both?
â˘âŻ When eliminate?
â˘âŻ When indent entire block?
25. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
26. Bigger Body Text
â˘âŻ Legible â Comfortable!
â˘âŻ Most web text unnecessarily
small
â˘âŻ Average 9â12 px
â˘âŻ Suggested default: 14â16 px
â˘âŻ Ideal size varies by font
â˘âŻ Different x-height
â˘âŻ Different minimum legible
(example)
27. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
29. â˘âŻ [EXAMPLE SLIDE]
Ed Smith Nahhe Nomie Osamu Ikeda Amanda Paull
Mike Marsden
Nathalie
Dumont
Romeo Fahl Jeff Williams
Davin Kluttz Jeremy Bowers Jim Kidwell Marisela Alzuhn
Chris Tew Jim OâConnor Chad Slater Bill Schwanitz
Chris Meyer Richard Bamford Carli Edvalson Don Johnson
Nic Marson John Stalnaker Chris Stevens Renee Schlacter
Andy Nelsen Bernardine Lim Mark Murphy Jonah Perez
Erica Stupfel Clint Daeuble Junko Suzuki Richard Fattic
30. Maintain Contrast
â˘âŻ Background color vs.
text color
â˘âŻ Looking good vs.
being readable?
â˘âŻ Legible vs. comfortable
â˘âŻ Viewing conditions vary
â˘âŻ User cannot easily override!
31. â˘âŻ [EXAMPLE SLIDE]
Ed Smith Nahhe Nomie Osamu Ikeda Amanda Paull
Mike Marsden
Nathalie
Dumont
Romeo Fahl Jeff Williams
Davin Kluttz Jeremy Bowers Jim Kidwell Marisela Alzuhn
Chris Tew Jim OâConnor Chad Slater Bill Schwanitz
Chris Meyer Richard Bamford Carli Edvalson Don Johnson
Nic Marson John Stalnaker Chris Stevens Renee Schlacter
Andy Nelsen Bernardine Lim Mark Murphy Jonah Perez
Erica Stupfel Clint Daeuble Junko Suzuki Richard Fattic
32. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
33. CARE WITH
ALL CAPS
â˘âŻ Bigger than lowercase
â˘âŻ Good for very small sizes &
poor conditions
â˘âŻ Decrease shape differences
â˘âŻ Bad for distinguishing letters
and extended reading
â˘âŻ Use carefully, in moderation!
34. CAPS FINE IN
HEADING
â˘âŻ BUT ALL CAPS ARE TOO
MUCH IN A FULL SENTENCE
LIKE THIS.
â˘âŻ CAPS HELP THIS TINY TEXT
â˘âŻ NAV ELEMENTS?
36. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
37. Underlining is for
amateurs
â˘âŻ Except, acceptable for URLs
â˘âŻ But consider color instead!
â˘âŻ Just plain icky for
everything else
â˘âŻ Use bold or italic for emphasis
â˘âŻ Book titles should be in italics
38. Underlining is for
amateurs
â˘âŻ Faux bold & italic
â˘âŻ Body typeface must be set up
with real bold and italic!
â˘âŻ Otherwise, OS will fake it
39. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
42. Ligatures
â˘âŻ Glyphs that link together!
â˘âŻfi fl ff ft ffl ffi
â˘âŻ The ofďŹcial ďŹles often ďŹy in.âŚ"
â˘âŻ The official files often fly in.âŚ
43. Enabling Kerning
& Ligatures
â˘âŻ text-rendering:
optimizeLegibility
â˘âŻ Turns on kerning and ligatures
â˘âŻ Supported in Firefox 4+
â˘âŻ OpenType feature calls
â˘âŻ CSS3 feature
45. 10 Web Typesetting
Best Practices
1.⯠Abstraction Layer
2.⯠Use Hyphenation / Reconsider
Justification
3.⯠Limit & Control Line Length
4.⯠More Line Spacing
5.⯠Standard Paragraph Separation
6.⯠Bigger Body Text
7.⯠Maintain Contrast
8.⯠Care with All Caps
9.⯠Underlining is for Amateurs
10.⯠Activate Kerning & Ligatures
11.⯠Bonus: Effective Visual Hierarchy
46. Effective Visual
Hierarchy
â˘âŻ General
â˘âŻ http://webdesign.tutsplus.com/
articles/design-theory/
understanding-visual-
hierarchy-in-web-design/
â˘âŻ Example site:
http://net.tutsplus.com/
47. Effective Visual
Hierarchy: Size
â˘âŻ More sizes = more clutter
â˘âŻ Use fewer levels of headings
â˘âŻ One or at most two, plus body
size, for most projects
â˘âŻ Consider Golden Ratio scale
â˘âŻ Each level ~1.6 x the size below it
50. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
â˘âŻ Same techniques as other elements
â˘âŻ Location, proximity, background, etc.
51. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
â˘âŻ Weight & Width
extralight, light, regular, semibold bold,
black, condensed, semi-condensed,
regular, semi-extended, etc.
55. Effective Visual
Hierarchy: Type
6 ways: not all at once!
â˘âŻ Same techniques as other elements
â˘âŻ Location, proximity, background, etc.
â˘âŻ Size change
â˘âŻ Weight & Width
â˘âŻ Italics
â˘âŻ Color change
â˘âŻ Different typeface altogether
57. 15 Things
10 web typesetting best practices
5 ways web type is not print
58. 5 Ways Web Differs
from Print
â˘âŻ Layout is fluid
â˘âŻ Color is free (and overused)
â˘âŻ Both text and background colors
â˘âŻ Different available fonts
â˘âŻ Font fallback @ the end user
â˘âŻ Resolution often stinks
â˘âŻ Often~80â120 ppi
â˘âŻ Source of many issues