N-Share: Typography

370 views

Published on

A sharing at N-House, by Alvin Ng Chong Xun and Siti Aishah Za. N-House is the home for student entrepreneurs of the National University of SIngapore.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
370
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

N-Share: Typography

  1. 1. APPLIEDTYPOGRAPHYA short introduction into thetheory and usage of typePrepared by Aishah and Alvin
  2. 2. What isTYPOGRAPHY?
  3. 3. Let’s start from the basics.
  4. 4. x x-heightBaseline type Kerning leading
  5. 5. Font SerifFAMILYS 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 stylistse.g Bauer Bodoni
  10. 10. SlabMoving towards sans serif e.g Rockwell
  11. 11. Geometric Perfect circles e.g Century Gothic
  12. 12. HumanistMatching with old styles e.g Gill Sans
  13. 13. GrotesqueMatching with transitional e.g Franklin Gothic
  14. 14. Moving on.
  15. 15. Kerning & It matters a lot.LEADING
  16. 16. x x-heightBaseline type Kerning leading
  17. 17. See it live!
  18. 18. WebTYPOGRAPHY
  19. 19. Short introduction toChrome Developer Tools Follow closely!
  20. 20. Attributes Optionsfont-weight 100, boldfont-style italicsfont-size absolute/relativefont-variant small-caps
  21. 21. a a a a a a lighter heavier
  22. 22. inches (in) centimeters (cm)millimeters (mm) Absolute sizing points (pt) picas (pc) pixels (px) ems (em) Relative sizing X-height (ex) percentages (%)
  23. 23. line-height absolute/relativeletter-spacing absolute/relativeword-spacing absolute/relativetext-shadow x-pos y-pos #colortext-align left, right, centercolor #color
  24. 24. FontStacks
  25. 25. font-family: Tahoma, Arial, ‘Helvetica’, sans-serifLorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sitamet, consectetur adip- amet, consectetur adip- amet, consectetur adip-isicing elit, sed do eius- isicing elit, sed do eius- isicing elit, sed do eius-mod tempor incididunt ut mod tempor incididunt ut mod tempor incididunt utlabore et dolore magna labore et dolore magna labore et dolore magnaaliqua. aliqua. aliqua.
  26. 26. Resources
  27. 27. Design inspirations creattica.comHow to make you designsClassic book abouttypography, now adaptedfor webHardcore forumBlog

×