N-Share: Typography

  • 209 views
Uploaded 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.

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
209
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. APPLIEDTYPOGRAPHYA short introduction into thetheory and usage of typePrepared by Aishah and Alvin
  • 2. What isTYPOGRAPHY?
  • 3. Let’s start from the basics.
  • 4. x x-heightBaseline type Kerning leading
  • 5. Font SerifFAMILYS Sans-serif
  • 6. Oldstyles Made by writers e.g Garamond
  • 7. Transitional Made by engineers e.g Times New Roman
  • 8. Let’s compare x-height!also look at angled stress and counter
  • 9. Modern Made by stylistse.g Bauer Bodoni
  • 10. SlabMoving towards sans serif e.g Rockwell
  • 11. Geometric Perfect circles e.g Century Gothic
  • 12. HumanistMatching with old styles e.g Gill Sans
  • 13. GrotesqueMatching with transitional e.g Franklin Gothic
  • 14. Moving on.
  • 15. Kerning & It matters a lot.LEADING
  • 16. x x-heightBaseline type Kerning leading
  • 17. See it live!
  • 18. WebTYPOGRAPHY
  • 19. Short introduction toChrome Developer Tools Follow closely!
  • 20. Attributes Optionsfont-weight 100, boldfont-style italicsfont-size absolute/relativefont-variant small-caps
  • 21. a a a a a a lighter heavier
  • 22. inches (in) centimeters (cm)millimeters (mm) Absolute sizing points (pt) picas (pc) pixels (px) ems (em) Relative sizing X-height (ex) percentages (%)
  • 23. line-height absolute/relativeletter-spacing absolute/relativeword-spacing absolute/relativetext-shadow x-pos y-pos #colortext-align left, right, centercolor #color
  • 24. FontStacks
  • 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. Resources
  • 27. Design inspirations creattica.comHow to make you designsClassic book abouttypography, now adaptedfor webHardcore forumBlog