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