When you choose a font, or set of fonts, for your website, you are setting its tone and style. Choosing a stern, conservative font sends a very different message than selecting one that is more whimsical. If you want to change things up a bit on the font front, it's useful to start with some background information on what defines a font, cross browser and performance considerations and testing.
Some fonts are formal, some are a little more laid back
Fonts come in two styles, serif and sans serif. If you’re not familiar with the difference, a serif font adds little feet to the ends of the characters. A sans serif font is cleaner, without the serif bits.
Serif and sans serif fonts are both common. Typically, books use serif fonts, where online sites seem to skew more towards sans serif. For example, if you go to Google®, the results are shown in Arial, one of the most-commonly-used sans serif fonts.
What if you came to a page and wanted to know what fonts it uses? In the Google instance, looking at the CSS of the page, you’ll find that the CSS shows font-family: arial, sans-serif. This instructs the Web browser to use the Arial font if it is present on the user's system, otherwise pick a related font in the sans-serif family. Why does Google specify both? You can’t assume all browsers will have all the fonts desired. It is best to provide a fallback for those times when your primary font is unavailable. (This is mostly for compatibility with older browsers.)
Cross browser display
In the early days of the Web, Netscape® held more than 80 percent of the market share. If you designed your site to support Netscape, you knew a majority of users would be happy. Nowadays, you not only have to worry about multiple browsers like Internet Explorer®, Chrome™, Safari®, Opera™, and Firefox®, you also have to worry about different size devices like tablets, phones, laptops, and desktops. What might look fantastic and load quickly on an Apple® MacBook Air with Safari could look horrible on a Windows-based PC running Internet Explorer. Note that not all browsers render fonts exactly the same, so it's important to know the traits of your user base before committing to a font approach.
Using too many fonts can impact performance
The more fonts you use, the slower your site will load. To help improve performance, a good rule of thumb is to limit yourself to at most two custom fonts. But what fonts should you use? To help with selection, Google Fonts is a great resource which also shows the impact on load time.
Test your fonts
Once you’ve decided on a font, make sure you’ve checked for browser compatibility and how the font will look in different sizes and styles. The most common styles to worry about are bold, italic, and underline. Depending upon your needs, ALL CAPS, strikethrough, and colors might be considerations as well. Also, note there is such a thing as font overload. Isolated, each element might look just fine, but when combined, the overall look and feel of a site might suffer.
I want your font
If you’re on a site and just love the look of a font there, how do you find out the name? If you use Chrome or have the Firebug extension in Firefox, there is an Inspect Element menu item in the popup that shows a host of details when you right click over the item on the page. As long as you right clicked on the element whose font you want to discover, you can look in the "Computed" tab on the right to find out which font was used once the box full of code pops up.
A final note
Simplicity is key. To have your site look the best, limit yourself to just one or two fonts. Most designers keep the main body text in a sans-serif font unless you want your site to look more bookish.
These are just a few starters. Want the deep dive? Check out Finding and Using Fonts for Your Website by Julie Deneen for additional fonty goodness.
For more great tips, check out the GoDaddy Tool Kit on BlogHer.
