The ABCs of Web Typography

2,491 views

Published on

My class @ General Assembly: The ABCs of Web Typography.

Here we look at:
1) Best-practices & common mistakes: relative line-height, fallbacks, and more.
2) @Font-face
3) Responsive Design: Pixels vs. Ems

More info on classes can be found at:
www.generalassemb.ly

My portfolio is at:
www.ccastig.com

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,491
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
51
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The ABCs of Web Typography

  1. 1. www.generalassemb.lyTHE ABCS OFWEB TYPOGRAPHY with Chris Castiglione Twitter: @castig
  2. 2. Typography has one plain duty before it andthat is to convey information in writing. -Emil Ruder
  3. 3. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  4. 4. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  5. 5. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  6. 6. THE ABCS OF WEB TYPOGRAPHY1. ANATOMY
  7. 7. Typeface vs. font?a typeface is the a font is thedesign of the letterform delivery mechanism
  8. 8. n nTHE ABCS OF WEB TYPOGRAPHY: TYPEFACE serif sans-serif
  9. 9. X-HEIGHT x x x garmond times new roman georgia
  10. 10. WEB-SAFE FONTS Helvetica Georgia Times New Roman Verdana Comic Sans Courier
  11. 11. GENERIC FONT FAMILIESserif: The quick brown fox jumps over the lazysans-serif: The quick brown fox jumps over the lazycursive: The quick brown fox jumps over the lazymonospace: The quick brown fox jumps over the lazy dog.
  12. 12. THE ABCS OF WEB TYPOGRAPHY2. @FONTFACE
  13. 13. FUTURAEXPORT IMAGES. DESKTOP LICENSING. GOOD TIMES.
  14. 14. heading-futura.jpg
  15. 15. FONT FORMATSTTF - Works in most browsers except IE and iPhone.EOT - Internet Explorer onlyWOFF - Compressed, emerging standard(essentially OpenType or TrueType with compressionand additional metadata).SVG - iPhones /iPads (ie. iOS Webkit)
  16. 16. STOP
  17. 17. Stop
  18. 18. THE ABCS OF WEB TYPOGRAPHY3. EMS VS. PIXELS
  19. 19. THE ABCS OF WEB TYPOGRAPHYtarget ÷ context = result24px ÷ 16px = 1.5em10px ÷ 16px = 0.625em
  20. 20. USING EMSPROS• flexible• resizable• users can set control text sizeCONS• Math: more of it• More complicated to keep track of than pixels

×