the abcs of web typography
DESCRIPTION
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.comTRANSCRIPT
with Chris Castiglione Twitter: @castig
WEB TYPOGRAPHYTHE ABCS OF
www.generalassemb.ly
Typography has one plain duty before it and that is to convey information in writing.
-Emil Ruder
1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS
1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS
1. The Anatomy of Web Typography
2. @FontFace
3. Responsive Design: Pixels vs. EMS
THE ABCS OF WEB TYPOGRAPHY
1. ANATOMY
Typeface vs. font?a typeface is the design of the letterform
a font is the delivery mechanism
n n THE ABCS OF WEB TYPOGRAPHY: TYPEFACE
serif sans-serif
X-HEIGHT
x x x garmond times new roman georgia
WEB-SAFE FONTS
Times New Roman
Comic Sans
HelveticaVerdana Georgia
Courier
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.
THE ABCS OF WEB TYPOGRAPHY
2. @FONTFACE
FUTURAEXPORT IMAGES. DESKTOP LICENSING. GOOD TIMES.
heading-futura.jpg
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)
STOP
Stop
THE ABCS OF WEB TYPOGRAPHY
3. EMS VS. PIXELS
THE ABCS OF WEB TYPOGRAPHY
target ÷ context = result
10px ÷ 16px = 0.625em
24px ÷ 16px = 1.5em
USING EMS
PROS• flexible
• resizable
• users can set control text size
CONS• Math: more of it
• More complicated to keep track of than pixels