Kerning,            Leading,            & Serifs,      OH MY!Thursday, October 20, 11
Jake Przespo            DESIGNERThursday, October 20, 11
1. HistoryThursday, October 20, 11
2. AnatomyThursday, October 20, 11
Serif vs.            Sans-serif            2. AnatomyThursday, October 20, 11
2. AnatomyThursday, October 20, 11                           S
2. AnatomyThursday, October 20, 11                           S
PRINT                                       DIGITAL            Heading                                     Heading        ...
Vocabulary            2. AnatomyThursday, October 20, 11
2. AnatomyThursday, October 20, 11                           T                           STEM
2. AnatomyThursday, October 20, 11                           r   SERIF
h                           ASCENDER            2. AnatomyThursday, October 20, 11
2. Anatomy                           y                           DESCENDERThursday, October 20, 11
2. Anatomy                           o   COUNTERThursday, October 20, 11
2. Anatomy                           b   BOWLThursday, October 20, 11
3. TypesettingThursday, October 20, 11
Kerning             SPACING BETWEEN LETTERS            3. TypesettingThursday, October 20, 11
Word                             GOOD                             Word                             BAD            3. Types...
Teach                             GOOD                             Teach                             BAD            3. Typ...
All caps         TODAY                             SKILLSHARE            usually          TYPOGRAPHY            don’t need...
Tall letters     Tennis                             Wanted            with an          Voting            open            b...
Tricks &         UPSIDE DOWN                             droW            Tips                             SQUINT TEST     ...
GAME TIME!            3. TypesettingThursday, October 20, 11
Leading             SPACING BETWEEN LINES            3. TypesettingThursday, October 20, 11
Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed            auctor neque eu tellus rhoncus ut ...
Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed            auctor neque eu tellus rhoncus ut ...
Measure             THE WIDTH OF A COLUMN OF TEXT            3. TypesettingThursday, October 20, 11
Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend   ...
Nullam in dui mauris. Vivamus hendrerit arcu sed     Nullam in dui mauris. Vivamus hendrerit arcu sed            erat mole...
Hierarchy             STRUCTURING YOUR CONTENT            3. TypesettingThursday, October 20, 11
Heading 1            Heading 2            Heading 3            Heading 4            Heading 5            Class aptent taci...
Ultra Light            Light            Regular            Medium            Bold            3. TypesettingThursday, Octob...
Type            Measurement             THE SCIENCE BEHIND FONT SIZES            3. TypesettingThursday, October 20, 11
Points           1 pt = 1/72 of an inch            3. TypesettingThursday, October 20, 11
Picas            1 pc = 12 points            3. TypesettingThursday, October 20, 11
Ems              1 em = the horizontal                             measurement of type                             in rela...
Pixels           The measurement of                             pixels is di erent per                             resolut...
4. GlyphsThursday, October 20, 11
Dashes            4. GlyphsThursday, October 20, 11
-    HYPHEN                           man-eating                           two-hundred-years-old                          ...
–EN DASH                           7:00 – 9:00                           Nov 6th – Nov 8th                           1955 ...
—           EM DASH                           Jake designed the whole                           site — including email    ...
Ellipsis            4. GlyphsThursday, October 20, 11
…     ELLIPSIS                           The army honored the                           lost souls … by                   ...
Primes vs.            Quotes            4. GlyphsThursday, October 20, 11
"                           5 7"                           12 x 26 x 39             PRIMES            4. GlyphsThursday, O...
‘“                           “ Stay hungry, stay                             foolish.”             QUOTES            4. Gl...
Math            4. GlyphsThursday, October 20, 11
½              ½ One half                           ¼ One quarter             MATH                           ¾ Three quart...
Ligatures             COMBINING TWO CHARACTERS INTO ONE            4. GlyphsThursday, October 20, 11
fi             œ             LIGATURES                           æ            4. GlyphsThursday, October 20, 11
5. Web               TypographyThursday, October 20, 11
Web-safe            Fonts             FONTS THAT MOST USERS HAVE            5. Web TypographyThursday, October 20, 11
Arial            Courier New            Georgia            Times New Roman            Verdana            5. Web Typography...
CSS             USING @FONT-FACE            5. Web TypographyThursday, October 20, 11
@FONT-FACE            index.html          @font-face {                                  font-family: Skillshare;          ...
FONT STACKS            font-family: “Helvetica Neue”,            Helvetica, Arial, sans-serif;            5. Web Typograph...
6. Rules to               RememberThursday, October 20, 11
Typeface               Song vs.            vs. Font               MP3            6. Rules to RememberThursday, October 20,...
16px body              Nullam in dui mauris. Vivamus hendrerit arcu sed erat                                   molestie ve...
52 – 78                Sed molestie augue sit amet leo consequat posuere.                                   Vestibulum ant...
Single space           Sed molestie augue sit                                   amet leo consequat            after period...
Hanging                   Nullam in dui mauris. Vivamus hendrerit arcu sed                                      erat moles...
Measure                             Nullam in dui mauris. Vivamus hendrerit arcu                             sed erat mole...
7. RecapThursday, October 20, 11
VIDEO TIME!Thursday, October 20, 11
Thursday, October 20, 11
Thanks!                              @jakeprzespo                           jake@skillshare.comThursday, October 20, 11
Upcoming SlideShare
Loading in...5
×

Kerning, Leading, and Serifs, Oh my!

455

Published on

Basics of typography

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

No Downloads
Views
Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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

×