The ABCs of Web Typography
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

The ABCs of Web Typography

on

  • 2,337 views

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

Statistics

Views

Total Views
2,337
Views on SlideShare
2,333
Embed Views
4

Actions

Likes
3
Downloads
40
Comments
0

1 Embed 4

https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The ABCs of Web Typography Presentation 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