How to Choose a Web Safe Font for Functionality in CSS3 - dummies

How to Choose a Web Safe Font for Functionality in CSS3

By John Paul Mueller

There’s no one web safe font for every platform unless you want to use the most generic font types in CSS3. Developers want to maintain a certain appearance, so it’s important to include specific fonts first, and then fallback fonts that are less specific. Using this approach ensures that everyone will be able to see your page as you originally intended to present it, at least to some degree.

When you’re working with a generic font, its appearance will vary slightly. With this in mind, here’s a list of web safe serif fonts (whose characters use a line to finish the main stroke of each character, such as the lines that appear under the main lines of an M); the most-specific font appears first and the least-specific font appears last.

  • Georgia, serif

  • “Palatino Linotype”, Book Antiqua, Palatino, serif

  • “Times New Roman” Times, serif

Each of these fonts has a slightly different feel, but sometimes the best you can do is a simple serif font — the last choice in each list. The following list describes common sansserif fonts (those whose characters lack serifs). Again, the most specific font appears first and the least specific appears last.

  • Arial, Helvetica, sans-serif

  • “Arial Black” Gadget, sans-serif

  • “Comic Sans MS”, cursive, sans-serif

  • Impact Charcoal, sans-serif

  • “Lucida Sans Unicode” “Lucida Grande”, sans-serif

  • Tahoma Geneva, sans-serif

  • “Trebuchet MS” Helvetica, sans-serif

  • Verdana Geneva, sans-serif

The last group of fonts is for monospace type, where each letter takes up precisely the same amount of space (as did the output of older typewriters). Monospace fonts are normally used for application code, but you can use them anywhere you want to create the appearance of the typewritten page as well. The following list presents common monospace fonts with the most-specific first and the least-specific last.

  • “Courier New” Courier, monospace

  • “Lucida Console” Monaco, monospace

These are common fonts. However, you might find that you want to use something a little less common. Fortunately, there are sites where you can see lists of accepted fonts. In fact, the CSS Font Stack makes it easy to select a font by seeing how it looks first and then clicking a single button to copy the required code to the clipboard.

For example, when you click on Arial at that site, what you actually get is font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif.