Consistent and Readable Type Across Platforms: WebRef Update Feature

Achieving A Consistent and Readable Type Across Platforms

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

What's the best way to implement style sheets? You should create a separate style sheet for each platform and/or browser, according on how much control you want to have. This is much easier than creating a different HTML file for each platform. Plus, if you want to quickly change the look of your site, you simply change the style sheet(s). (Ed. note: We prefer one style sheet that's a compromise across platforms, with relative font sizes.)

Here is an example of two different style sheets for Windows and Mac OS, stored in text files called "win.css" and "mac.css". These are simplified versions of style sheets I use on my site at www.stevestv.com:

win.css

mac.css

td, th, p {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt
 }

.red {
 color: #CC0033
 }

h2, big {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14pt;
 font-weight: bold
 }

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18pt;
 font-weight: bold
 }

small {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 10px;
 color: #666666
}

td, th, p {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12pt
 }

.red {
 color: #CC0033
 }

h2, big {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18pt;
 font-weight: bold
 }

h1 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24pt;
 font-weight: bold
 }

small {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 10px;
 color: #666666
}

There are several things you should take note of about these style sheets.

Different font sizes for Windows and Mac. The sizes are optimized for each platform. For example, the <h1> tag is defined as 24-point Arial or Helvetica because 24 pt on the Mac is approximately equivalent to 18 pt in Windows. Plus, in case Arial isn't installed on the Mac, Helvetica (or the default font) will look half decent at 24 points because on the Mac, certain sizes of Type 1 fonts are optimized for the screen (usually 9, 10, 12, 14, 18, and 24).
The font sizes are absolute (fixed). Specifying "24pt" or "24px" (pixels) means the user can't change the font size, unless they choose to override it in their browser settings or use their own style sheet. (Ed. note: We prefer using relative font sizes in one style sheet, as user's maintain control over how large their type is, not designers.)

Because of the different dpi standards, in Windows 24 "points" is different (larger) than 24 "pixels", but the same on the Mac. You could use just one style sheet and always specify absolute pixel sizes so that they are the same on Mac and Windows, but this gives you less control, since different sizes may look better on each platform. It also doesn't solve the problem of Netscape 4.x for Windows, which always renders fonts about 1 point smaller than IE, even at absolute sizes. To get around this, create a separate style sheet just for Netscape 4 + Windows. In my examples, I compromised by setting <small> at 10px, even though I would have preferred 9px (since I use this tag for fine print) -- because 9px Verdana is illegible in Netscape.
Where possible, the style sheets redefine existing tags for compatibility with browsers that don't support CSS (such as iCab). For example, I use <big> and <small> because those are relative tags which older browsers support (the text will be bigger or smaller, but not necessarily the ideal size). Why did I make <big> and <h2> the same? <h2> automatically inserts a blank line after the tag, but <big> doesn't. This way I can use <big> to get the same effect as <h2> when I don't want the extra line inserted.

Finally, here's how to tell your page to use a different style sheet depending on the browser or platform. This can probably be done with JavaScript, but I found it easier to do with Apache's Server Side Includes, supported by most Web servers. In the <head> of your document, put something like this:

Note: This example assumes your CSS files are in a directory called "includes".

Remember, IE 5 for Mac renders fonts at 96 dpi by default. So this SSI essentially says, "If this is a Mac, but not IE 5, load the Mac style sheet. Otherwise, load the Windows style sheet." If you wanted to load a different CSS file for Netscape, you would add another line that says, "If this is Windows and Netscape 4, load 'netwin.css'" (or whatever).

In a world dominated by Windows and Internet Explorer, it's tempting to just design for one platform and not bother with the rest. By doing that, however, you not only reinforce Microsoft's monopoly, but you risk alienating visitors to your site, and potential customers of your business. At a minimum you should test your site regularly on other platforms. I currently design on Windows and test my site using an excellent Mac emulator, Basilisk II. And if you've never tried style sheets, it's worth experimenting. The principles I've outlined can also be applied to other situations, such as making your site more compatible with wireless devices or WebTV.

More resources:

Building Characters: A Brief History of the Web War -- an exellent Tidbits article explaining font issues in depth.

See Microsoft's Typography on the Web for lots of font and CSS info. Just try to avoid stuff that only works on IE!

Use the WebTV Viewer to see how your site might look on a set-top box.

Wes Reimer has been designing Web sites since 1996. He is currently the Webmaster at Steve's TV, an electronics retailer in Ontario, Canada. He loves to talk about fonts! Drop him a line at wes@stevestv.com.