Web typography

2,485 views
2,373 views

Published on

Type basics and the CSS selectors that control them.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,485
On SlideShare
0
From Embeds
0
Number of Embeds
525
Actions
Shares
0
Downloads
75
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web typography

  1. 1. T H Y A P G What does it sayR O about you? P T Y IG N E S D & BY LEN D E G RO OT Tuesday, October 12, 2010
  2. 2. Anatomy BASELINE Hlgx Tuesday, October 12, 2010
  3. 3. Anatomy CAP HEIGHT Hlgx Tuesday, October 12, 2010
  4. 4. Anatomy ASCENDER Hlgx Tuesday, October 12, 2010
  5. 5. Anatomy DESCENDER Hlgx Tuesday, October 12, 2010
  6. 6. Anatomy X HEIGHT Hlgx Tuesday, October 12, 2010
  7. 7. Anatomy a . . . . Quick Reference Ascender Handglovery Stem Terminal Ear Bowl Eye Shoulder Serif - - Crossbar Counter Aperture Bracket Axis Overshoot Link/Neck Loop/Lobe Tail Descender Typeface The upward vertical stem on some An imaginary line drawn from top to The curved part of the character that lowercase letters, such as ‘h’ and ‘b’, that bottom of a glyph bisecting the upper and encloses the circular or curved parts Anatomy extends above the x-height is the lower strokes is the axis. (counter) of some letters such as ‘d’ ‘b’, ‘o’, , ascender. ‘D’, and ‘B’ is the bowl. The imaginary line upon which the letters CREDIT: FontShop.com The aperture is the partially enclosed, in a font appear to rest. The bracket is a curved or wedge-like somewhat rounded negative space in connection between the stem and serif — Basic parts some characters such as ‘n’, ‘C’, ‘S’, the of some fonts. Not all serifs are lower part of ‘e’, or the upper part of a bracketed serifs. Tuesday, October 12, 2010typeface of a double-storey ‘a’.
  8. 8. Anatomy SERIFS Hlgx Tuesday, October 12, 2010
  9. 9. Anatomy SANS SERIF Hlgx Tuesday, October 12, 2010
  10. 10. Anatomy SANS (STYLIZED) Hlgx Tuesday, October 12, 2010
  11. 11. Anatomy WEIGHT (NORMAL - 400) Hlgx p{ font-weight: normal 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
  12. 12. Anatomy WEIGHT (BOLD - 700) Hlgx p{ font-weight: bold 100, 200, 300, 400, 500, 600, 700, 800, 900 } Tuesday, October 12, 2010
  13. 13. Anatomy WEIGHT (OTHER) 100 = thin p{ 200 = extra-light font-weight: 300; 300 = light } 400 = normal, book 500 = medium p {font-weight: bolder} 600 = demi-bold p {font-weight: lighter} 700 = bold 800 = heavy 900 = black Tuesday, October 12, 2010
  14. 14. Anatomy STYLE (OBLIQUE) Hlgx p{ font-style: oblique } Tuesday, October 12, 2010
  15. 15. Anatomy STYLE (OBLIQUE) p{ font-style: oblique } Tuesday, October 12, 2010
  16. 16. Anatomy STYLE (ITALIC) Hlgx p{ font-style: italic } Tuesday, October 12, 2010
  17. 17. Readability LETTER SPACING (KERINING) Hlgx Tuesday, October 12, 2010
  18. 18. Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
  19. 19. Readability LETTER SPACING (KERINING) OVEN Tuesday, October 12, 2010
  20. 20. Readability LETTER SPACING (TRACKING) Hlgx Tuesday, October 12, 2010
  21. 21. Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
  22. 22. Readability LETTER SPACING (TRACKING) oven Tuesday, October 12, 2010
  23. 23. Readability LETTER SPACING (TRACKING) h1 { oven letter-spacing: -3px; } Tuesday, October 12, 2010
  24. 24. Readability WORD SPACING Turn off the oven p{ word-spacing: 10px; } Tuesday, October 12, 2010
  25. 25. Readability WORD SPACING Turn off the oven Turn off the oven Tuesday, October 12, 2010
  26. 26. Readability WORD SPACING Turn off the oven Turn off the oven Turn off the oven p {word-spacing: 10px;} Tuesday, October 12, 2010
  27. 27. Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
  28. 28. Readability LIGATURES Turn off the oven Tuesday, October 12, 2010
  29. 29. Readability LIGATURES Turn off the oven Turn off the oven Tuesday, October 12, 2010
  30. 30. Readability MONOSPACED (EM) Courier ham Tuesday, October 12, 2010
  31. 31. Readability SIZE (EM) size size size size size size size size .75 1.0 1.25 1.5 2.0 3.0 4.0 5.0 h1 { font-size: 2.5 em; } /* 40px/16=2.5em */ h2 { font-size: 1.875 em; } /* 30px/16=1.875em */ Tuesday, October 12, 2010
  32. 32. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tuesday, October 12, 2010
  33. 33. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  34. 34. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  35. 35. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FONT: 16 PT LEADING: 16 PT Tuesday, October 12, 2010
  36. 36. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  37. 37. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  38. 38. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ line-height: 1.25; } /* 1 em = 16pt so 1.25 em = 20 pt leading */ FONT: 16 PT LEADING: 20 PT Tuesday, October 12, 2010
  39. 39. Readability VERITCAL SPACING (LEADING) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p{ font-size: 16px; line-height: 20px; } Tuesday, October 12, 2010
  40. 40. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  41. 41. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  42. 42. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  43. 43. Readability VERITCAL SPACING (COLOR) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  44. 44. Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tuesday, October 12, 2010
  45. 45. Readability VERTICAL SPACING (PARAGRAPH) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p{ margin-bottom: 20px; } Tuesday, October 12, 2010
  46. 46. Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. reprehenderit in voluptate velit. GOOD BAD Tuesday, October 12, 2010
  47. 47. Readability VERTICAL SPACING (BASELINE GRID) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do body{ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut font-size: 13px; aliquip ex ea commodo consequat. Duis aute irure dolor in line-height: 15px; reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in } culpa qui officia deserunt mollit anim id est laborum. p{ Lorem ipsum dolor margin-bottom: 15px; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim } ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit. h3 { font-size: 15px; line-height: 20px; GOOD margin-bottom: -5px; } Tuesday, October 12, 2010
  48. 48. Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
  49. 49. Readability COLUMN WIDTH (620 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. TOO WIDE Tuesday, October 12, 2010
  50. 50. Readability COLUMN WIDTH (420 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut GOOD Tuesday, October 12, 2010
  51. 51. Readability COLUMN WIDTH (80 px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in TOO NARROW Tuesday, October 12, 2010
  52. 52. Readability INDENTS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-indent:30px; } Tuesday, October 12, 2010
  53. 53. Readability ALIGNMENT (FLUSH LEFT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. DEFAULT Tuesday, October 12, 2010
  54. 54. Readability ALIGNMENT (CENTERED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: center; } Tuesday, October 12, 2010
  55. 55. Readability ALIGNMENT (FLUSH RIGHT) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: right; } Tuesday, October 12, 2010
  56. 56. Readability ALIGNMENT (JUSTIFIED) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat. p{ text-align: justify; } Tuesday, October 12, 2010
  57. 57. Readability LINKS “ Lorem ipsum doloj sit game, consectetur “Lorem ipsum doloj sit game, consectetur adipisicing elit, sed do eiusmod tempor adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. deserunt mollit anim id est laborum.” GOOD BAD Tuesday, October 12, 2010
  58. 58. Readability ALL CAPS ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO MUCH TYPE IN ALL CAPS IS VERY HARD TO READ. IT WILL HURT PEOPLE IN THE BRAIN AND MAY RESULT IN SEIZURES. MAKE SURE THAT YOU USE SIMPLE PHRASES OR SINGLE WORDS. Tuesday, October 12, 2010
  59. 59. Readability ALL CAPS Requires tight leading – less than the font size HIRE HIRE HIRE ME ME ME GOOD 16/12 BAD 16/16 WORSE 16/20 Tuesday, October 12, 2010
  60. 60. Readability ALL CAPS It can also look good with loose tracking. JU STIC E h1 { letter-spacing: 30px; } Tuesday, October 12, 2010
  61. 61. Web fonts Tuesday, October 12, 2010
  62. 62. Web fonts FORMATS .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
  63. 63. Web fonts @fontface .ttf .otf .svg .eot .woff Tuesday, October 12, 2010
  64. 64. Web fonts Tuesday, October 12, 2010
  65. 65. Web fonts @fontface 29.95% 11.4% 5.5% 49.87% 1.6% Tuesday, October 12, 2010
  66. 66. Web fonts @fontface .ttf .otf .svg .eot Tuesday, October 12, 2010
  67. 67. Web fonts @fontface .ttf .otf .svg .eot .woff IE9 3.6 6 Tuesday, October 12, 2010
  68. 68. Web fonts @fontface @font-face { font-family: "Anivers"; src: url("Anivers.eot"); } @font-face { font-family: "Anivers"; src: url("Anivers.otf"); } body { font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif; } Tuesday, October 12, 2010
  69. 69. Web fonts TYPEKIT HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  70. 70. Web fonts TYPEKIT IE6 3.5 4.0249.4 3.1 10.54 HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  71. 71. Web fonts TYPEKIT 2.2 Experimental HTML <head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> CSS h1 { font-family: "ff-din-web", Helvetica, sans-serif; } Tuesday, October 12, 2010
  72. 72. PhotoShop FONT WEIGHT SIZE LEADING KERNING TRACKING COLOR Tuesday, October 12, 2010
  73. 73. PhotoShop ALIGNMENT INDENT LEFT INDENT RIGHT INDENT 1ST SPACE SPACE BEFORE AFTER Tuesday, October 12, 2010

×