Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

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

  • Sé el primero en comentar

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

×