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

1. www.generalassemb.ly
THE ABCS OF
WEB TYPOGRAPHY
with Chris Castiglione
Twitter: @castig

2. Typography has one plain duty before it and
that is to convey information in writing.
-Emil Ruder

3. 1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS

4. 1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS

5. 1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS

6. THE ABCS OF WEB TYPOGRAPHY
1. ANATOMY

11. Typeface vs. font?
a typeface is the a font is the
design of the letterform delivery mechanism

12. n n
THE ABCS OF WEB TYPOGRAPHY: TYPEFACE
serif sans-serif

15. X-HEIGHT
x x x
garmond times new roman georgia

16. WEB-SAFE FONTS
Helvetica Georgia
Times New Roman Verdana
Comic Sans Courier

17. GENERIC FONT FAMILIES
serif: The quick brown fox jumps over the lazy
sans-serif: The quick brown fox jumps over the lazy
cursive: The quick brown fox jumps over the lazy
monospace: The quick brown fox jumps over the lazy dog.

18. THE ABCS OF WEB TYPOGRAPHY
2. @FONTFACE

21. FUTURA
EXPORT IMAGES. DESKTOP LICENSING. GOOD TIMES.

22. heading-futura.jpg

23. FONT FORMATS
TTF - Works in most browsers except IE and iPhone.
EOT - Internet Explorer only
WOFF - Compressed, emerging standard
(essentially OpenType or TrueType with compression
and additional metadata).
SVG - iPhones /iPads (ie. iOS Webkit)

24. STOP

25. Stop

27. THE ABCS OF WEB TYPOGRAPHY
3. EMS VS. PIXELS

31. THE ABCS OF WEB TYPOGRAPHY
target ÷ context = result
24px ÷ 16px = 1.5em
10px ÷ 16px = 0.625em

32. USING EMS
PROS
• flexible
• resizable
• users can set control text size
CONS
• Math: more of it
• More complicated to keep track of than pixels