Your SlideShare is downloading. ×
N-Share: Typography
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

N-Share: Typography

214
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.

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
214
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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