Choosing the Right Font

There are so many interesting fonts to choose from, each with their own unique flavor and personality. In the world of web typography (or, the appearance and arrangement of text on web pages), font selection is one of the most basic and important factors to consider. Some fonts that look great in print are not as easy to read on a screen. With so many options to choose from, we're boiling down the basics.

Font Families
It turns out you can choose your family – when it comes to fonts. So take advantage of the opportunity, since it can have a significant impact on your web design. Font "families" are categorized based on similar characteristics. The most popular font families include serif, sans-serif, monospace, fantasy and cursive. Serif and sans-serif are by far the most common fonts used in modern web design.

Serif Fonts are categorized for the strokes, or those little flared extensions on the tips of letters such as "f", "l" and "i". The word "serif" refers to those strokes, or lines. The most popular serif fonts include Times New Roman, Georgia and Book Antiqua.

Sans Serif Fonts are simpler and more straight-forward than the serif fonts, as implied by the name. "Sans" = without and "serif" = strokes. These fonts are without any type of ornamentation or decorative embellishment, and have a bolder appearance. Arial, Verdana, Trebuchet MS and Tahoma are all popular sans-serif fonts.

Cursive Fonts have a more artistic and ornamental design, and are made to look like hand-written strokes. Some cursive fonts have strokes that connect letters together to resemble natural penmanship. Most of these fonts are not very easy to read and are generally not used for large sections of text. Comic Sans MS, Monotype Corsiva, Brushscript M7, Tempus Sans ITC, Lucida Handwriting and Bradley Hand ITC are popular cursive fonts. Since the letters in Comic Sans do not connect, the font is also the most legible cursive font. Luckily, it is also the most commonly available cursive font, likely to be found on most computers.

Fantasy Fonts are highly ornamental. They vary widely in their appearance, and are grouped together for their bold and exaggerated style. Similar to cursive fonts, fantasy fonts are not considered a good choice for presenting readable web content. Common fantasy fonts include Copperplate Gothic Bold, Britannic Bold and Broadway. Impact is the only fantasy font likely to be found on all computer systems, but fantasy fonts can have unpredictable results on the web and are more appropriate for mastheads, banners or headings.

Monospace Fonts are named for the fixed amount of space that each of their letters take up, creating the appearance of old typewriter print. These fonts are ideal for displaying computer code and technical content with their simple, functional style. Courier New and Courier are the most common monospace fonts, and are likely to be present on most computer systems.

Specifying a Font Family
Not all computers are created equally. And not all of them have the same fonts installed. To compensate for this fact, you can specify a series of fonts that browsers can use to display your website's text. Using CSS (Cascading Style Sheets), you can include in your markup a font list of preferred fonts, followed by the name of the font family. Your browser can use this list to substitute fonts based on availability. This way, you still have control over how your text appears.

Here's how this markup would look in a CSS document, or in the <head> tag of a main HTML document, between <style> tags:
body
{
font-family: Arial, Verdana, sans-serif;
}

h1
{
font-family: Georgia, Times, "Times New Roman", serif;
}

.sidebar
{
font-family: "Courier New", Courier, monospace;