Web Safe Fonts are Dead Series | Part 2: Setting Type for Web Sites

1. Presented by Thomas Phinney

2. Part 2: Setting Type

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

6. Use an Abstraction Layer Example website >

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

9. Hyphenation: Why? More even spacing w/justified text (reduce/eliminate “rivers”)

10. Hyphenation: Why? •  Even for non-justified (“ragged”) text: more even “rag” edge •  Tradition

11. Hyphenation: examples

12. Hyphenation: How? •  CSS 3 •  -webkit-hyphens: auto; (Safari 5.1+, Chrome 13+) •  -moz-hyphens: auto; (FF 6+) •  -ms-hyphens: auto; (IE 10+) •  -o-hyphens: auto (O unsupported) •  hyphens: auto

13. Hyphenation: Notes •  Some browsers req. ‘lang’ attribute on text to hyphenate •  CSS3 has even more controls…

14. Reconsider Justiﬁcation •  Standard: “Full justification” •  Consider “Ragged right” •  Better default choice •  Interactions with line length & hyphenation

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;

17. Line length research? •  Shaikh & Chaparro (2004) •  35, 55, 75, 95 cpl •  35–75 similar speed •  95 cpl = +6% speed

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

20. Line Spacing •  CSS “line-height” a.k.a “Leading” •  Large x-height > more line spacing •  Longer lines > more line spacing

21. Line Spacing: example •  http://www.w3schools.com/ cssref/playit.asp? filename=playcss_line-height

22. More Line Spacing •  “Normal” (default) ≠ 1 •  Includes ~20% extra space •  Varies depending on font vertical metrics •  Consider 1.3–1.6 line-spacing

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?

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)

28. Maintain Contrast •  What kind of contrast?

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

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?

35. Some typefaces suck in caps • EáÑxv|tÄÄç fvÜ|Ñà YÉÇàá • fVecg Ybagf

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

40. Kerning •  Spacing adjustment between specific letter pairs •  Info built into font

41. Kerning • Toe WAVERY •  with kerning • Toe WAVERY •  without kerning

42. Ligatures •  Glyphs that link together! • fi fl ff ft ffl ffi •  The official files often fly 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

44. Enable Kerning & Ligatures in CSS body { -moz-font-feature-settings:"liga", "kern"; -moz-font-feature-settings:"liga=1, kern=1"; -ms-font-feature-settings:"liga", "kern"; -o-font-feature-settings:"liga", "kern"; -webkit-font-feature-settings:"liga", "kern"; font-feature-settings:"liga", "kern"; text-rendering:optimizeLegibility; }

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

48. Effective Visual Hierarchy: Type 6 ways to distinguish/emphasize type

49. Effective Visual Hierarchy: Type 6 ways to distinguish/emphasize type •  Size change

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.

52. Effective Visual Hierarchy: Type 6 ways to distinguish/emphasize type •  Italics

53. Effective Visual Hierarchy: Type 6 ways to distinguish/emphasize type •  Color change

54. Effective Visual Hierarchy: Type 6 ways to distinguish/emphasize type •  Different typeface altogether

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

56. Effective Visual Hierarchy •  Minimalism •  Restrict # Roles like # Sizes, but a few more

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

59. Summing Up?

60. Keep it attractive But make it legible

61. Keep it attractive & But make it legible

62. Resources & Links •  http://www.webink.com/ type-resources •  http://blog.webink.com •  @WebINK •  @ThomasPhinney

Web Safe Fonts are Dead Series | Part 2: Setting Type for Web Sites

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Web Safe Fonts are Dead Series | Part 2: Setting Type for Web Sites

Similar to Web Safe Fonts are Dead Series | Part 2: Setting Type for Web Sites (20)

More from Extensis

More from Extensis (20)

Recently uploaded

Recently uploaded (20)

Web Safe Fonts are Dead Series | Part 2: Setting Type for Web Sites