Kerning, Leading, and Serifs, Oh my!

645 views

Published on

Basics of typography

Published in: Design, Technology, Business
1 Comment
3 Likes
Statistics
Notes
  • Really Great Slides. What does Song vs MP3 mean? I don't get the analogy, but it seems as though it would be a great way to explain Typeface vs Fonts.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
645
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Kerning, Leading, and Serifs, Oh my!

  1. 1. Kerning, Leading, & Serifs, OH MY!Thursday, October 20, 11
  2. 2. Jake Przespo DESIGNERThursday, October 20, 11
  3. 3. 1. HistoryThursday, October 20, 11
  4. 4. 2. AnatomyThursday, October 20, 11
  5. 5. Serif vs. Sans-serif 2. AnatomyThursday, October 20, 11
  6. 6. 2. AnatomyThursday, October 20, 11 S
  7. 7. 2. AnatomyThursday, October 20, 11 S
  8. 8. PRINT DIGITAL Heading Heading Sed molestie augue sit amet leo Sed molestie augue sit amet leo consequat consequat posuere. Vestibulum ante posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere ipsum primis in faucibus orci luctus cubilia. et ultrices posuere cubilia. 3. TypesettingThursday, October 20, 11
  9. 9. Vocabulary 2. AnatomyThursday, October 20, 11
  10. 10. 2. AnatomyThursday, October 20, 11 T STEM
  11. 11. 2. AnatomyThursday, October 20, 11 r SERIF
  12. 12. h ASCENDER 2. AnatomyThursday, October 20, 11
  13. 13. 2. Anatomy y DESCENDERThursday, October 20, 11
  14. 14. 2. Anatomy o COUNTERThursday, October 20, 11
  15. 15. 2. Anatomy b BOWLThursday, October 20, 11
  16. 16. 3. TypesettingThursday, October 20, 11
  17. 17. Kerning SPACING BETWEEN LETTERS 3. TypesettingThursday, October 20, 11
  18. 18. Word GOOD Word BAD 3. TypesettingThursday, October 20, 11
  19. 19. Teach GOOD Teach BAD 3. TypesettingThursday, October 20, 11
  20. 20. All caps TODAY SKILLSHARE usually TYPOGRAPHY don’t need kerning 3. TypesettingThursday, October 20, 11
  21. 21. Tall letters Tennis Wanted with an Voting open bottom need more 3. TypesettingThursday, October 20, 11
  22. 22. Tricks & UPSIDE DOWN droW Tips SQUINT TEST Word 3. TypesettingThursday, October 20, 11
  23. 23. GAME TIME! 3. TypesettingThursday, October 20, 11
  24. 24. Leading SPACING BETWEEN LINES 3. TypesettingThursday, October 20, 11
  25. 25. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. BAD 3. TypesettingThursday, October 20, 11
  26. 26. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. GOOD 3. TypesettingThursday, October 20, 11
  27. 27. Measure THE WIDTH OF A COLUMN OF TEXT 3. TypesettingThursday, October 20, 11
  28. 28. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. BAD 3. TypesettingThursday, October 20, 11
  29. 29. Nullam in dui mauris. Vivamus hendrerit arcu sed Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut porttitor posuere. Praesent id metus massa, ut blandit odio. blandit odio. Proin quis tortor orci. Etiam at risus et justo Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. dignissim congue. Donec congue lacinia dui, a. GOOD 3. TypesettingThursday, October 20, 11
  30. 30. Hierarchy STRUCTURING YOUR CONTENT 3. TypesettingThursday, October 20, 11
  31. 31. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu. 3. TypesettingThursday, October 20, 11
  32. 32. Ultra Light Light Regular Medium Bold 3. TypesettingThursday, October 20, 11
  33. 33. Type Measurement THE SCIENCE BEHIND FONT SIZES 3. TypesettingThursday, October 20, 11
  34. 34. Points 1 pt = 1/72 of an inch 3. TypesettingThursday, October 20, 11
  35. 35. Picas 1 pc = 12 points 3. TypesettingThursday, October 20, 11
  36. 36. Ems 1 em = the horizontal measurement of type in relation to point size; always the same for all fonts M M 3. TypesettingThursday, October 20, 11
  37. 37. Pixels The measurement of pixels is di erent per resolution. 3. TypesettingThursday, October 20, 11
  38. 38. 4. GlyphsThursday, October 20, 11
  39. 39. Dashes 4. GlyphsThursday, October 20, 11
  40. 40. - HYPHEN man-eating two-hundred-years-old low-budget rst-class son-in-law 4. GlyphsThursday, October 20, 11
  41. 41. –EN DASH 7:00 – 9:00 Nov 6th – Nov 8th 1955 – 2011 4. GlyphsThursday, October 20, 11
  42. 42. — EM DASH Jake designed the whole site — including email templates — in order to add it to his portfolio. 4. GlyphsThursday, October 20, 11
  43. 43. Ellipsis 4. GlyphsThursday, October 20, 11
  44. 44. … ELLIPSIS The army honored the lost souls … by saluting. To be continued… 4. GlyphsThursday, October 20, 11
  45. 45. Primes vs. Quotes 4. GlyphsThursday, October 20, 11
  46. 46. " 5 7" 12 x 26 x 39 PRIMES 4. GlyphsThursday, October 20, 11
  47. 47. ‘“ “ Stay hungry, stay foolish.” QUOTES 4. GlyphsThursday, October 20, 11
  48. 48. Math 4. GlyphsThursday, October 20, 11
  49. 49. ½ ½ One half ¼ One quarter MATH ¾ Three quarters × Multiply ÷ Divide 4. GlyphsThursday, October 20, 11
  50. 50. Ligatures COMBINING TWO CHARACTERS INTO ONE 4. GlyphsThursday, October 20, 11
  51. 51. fi œ LIGATURES æ 4. GlyphsThursday, October 20, 11
  52. 52. 5. Web TypographyThursday, October 20, 11
  53. 53. Web-safe Fonts FONTS THAT MOST USERS HAVE 5. Web TypographyThursday, October 20, 11
  54. 54. Arial Courier New Georgia Times New Roman Verdana 5. Web TypographyThursday, October 20, 11
  55. 55. CSS USING @FONT-FACE 5. Web TypographyThursday, October 20, 11
  56. 56. @FONT-FACE index.html @font-face { font-family: Skillshare; css/ } src: url(../fonts/Skillshare.otf); images/ h1 { fonts/ } font-family: Skillshare; 5. Web TypographyThursday, October 20, 11
  57. 57. FONT STACKS font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; 5. Web TypographyThursday, October 20, 11
  58. 58. 6. Rules to RememberThursday, October 20, 11
  59. 59. Typeface Song vs. vs. Font MP3 6. Rules to RememberThursday, October 20, 11
  60. 60. 16px body Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. text Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. 6. Rules to RememberThursday, October 20, 11
  61. 61. 52 – 78 Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, characters consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque. 6. Rules to RememberThursday, October 20, 11
  62. 62. Single space Sed molestie augue sit amet leo consequat after period posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. 6. Rules to RememberThursday, October 20, 11
  63. 63. Hanging Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. puncuation • Vivamus luctus • Urna sed urna • Altricies ac tempor “ Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.” i. Vivamus luctus ii. Urna sed urna iii. Altricies ac tempor 6. Rules to RememberThursday, October 20, 11
  64. 64. Measure Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna & Leading non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a. 3. TypesettingThursday, October 20, 11
  65. 65. 7. RecapThursday, October 20, 11
  66. 66. VIDEO TIME!Thursday, October 20, 11
  67. 67. Thursday, October 20, 11
  68. 68. Thanks! @jakeprzespo jake@skillshare.comThursday, October 20, 11

×