Applied Typography

1,834 views

Published on

Just a quick run through of typography categorization, identification and usage. This has since been replaced but numerous othe resources on the internet

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

No Downloads
Views
Total views
1,834
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
91
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Applied Typography

  1. 1. APPLIED TYPOGRAPHY APPLIED TYPOGRAPHYA short introduction into the theory and usage of type Prepared by Aishah and Alvin
  2. 2. What is TYPOGRAPHY? What is TYPOGRAPHY?
  3. 3. Let’s start from the basics.
  4. 4. x-height leading Baseline Kerning type x
  5. 5. Font FAMILYS Font FAMILYS Serif Sans-serif
  6. 6. Oldstyles Made by writers e.g Garamond
  7. 7. Transitional Made by engineers e.g Times New Roman
  8. 8. Let’s compare x-height! also look at angled stress and counter
  9. 9. Modern Made by stylists e.g Bauer Bodoni
  10. 10. Slab Moving towards sans serif e.g Rockwell
  11. 11. Geometric Perfect circles e.g Century Gothic
  12. 12. Humanist Matching with old styles e.g Gill Sans
  13. 13. Grotesque Matching with transitional e.g Franklin Gothic
  14. 14. Moving on.
  15. 15. Kerning & LEADING Kerning & LEADING It matters a lot.
  16. 16. x-height leading Baseline Kerning type x
  17. 17. See it live!
  18. 18. Web TYPOGRAPHY Web TYPOGRAPHY
  19. 19. Short introduction to Chrome Developer Tools Follow closely!
  20. 20. font-weight font-style font-size font-variant 100, bold italics absolute/relative small-caps AttributesAttributes OptionsOptions
  21. 21. a a a a a a lighter heavier
  22. 22. inches (in) centimeters (cm) millimeters (mm) points (pt) picas (pc) pixels (px) ems (em) X-height (ex) percentages (%) Absolute sizing Relative sizing
  23. 23. line-height letter-spacing word-spacing text-shadow text-align color absolute/relative absolute/relative absolute/relative x-pos y-pos #color left, right, center #color
  24. 24. Font Stacks Font Stacks
  25. 25. font-family: Tahoma, Arial, ‘Helvetica’, sans-serif Lorem ipsum dolor sit amet, consectetur adip- isicing elit, sed do eius- mod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adip- isicing elit, sed do eius- mod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adip- isicing elit, sed do eius- mod tempor incididunt ut labore et dolore magna aliqua.
  26. 26. ResourcesResources
  27. 27. Design inspirations How to make you designs Classic book about typography, now adapted for web Hardcore forum Blog creattica.com

×