My Personal Technical Resource

Web-safe fonts with CSS

Web-safe fonts is a common problem that I run into when cleaning up web pages for customers. My primary goal when cleaning up or rewriting a web page is to try and make things consistent across all platforms and browsers. This is easier said than done in many cases.

Not only are bad font declarations to blame, not all browsers render fonts the same way. This can create a problem with certain layouts, especially image heavy layouts where images need to be in precise locations. The best way to tackle this problem is to reset the CSS to values that will be applied to all browsers. For simple layouts, you can often get away with only resetting the default type selector ‘*’, for example:

* {margin:0;padding:0;}

This will reset the margins and padding values on all type selectors that support those attributes. Sometimes you will want or need to take it to another level. Instead of writing my own CSS reset library, I typically use subsets of the YUI Library, primarily the CSS reset code. You only need to add one line to your section like the following:

  <link rel="stylesheet" type="text/css" href="">

This resets a ton of CSS and sets reasonable values that render almost 100% the same across all browsers and platforms. Additionally, Yahoo! maintains and updates this as necessary, so I don’t have to worry about figuring out new browsers. You should include that line first, before any other CSS inclusions.

CSS defines five generic font families: serif, sans-serif, cursive, fantasy, and monospace. These generic font families give the web browser a hint on which font to display if one of the specified fonts is not available. Plus, each operating system has it’s own collection of fonts with can be almost identical, but named differently. This makes it harder to use standard fonts. You can include specific fonts in your web pages, but it’s not in the scope of this article to cover that. Besides, it will cause your page to load slower because the browser has to download each font before it can render the page. So it’s best to use the default fonts if you can. NOTE: I have not ever seen anyone use the fantasy font family and would not recommend using it.

I have my own base CSS library because I like to define my own classes for the fonts, sizes, bold, etc. This allows me to make tweaks that affect the whole page or site, without having to go through all the HTML to update.

Here is an excerpt of my base CSS in respect to web-safe fonts:

/* Class selectors based on font size */
.xx-small {font-size:xx-small;}
.x-small {font-size:x-small;}
.small {font-size:small;}
.medium {font-size:medium;}
.large {font-size:large;}
.x-large {font-size:x-large;}
.xx-large {font-size:xx-large;}

/* Class selectors based on font attributes */
.bold {font-weight:bold;}
.capitalize {text-transform:capitalize;}
.center {text-align:center;}
.italic {font-style:italic;}
.justify {text-align:justify;}
.lowercase {text-transform:uppercase;}
.overline {text-decoration:overline;}
.normal {font-style:normal;font-weight:normal;text-decoration:none;text-align:left;text-transform:none;}
.strike-thru {text-decoration:line-through;}
.underline {text-decoration:underline;}
.uppercase {text-transform:uppercase;}

/* Class selectors based on font family */
.wide-sans-serif {font-family:Verdana,Geneva,sans-serif;}
.narrow-sans-serif {font-family:Tahoma,Arial,Helvetica,sans-serif;}
.wide-serif {font-family:Georgia,Utopia,Palatino,'Palatino Linotype',serif;}
.narrow-serif {font-family:'Times New Roman',Times,serif;}
.monospace {font-family:'Courier New','Courier',monospace;}

As you can see from the example above, you want to group certain fonts together which are closely related and have similar aspect ratios. More importantly, though, you want to make sure that you include fonts that will be available to all of your surfers so that they can view your site the way you designed it.

Using CSS like this is a little more work than what many people do, in my experience, but I think it’s a good practice to take the extra step. It helps make your HTML more readable and it’s easier to see what CSS is being applied to a given tag. Here is a simple example based on the CSS above:

  <title>CSS Example</title>
  <link rel="stylesheet" type="text/css" href="" />
  <link rel="stylesheet" type="text/css" href="styles.css" /> <!-- My CSS file -->
 <body class="narrow-serif"> <!-- Set the default font family -->
  <h1 class="xx-large bold">This is a H1 tag</h1>
  <h2 class="x-large bold italic">This is a H2 tag</h2>
  <h3 class="large bold">This is a H3 tag</h3>
  <p class="justify underline monospace">This paragraph is in the monospace font family and underlined</p>

So from this example you can see that it’s easy to determine which attributes are applied to a given tag. I further extend this concept to include other elements I commonly use, such as colors.

In the end it’s definitely more work to accommodate web-safe fonts, but if you want consistency, you don’t have much choice.

Download Web-safe fonts with CSS as PDF

Tags: , , , , , , ,