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

689 views

Published on

In Part 2, Thomas Phinney takes on “Setting Type for Web Sites” and includes:

• How and why to control hyphenation, kerning and ligatures
• Legibility and readability, line spacing, , contrast, and more
• Creative inspiration

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Presented by Thomas Phinney
  2. 2. Part 2:Setting Type
  3. 3. 15 Things10 web typesetting best practices5 ways web type is not print
  4. 4. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  5. 5. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  6. 6. Use anAbstraction LayerExample website >
  7. 7. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  8. 8. Use Hyphenation“Pretty much the only forms ofWestern literature that don’t usehyphenation are children’s booksand websites. Until now.”—Richard Rutter
  9. 9. Hyphenation:Why?More even spacing w/justifiedtext (reduce/eliminate “rivers”)
  10. 10. Hyphenation:Why?•  Even for non-justified(“ragged”) text:more even “rag” edge•  Tradition
  11. 11. Hyphenation:examples
  12. 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. 13. Hyphenation:Notes•  Some browsers req. ‘lang’attribute on text to hyphenate•  CSS3 has even more controls…
  14. 14. ReconsiderJustification•  Standard: “Full justification”•  Consider “Ragged right”•  Better default choice•  Interactions with line length& hyphenation
  15. 15. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  16. 16. Limit & ControlLine 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. 17. Line lengthresearch?•  Shaikh & Chaparro (2004)•  35, 55, 75, 95 cpl•  35–75 similar speed•  95 cpl = +6% speed
  18. 18. Line lengthresearch?•  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. 19. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  20. 20. Line Spacing•  CSS “line-height”a.k.a “Leading”•  Large x-height >more line spacing•  Longer lines >more line spacing
  21. 21. Line Spacing:example•  http://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height
  22. 22. More Line Spacing•  “Normal” (default) ≠ 1•  Includes ~20% extra space•  Varies depending on fontvertical metrics•  Consider 1.3–1.6line-spacing
  23. 23. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  24. 24. ParagraphSeparation•  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. 25. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  26. 26. Bigger Body Text•  Legible ≠ Comfortable!•  Most web text unnecessarilysmall•  Average 9–12 px•  Suggested default: 14–16 px•  Ideal size varies by font•  Different x-height•  Different minimum legible(example)
  27. 27. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  28. 28. Maintain Contrast•  What kind of contrast?
  29. 29. •  [EXAMPLE SLIDE]Ed Smith Nahhe Nomie Osamu Ikeda Amanda PaullMike MarsdenNathalieDumontRomeo Fahl Jeff WilliamsDavin Kluttz Jeremy Bowers Jim Kidwell Marisela AlzuhnChris Tew Jim O’Connor Chad Slater Bill SchwanitzChris Meyer Richard Bamford Carli Edvalson Don JohnsonNic Marson John Stalnaker Chris Stevens Renee SchlacterAndy Nelsen Bernardine Lim Mark Murphy Jonah PerezErica Stupfel Clint Daeuble Junko Suzuki Richard Fattic
  30. 30. Maintain Contrast•  Background color vs.text color•  Looking good vs.being readable?•  Legible vs. comfortable•  Viewing conditions vary•  User cannot easily override!
  31. 31. •  [EXAMPLE SLIDE]Ed Smith Nahhe Nomie Osamu Ikeda Amanda PaullMike MarsdenNathalieDumontRomeo Fahl Jeff WilliamsDavin Kluttz Jeremy Bowers Jim Kidwell Marisela AlzuhnChris Tew Jim O’Connor Chad Slater Bill SchwanitzChris Meyer Richard Bamford Carli Edvalson Don JohnsonNic Marson John Stalnaker Chris Stevens Renee SchlacterAndy Nelsen Bernardine Lim Mark Murphy Jonah PerezErica Stupfel Clint Daeuble Junko Suzuki Richard Fattic
  32. 32. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  33. 33. CARE WITHALL CAPS•  Bigger than lowercase•  Good for very small sizes &poor conditions•  Decrease shape differences•  Bad for distinguishing lettersand extended reading•  Use carefully, in moderation!
  34. 34. CAPS FINE INHEADING•  BUT ALL CAPS ARE TOOMUCH IN A FULL SENTENCELIKE THIS.•  CAPS HELP THIS TINY TEXT•  NAV ELEMENTS?
  35. 35. Some typefacessuck in caps• EáÑxv|tÄÄç fvÜ|Ñà YÉÇàá• fVecg Ybagf
  36. 36. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  37. 37. Underlining is foramateurs•  Except, acceptable for URLs•  But consider color instead!•  Just plain icky foreverything else•  Use bold or italic for emphasis•  Book titles should be in italics
  38. 38. Underlining is foramateurs•  Faux bold & italic•  Body typeface must be set upwith real bold and italic!•  Otherwise, OS will fake it
  39. 39. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  40. 40. Kerning•  Spacing adjustment betweenspecific letter pairs•  Info built into font
  41. 41. Kerning• Toe WAVERY •  with kerning• Toe WAVERY •  without kerning
  42. 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. 43. Enabling Kerning& Ligatures•  text-rendering:optimizeLegibility•  Turns on kerning and ligatures•  Supported in Firefox 4+•  OpenType feature calls•  CSS3 feature
  44. 44. Enable Kerning &Ligatures in CSSbody {-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;}
  45. 45. 10 Web TypesettingBest Practices1.  Abstraction Layer2.  Use Hyphenation / ReconsiderJustification3.  Limit & Control Line Length4.  More Line Spacing5.  Standard Paragraph Separation6.  Bigger Body Text7.  Maintain Contrast8.  Care with All Caps9.  Underlining is for Amateurs10.  Activate Kerning & Ligatures11.  Bonus: Effective Visual Hierarchy
  46. 46. Effective VisualHierarchy•  General•  http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/•  Example site:http://net.tutsplus.com/
  47. 47. Effective VisualHierarchy: Size•  More sizes = more clutter•  Use fewer levels of headings•  One or at most two, plus bodysize, for most projects•  Consider Golden Ratio scale•  Each level ~1.6 x the size below it
  48. 48. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type
  49. 49. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Size change
  50. 50. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Same techniques as other elements•  Location, proximity, background, etc.
  51. 51. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Weight & Widthextralight, light, regular, semibold bold,black, condensed, semi-condensed,regular, semi-extended, etc.
  52. 52. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Italics
  53. 53. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Color change
  54. 54. Effective VisualHierarchy: Type6 ways to distinguish/emphasize type•  Different typeface altogether
  55. 55. Effective VisualHierarchy: Type6 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. 56. Effective VisualHierarchy•  Minimalism•  Restrict # Roles like # Sizes, buta few more
  57. 57. 15 Things10 web typesetting best practices5 ways web type is not print
  58. 58. 5 Ways Web Differsfrom 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. 59. Summing Up?
  60. 60. Keep it attractiveBut make it legible
  61. 61. Keep it attractive&But make it legible
  62. 62. Resources& Links•  http://www.webink.com/type-resources•  http://blog.webink.com•  @WebINK•  @ThomasPhinney

×