Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typographic basics


Published on

Based on Design for the Non Designer by Robin Williams

Published in: Technology, Art & Photos
  • Be the first to comment

Typographic basics

  1. 1. Typographical
  2. 2. Font features Cap Height Ascenders Typography X-HeightBaseline Descenders
  3. 3. Character parts Axis Ear Hook Bar Typ-o-graf-e Serif Counter Terminal
  4. 4. Letter form Hxg Hxg Hxg Hxg Ariel Times NR Geo Slab Hattenschweiler
  5. 5. KerningInter-character spacing Time Unkerned type Time Kerned type TNT
  6. 6. Tracking
  7. 7. Leading (Line spacing)Leading refers to the space Leading refers to the spacebetween lines. It can be between lines. It can betightened or expanded asneeded to fill space. (1) tightened or expanded as needed to fill space. (1.25)Leading refers to the space Leading refers to the space between lines. It can bebetween lines. It can be tightened or expanded astightened or expanded as needed to fill space. (.8)needed to fill space. (1.4)
  8. 8. RelationshipsType is a building blockThree types of relationships  Concordant  Conflicting  Contrasting
  9. 9. ConcordantUse one fontUse variations on that font  Size  Italic  Bold  ColorSeen as calm, formal
  10. 10. For example . . .
  11. 11. ConflictingUse of two or more fonts that are similar (same family)Creates a visual dissonanceShould be avoided
  12. 12. For example . . .
  13. 13. ContrastStrong contrast attractsSimple way to create interestCreates energy on a pageMay involve 2 or more fontsRequires careful planning
  14. 14. For example . . .
  15. 15. Oldstyle Serifs on lowercase letters are slanted Diagonal stress Moderate thick/thin transition in the stroke
  16. 16. Oldstyle
  17. 17. Modern Serifs are thin Vertical stress and horizontal Radical thick/thin transition in the stroke
  18. 18. Modern
  19. 19. Slab serif Little vertical stress Little or no thick/thin transition Serifs are of contrast in the horizontal and strokes thick (slabs)
  20. 20. Slab serif
  21. 21. Sans serif No stress because No serifs there’s no thick/thin No thick/thin transition in the strokes
  22. 22. Sans serif
  23. 23. Connected Script
  24. 24. Unconnected Script
  25. 25. Decorative
  26. 26. Typography existsto honor content Robert Bringhurst, The Elements of Typographic Style