Functional Fonts

Fonts and typefaces are a major component of how your site looks, and to a lesser extent, how it lays out. Fonts are important, but thankfully, you don't need to be a professional to make good use of them. Just keep a few simple rules in mind.

Basic terminology

There's a few basic terms you should know when it comes to fonts:

Serif fonts vs. sans-serif fonts

A serif font is one where the letters have slight protrusions on the ends of each stroke. A sans-serif font, naturally, doesn't have these. The font used across this site is Georgia, which is a serif font.

To compare, here's the same sentence in another serif font (Palatino) and then in a sans-serif font (Arial):

Note the ends of the letters, particularly the uppercase C and the lowercase L.

The traditional school of thought is that serif works best in print and sans-serif works best on the screen. This is largely a holdover from when screen resolutions were low and dots per inch counts were lower, but with bigger, sharper screens, this is no longer an issue.

It's often a good idea to mix serif and sans-serif as a point of contrast. Serif fonts are more readable for body text, while sans-serif fonts work better as headers. Ultimately, though, it comes down to preference.

Proportional vs. monospaced

A proportional font is one where each letter takes up only as much space horizontally as it needs. This is traditional. Georgia is a proportional font.

Some fonts are instead monospaced—each letter takes up the same amount of horizontal space. Monospaced fonts are preferred for code and markup, where punctuation often has special importance.

To compare, here's a proportional font (Tahoma) against a monospaced font (Courier New):

If your site is tech-focused and code or terminal output is prominently displayed, a monospaced font might be appropriate. Meanwhile, if your site text is more traditional and meant to be read like an essay or a novel, proportional fonts are fine.

Font weight

Each font has a certain "weight" to it. This generally refers to the thickness of each stroke. Weight not only sets the tone of the font (more on that in a moment), but how readable the font will be at a certain size. Heavy fonts are good for headers, but not so much for body text, where everything is smaller and closer together.

Often, fonts will be grouped into a "family", with different fonts in the family having either different weights or different styles. Picking fonts from the same family lets you keep a consistent look while contrasting weights.

Here's a comparison of normal Arial and Arial Black, which is a much heavier font:

Ground rules

Let's establish a few rules for making effective use of fonts:

Limit the amount of fonts used

Ideally, you should only use one or two fonts on a single page. This keeps the page looking consistent, and more important, it reduces the amount of time the page takes to load. This is doubly important if you're loading in custom fonts of your own creation or ones taken from Google Fonts; each one will massively increase the page load time. It's not worth making a text site slow to a crawl because of font abuse.

Pick fonts effective for your site's tone

Fonts have a tone to them. A heavy, serif font is very serious, traditional, and demands attention, while a thinner, sans-serif font is more casual, or more modern in appearance. This is often the problem cited with Comic Sans: using it for a resume or a memo is out of place.

I used Georgia on this site for its readability and seriousness. It's an effective font for body text and information, or anything structured in paragraphs.

Contrast is important

Different bits of text have different purposes. Headings, because their purpose is to split up the page and denote sections, should be more thicker and demand attention. Of course, if your paragraphs were in the same font, it would become fatiguing. Contrast your fonts and weights.

This is where mixing sans-serif and serif fonts becomes especially effective. Verdana is wide, heavy, and ideal for headings, which is why I used it for those. Verdana also contrasts well with the thinner, more intricate Georgia.

The concept of "web-safe" fonts

Keep in mind that there's no guarantee your visitors have the same fonts as you. This is especially true between operating systems and on mobile devices. Missing fonts can cause your page to look totally different from what you'd expect, or in extreme cases, render incorrectly.

A "web-safe" font is one you can reasonably expect most of your visitors to have installed. Times New Roman is a web-safe font, as are Georgia and Arial. Courier New is a good example of a web-safe monospaced font. You should rely on web-safe fonts, as they're quick to load and will look consistent across most devices.

Your other recourse is to pack in fonts. To do this, use the @font-face rule at the start of your stylesheet, replacing "Font Name" with the name and "fontfile.ttf" with the URL for your font, relative to your stylesheet:

@font-face {
	font-family: "Font Name";
	src: url("fontfile.ttf"); }

You can then reference this font like any other font on the user's computer by the "Font Name", provided your stylesheet is pointing correctly at it. (Using a relative URL like this assumes the font file is uploaded to your server.)

Using fonts in stylesheets

To actually make use of a font, use the font-family declaration:

body {	font-family: Courier; }

Yep, it's that simple. Your element will now display using that font, provided the font is installed or it's pointing at the right file on your server.

Font stacks

The nice thing about specifying fonts in a stylesheet is that you can set fallbacks. If your chosen font doesn't exist on the visitor's computer, you can set up alternate fonts to be used instead. A list of fallbacks is called a font stack.

body { font-family: Consolas, "Andale Mono", "Lucida Console", Monaco, "Courier New", Courier, monospaced; }

To make use of a font stack, specify your preferred font first (encasing it in quotes if there are spaces in its name), and then list others, separating each one with a comma. There's no maximum or minimum amount of fonts you can have in a stack. The last font in the stack should be a generic "last resort" font, like serif or monospaced. The browser will pick this one if none of the ones in your stack are available.

I'd especially encourage you to look through the links at the bottom of this guide. There's some great resources for picking fonts and making good use of font stacks, including examples.