Your SlideShare is downloading. ×
0
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
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
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
×

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

The ABCs of Web Typography

1,944

Published on

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

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
1,944
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
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. www.generalassemb.lyTHE ABCS OFWEB TYPOGRAPHY with Chris Castiglione Twitter: @castig
  • 2. Typography has one plain duty before it andthat is to convey information in writing. -Emil Ruder
  • 3. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  • 4. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  • 5. 1. The Anatomy of Web Typography2. @FontFace3. Responsive Design: Pixels vs. EMS
  • 6. THE ABCS OF WEB TYPOGRAPHY1. ANATOMY
  • 7. Typeface vs. font?a typeface is the a font is thedesign of the letterform delivery mechanism
  • 8. n nTHE ABCS OF WEB TYPOGRAPHY: TYPEFACE serif sans-serif
  • 9. X-HEIGHT x x x garmond times new roman georgia
  • 10. WEB-SAFE FONTS Helvetica Georgia Times New Roman Verdana Comic Sans Courier
  • 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. THE ABCS OF WEB TYPOGRAPHY2. @FONTFACE
  • 13. FUTURAEXPORT IMAGES. DESKTOP LICENSING. GOOD TIMES.
  • 14. heading-futura.jpg
  • 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. STOP
  • 17. Stop
  • 18. THE ABCS OF WEB TYPOGRAPHY3. EMS VS. PIXELS
  • 19. THE ABCS OF WEB TYPOGRAPHYtarget ÷ context = result24px ÷ 16px = 1.5em10px ÷ 16px = 0.625em
  • 20. USING EMSPROS• flexible• resizable• users can set control text sizeCONS• Math: more of it• More complicated to keep track of than pixels

×