www.generalassemb.lyTHE ABCS OFWEB TYPOGRAPHY                with Chris Castiglione                           Twitter: @ca...
Typography has one plain duty before it andthat is to convey information in writing.                               -Emil R...
1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
THE ABCS OF WEB TYPOGRAPHY1. ANATOMY
Typeface vs. font?a typeface is the          a font is thedesign of the letterform   delivery mechanism
n nTHE ABCS OF WEB TYPOGRAPHY: TYPEFACE              serif                    sans-serif
X-HEIGHT           x x x           garmond   times new roman   georgia
WEB-SAFE FONTS  Helvetica         Georgia  Times New Roman   Verdana  Comic Sans        Courier
GENERIC FONT FAMILIESserif: The quick brown fox jumps over the lazysans-serif: The quick brown fox jumps over the lazycurs...
THE ABCS OF WEB TYPOGRAPHY2. @FONTFACE
FUTURAEXPORT IMAGES. DESKTOP LICENSING. GOOD TIMES.
heading-futura.jpg
FONT FORMATSTTF - Works in most browsers except IE and iPhone.EOT - Internet Explorer onlyWOFF - Compressed, emerging stan...
STOP
Stop
THE ABCS OF WEB TYPOGRAPHY3. EMS VS. PIXELS
THE ABCS OF WEB TYPOGRAPHYtarget ÷ context = result24px ÷ 16px = 1.5em10px ÷ 16px = 0.625em
USING EMSPROS• flexible• resizable• users can set control text sizeCONS• Math: more of it• More complicated to keep track ...
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
The ABCs of Web Typography
Upcoming SlideShare
Loading in...5
×

The ABCs of Web Typography

2,076

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,076
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×