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

Like this? Share it with your network

Share

The ABCs of Web Typography

  • 2,398 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,398
On Slideshare
2,394
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
41
Comments
0
Likes
3

Embeds 4

https://twitter.com 4

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