Yorkville High School Computer Science

Web Design :: Lessons :: Typography

Choosing a Font

Choosing a font is nearly as important as choosing colors for your website, but it definitely represents a different challenge. If you choose a font for your web page you have to keep in mind that if a visitor to your site does not have the font installed on their computer then they won't see your site as you intend. Because of this you need to make sure your font choices will degrade gracefully.

A good website to use to help you pick your fonts is Google Fonts. The site will let you compare different fonts so you can see which you like best.

"Web Safe" Fonts

There are a few fonts that are considered "web safe" because they are installed by default on both Windows and Macintosh computers. Even these fonts aren't 100% safe, however, because visitors from other platforms such as cell phones may not have all the "web safe" fonts.

Arial:

This is a sans-serif font. Serif and sans-serif fonts will be described later.

Arial Black:

This is a heavy font that is also in the sans-serif family.

Comic Sans MS:

This fantasy (or novelty) font was designed at Microsoft in 1994 to imitate the script in comic books.

Courier New:

This is a monospace font that was the standard font for typewriters and was commissioned by IBM in the 1950s.

Georgia:

This is a transitional serif font designed by Microsoft in 1993. It is a popular alternative to Times New Roman.

Impact:

This compact sans-serif font was designed in 1965 and is intended for use in headlines.

Times New Roman:

This serif font was commissioned by The Times of London in 1931 and is widely used for books. The original version was called Times Roman. Times New Roman is a version of the font that was created by Microsoft.

Trebuchet MS:

This is a "humanist" sans-serif font that was designed at Microsoft in 1996. Microsoft refers to it as a "good web design font." It features a few unique characteristics such as a dollar sign ($) with a line that doesn't extend, an exclamation point (!) with a large, round dot, and a low bar in the capital A.

Verdana:

This is another humanist sans-serif font designed by Microsoft. A humanist font has some calligraphic figures. This font has a bug with accent marks so its use should be carefully considered if you plan on using accent marks or other diacritics above letters.

Font Families

Every font falls into one of the following font families. It is important to recognize the font family for your font choice since you will need it when declaring font families in Dreamweaver.

Serif Fonts

A serif is a finishing stroke at the bottom and top of letters. This was the main font type used until the early 1900s. There are a few different types of serif fonts as it has evolved over the years.

Sans Serif Fonts

These fonts were introduced in the late 1800s and were loathed for a time. By the 1920s, however, some people thought the serif would be eliminated. Obviously serif fonts are still used nowadays, but the sans serif has increased in popularity. On the web sans serif fonts are generally used for body text because they are easier to read.

Cursive Fonts

Cursive fonts are a symbol of humanity but unlike the handwriting of some people (especially Mr. Miller's) cursive fonts are always legible.

Monospace Fonts

Monospace fonts have the same space in between each letter so if two sentences have the same number of letters they will take up the same amount of space. While you may not find a use for them on your website they are still in use by coders and accountants who need characters to line up.

Fantasy Fonts

Fantasy fonts are many times available for free online, unlike other font families, but this is because they can be less legible than traditional fonts. When used sparingly they can add some personality to your website.

Font Families in Dreamweaver

When you want to use a specific font you need to declare use font-family property in Dreamweaver or follow the directions from Google Fonts. If you are using Dreamweaver's built-in fonts, you will have to follow the steps below.

1. Select the text you want to change to your font.
2. Click on the "CSS" section of the Properties pane.
3. Click on the "Font" section and choose "Manage Fonts..."
4. Select the font you want to add and the font will be added to the Font list.
5. Choose the newly-added font from the font list.

Font Face

If Google Fonts and Dreamweaver don't have the font you want, you can create your own rule for a custom font. The @font-face rule allows you to embed fonts on your website so even users without the font installed on their computer can see what you intended.

To create a @font-face rule you would add the following to your CSS file:

@font-face {
   font-family: 'AG';
   src: url('../fonts/aubrey_graham-webfont.eot');
}

Make sure you have permission to use the font in this way. Many free fonts can be found at sites such as Font Squirrel and Da Font.

To use the font above you would use the font-family name that you specified in a normal font-family hierarchy like so:

.myFont {
   font-family: 'AG', Impact, sans-serif;
}

The @font-face rule does not work in many older browsers, but as long as you use the font-face in a font-family hierarchy you should be safe. It is also important to note that not all browsers support the same font types. Internet Explorer is the worst offender, but you can get around it by using a tool such as Font Squirrel's Webfont Generator to create different versions of your font.