Typography for the Screen

March 15, 2005 - Joshua Darden, Mike Davidson, Shaun Inman

Josh

For today, "screen" means computer screen.

Two forms of fonts: text and display

• text usually a core font
• display often not

Trade-off between utilitarian but legible & interesting

E.g. Arial characters look very similar, not most legible at small sizes
- Georgia and Verdana address this

"Coolness is important"

• typefaces for specific occasions
• type isn't just about text, it should capture the spirit of the content
  example: 300-year-old Erasmus book

Mike

Found typography examples: notice that the more letters you see, the more readable the font needs to be

ESPN.com redesign example
- use typography and layout to show something's important

Shaun

Flash repoacement: replacing h tags with Falsh movie containing correct typeface

76% method: set body font size to 76%, then size rest of text with ems

Image replacement
- img background

Now technique used is sIFR (scalable Inman Flash Replacement)

Recommended font sizing: body 76%, ems for all others

• shown to be most consistent (12 px) across browsers and OS's
• ems are relative %-wise to parent element
• if you like smaller fonts, 62.5% on body is 10px across browsers

Embedding fonts on web page
- stumbling blocks: technological, licensing

Suggestion: need an easy way to purchase subset of a font

There's PHP font replacement out there, too

• sIFR good for high bandwidth site
• PHP good for slow server

Panelists' f avorite fonts:

• FF din schriften
• Lucida Grande for body copy
• Mythos for display
• Myriad for print
• Lexicon

Not recommended to use transparency with sIFR, though some people do