@media, Fine Typography On The Web

by Dave Shea. Downloadable from Dave's website archive.

Typography affects tone. Leading affects readability. Across all platforms and OS's, the designer only has about 10 fonts to rely on being installed - not very good.

• Times New Roman - if you use this, it looks like you've made a mistake, or your style sheet hasn't loaded!
• Arial - really a ripoff of Helvetica, a safe choice, but boring. Read: The Scourge Of Arial
• Verdana / Georgia are a good pair for sans + serif fonts. But they could become non-safe backups in due course as MacOS X will not neccessarily carry them.
• Trebuchet MS / Comic Sans alternatives, but Comic only really any good for doing kiddies stuff.
• Lucida Sans / Palatino (serif) might like to think about them.

Font Survey websites are all very well, but they don't tend to be very representative of the general populace as the only people that fill in the surveys are the sort of folks who care about typography!

Fonts to look out for in future release of Windows (Vista):

• Calibri (sans) - good for body copy
• Cambria - a bit more subtle than Georgia
• Candara - probably best reserved for headlines
• Consolas - a monospaced font which will be great for code examples
• Constantina - better for larger sized text, eg headlines and pullquotes
• Corbel - excellent all-rounder

NEVER USE THE FONT TAG AGAIN!!!

So how do we get sexy fonts on web pages?

• You could embed a font in a page with this:
  

  @font-face { family:myfont; src=url(myfont, eot);
  } in the css, then,
  h3 {font-family: myfont, serif;}
  in the markup
  

  This has its problems, mainly that Font Foundaries are very ansty about you distributing copyrighted fonts.
• Scalable Vector Graphics would be fantastic but most browsers aren't currently supporting SVG.
• sIFR - scalable Inline Flash Replacement. Uses Flash
  to transform text in <h2> tag, say, to a flash object representing the h2. Need to embed some javascript to do it:
  

  <script
  src="sifr/sifr.js"
  type="text/javascript">
  </script>

  Fallbacks - if you don't have JS or flash, you can write a fallback to style the original h2 with CSS as now.
• Image Replacement - two methods: Phark (negative text indent) which can be a bit dodgy for accessibility
• Gilder/Levin - need to look up
• CSS3 - but can't remember what he said about this :-(
  

So what to use for various circumstances?

• CMS - Use CSS or sIFR
• Ensured Control - Use an Image, Image Replacement or sIFR
• Kerning Control - Use Image or IR
• Well-styled - Use Img, IR or possibly sIFR (in due course) but not CSS
• Font Scalability - Use CSS, possibly sIFR later
• Search Engines - Use CSS for best results

References: Typographic Design: Form & Communication
A List Apart - Dynamic Text Replacement
Font Explorer X - windows version due soon.
Googled for a "Flash of unstyled content" - there is a fix for IE.