Today’s Menu

Presentation Summary

Words of Wisdom

Robert Bringhurst quote from The Elements of Typographic Style

Typography affects Tone

Party invitations in contrasting styles to affect tone difference.

Typography affects Legibility

Similar text with spacing difference to illustrate legibility.

Times New Roman

Times New Roman examples

Times New Roman (coudal.com)

Times New Roman example: coudal.com

Arial

Arial examples

Arial (cnn.com)

Arial example: cnn.com

The Scourge of Arial

The Scourge of Arial

Verdana & Georgia

Verdana and Georgia examples

Trebuchet MS

Trebuchet MS examples

Trebuchet MS (phark.typepad.com)

Trebuchet MS example: phark.typepad.com

Comic (ugh) Sans

Comic (ugh) Sans examples

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Comic Sans Hall of Shame

Lucida Sans & Palatino

Lucida Sans and Palatino examples

Font Survey

Font Survey Results

New Fonts in Vista: Calibri

Vista font: Calibri

New Fonts in Vista: Cambria

Vista font: Cambria

New Fonts in Vista: Candara

Vista font: Candara

New Fonts in Vista: Consolas

Vista font: Consolas

New Fonts in Vista: Constantia

Vista font: Constantia

New Fonts in Vista: Corbel

Vista font: Corbel

Concerning Accessibility & Readability

Concerning Accessibility and Machine-readability

Can Screenreaders Read It?

Screenreaders

Can Mobile Devices Read It?

Mobile Device Readability

Can Google Read It?

Mobile Device Readability

Font Tags: Just Say No

Font tags: Just Say No

Embedded Font Tag Horror

Embedded font tags

Technique: CSS Formatting

CSS Formatting code example

CSS Font Sizing Nightmares

CSS Font Sizing Nightmares

Technique: Font Embedding

Font Embedding code example

Technique: SVG

SVG

Technique: sIFR

sIFR code example

sIFR Fallbacks

sIFR Fallbacks

Technique: HTML Image Element

img element code example

Technique: Image Replacement

Image Replacement code example

Image Replacement: Phark Method

Phark Method

Image Replacement: Gilder/Levin Method

Gilder/Levin Method

Image Replacement: CSS3 Method

CSS3

Technique Summary: 4 Best

4 Best Techniques: img, CSS, Image Replacement, sIFR

Scenario: CMS

Will work: CSS, sIFR. Won't work: img, Image Replacement

Scenario: Ensured Control

Will work: img, Image Replacement, sIFR. Won't work: CSS

Scenario: Kerning Control

Will work: img, Image Replacement. Won't work: CSS, sIFR

Scenario: Styling & Decoration

Will work: img, Image Replacement. Won't work: CSS. Might work: sIFR

Scenario: Font Scalability

Will work: CSS. Won't work: img, Image Replacement. Kind of works: sIFR

Scenario: Search Engine Visibility

Will work: CSS. Potentially problematic: img, Image Replacement, sIFR

Recommended Resources

The Elements of Typographic Style, Typographic Design: Form and Communication, FontExplorerX