Standard Fonts on Windows and Macintosh

What Your Readers See if You Use Fonts They Don't Have

White block letters spelling out FONTS
Caspar Benson / Getty Images

One of the best things about CSS is that you can use it to change the default fonts chosen by the browser manufacturers to a font that is more in keeping with your brand, your style, or your tastes. But, if you choose a font like "Goudy Stout" or "Kunstler Script" you can't be sure that everyone who views your page will see your fonts.

The Only Way to Guarantee a Font Choice is With Images

If you absolutely, positively must have a specific font, such as for a logo or other branding element, then you should use an image.

But remember that images make your Web sites slower and harder to read. Since they can't be scaled, anyone who needs to make the font larger to read it won't be able to. Also, it's just not practical to make huge chunks of content into images.

I don't recommend using images for text. I feel the drawbacks outweigh the potential benefits. After all, the Web is not print, and good Web designers are flexible with their vision of their design.

Choose Your Favorite Font, Then Add More Common Fonts After It

If you absolutely must have "Papyrus" as your font for your text, you can still use CSS to style the fonts. Just make sure to use a font series so that customers who don't have that font but might have a different one will still see a design close to your vision. List the font families in your preferred order. In other words, if Papyrus looks best, list it first. The follow it with the font family that looks second best, and so on.

Always end your font list with a generic font. This will ensure that even if none of the fonts you've chosen exist on the machine the page will still display with the correct font type, even if it's not the right family.

Use Both Windows and Macintosh Fonts in Your List

While there are lots of fonts that have the same name on the Macintosh as on Windows, there are many that are different.

If you include both a Windows font and a Macintosh font, you'll be sure your pages look their best on both systems.

Some of the common fonts for the systems are:

  • Common Macintosh Fonts
  • Common Windows Fonts
  • Compare Windows and Macintosh Fonts

Here is an example of a good font list:

font-family: Papyrus, Lucida Sans Unicode, Geneva, sans-serif;

This list contains my favorite font (Papyrus), a Windows font (Lucida Sans Unicode), a Macintosh font (Geneva), and finally a generic font family (sans-serif).

Remember, You Don't Have to Match the Generic Font to Your Favorite Font's Type

One of my favorite fonts is Kunstler Script, which is a cursive font. But when I use it, I almost never list "cursive" as the generic font, because most Windows systems use Comic Sans MS as the generic cursive font. And I don't particularly like that font. Instead, I usually tell the browsers to use a sans-serif font if they don't have Kunstler Script. That way, I know that at least text will be readable, if not in the exact style I wanted.