What’s a Web Safe Font? Understanding Typefaces On The Web

Designing with Web Safe Fonts to Maximize the User Experience

Do you have a website, send out electronic newsletters, or send email campaigns? Have you ever experimented with the different fonts (typefaces) available? If you have, you probably discovered there are numerous fonts available on your computer, in some cases 100-200 or more. How then do you decide which font to use?

This article will give you a brief overview of why using a web-safe font stack is essential for ensuring that views see the electronic pieces of content you send the way you intended so they can achieve the desired effect.

Where Do We Start with Fonts?

First, even though thousands of fonts are available to us, each computer usually only has a hundred or so installed for use. Different operating systems and various other files or programs you install add fonts to your computer and increase that number. Those fonts are usually compatible across programs, meaning you will be able to use all of your system fonts in any program. Let’s say your computer came pre-installed with 150 fonts. Then you bought a typical software program that added 50 more fonts to your computer. You now have 200 fonts you will be able to use in any program that is designed to allow font selection.

Isn’t that great? You instantly have more fonts to choose from. Suppose you’re working in print materials or graphics. In that case, you actually do have the freedom to choose whatever fonts you want. However, suppose you are not printing the final version but instead delivering your material via the internet. In that case, whether it be on a website, by email, or any other type of electronic media, you don’t actually have as much freedom as you may think. There are several factors to consider that could influence your choice, including perception, usability and availability.

Perception.

The typeface you select needs to reflect the mood of your message accurately. Do you want the tone conveyed to your reader to be formal or informal, friendly or serious, professional or playful? If the message is of a professional and formal nature, then your font should accurately portray that. But if the message is to a group of friends inviting them to a party, you can have a little fun and take a more informal approach with your fonts. Always consider the audience for which the piece is intended. Then choose a font that achieves the perception you desire.

Usability.

After establishing the intended audience for your message, you need to make sure they can actually read it! Ensuring good usability is essential to getting your message across to your target audience. Many fonts are hard to read at small sizes like 8 point or 10 point. Cursive and italic fonts can be hard on the eyes and are strongly discouraged for the purposes of main bodies of text. Italics should only be used for emphasis or as graphical elements. You also don’t want your font too large, as this can make it difficult for the eyes to scan across a large body of text. There are many fonts available explicitly intended for headings and logo text that would be inappropriate for the main body of a message. To maximize usability, make sure to choose a font that is legible and easy on the eyes.

Availability.

This is the most easily overlooked aspect of font selection and can result in entirely unexpected results when viewed online. To ensure the recipient sees the same message style you created, the fonts you use must be available on their computer or through a web service like Google Fonts. When you create a website, for example, the HTML code will call the font that is supposed to be displayed. This code tells your browser program what font it should show on that particular page and provides a list of recommended substitutes. Even though you may have 200 fonts installed on your computer and you see your fonts fine and dandy, that doesn’t mean that the person on the other end viewing your website has the same fonts installed as you. In a case where he doesn’t, his browser will attempt to substitute another font you recommend in your font stack or a different font of its own choosing altogether if none of those were available. This could completely change their perception of your intended message. At the very least, they may think you were sloppy in designing your material. Email programs, and electronic newsletters, all work the same way. So bottom line, you need to include fonts that you are positive your entire web audience will have available on their computer within your font stacks. We call these Web-Safe fonts.

With thousands of fonts out there, you’re probably thinking, No big deal, there are still plenty of choices. Unfortunately, only six are genuinely safe as they are standard on both Windows and Mac machines. Those fonts are Arial, Times New Roman, Trebuchet, Verdana, Courier New, and Georgia. However, several others are also well supported on both platforms, with Arial Black, Tahoma, and Impact being top picks. Let’s take a couple of minutes to understand the differences in these fonts.

There are two basic types of fonts; serif or sans serif. Serif, by definition, has a fine line finishing off the main strokes of a letter, or letters may end with a rounded tip. And sans is a French term meaning without, so in the case of sans serif, it would be without those fine lines. The most common serif font is Times New Roman, and the most common sans serif font is Arial, both of which are web-safe fonts. Of the web-safe fonts, there are only three serif fonts; Courier New, Georgia and Times New Roman. Serif fonts in very small text sizes can be hard to read; therefore, caution should be used when selecting those for small print.

Font Stacks

A font stack is just a list of fonts declared in a CSS file. For example, this is a font stack:

body {

font-family: “Times New Roman”, Georgia, serif;

}

Why are font stacks useful? Because they let you implement graceful degradation.

Font stack is the term that refers to the list of fonts included in the font-family assigned to a class. When you provide a font stack, you are telling the browser that if the first font is not available to be displayed in the user’s browser, then automatically load the next one in the list. If that font isn’t available either, it will move to the next one, and so on.

Using font stacks that include web-safe fonts allows you to design with less common fonts while ensuring usability. Suppose the user’s browser can’t view your desired font. In that case, the next best alternative you specified is loaded automatically (which should be a standard web font), and your content is still entirely readable for all visitors.

Web Safe Fonts

Arial

Arial was introduced as the default typeface for Windows 3.1 when Microsoft released it in the early 1990s. It is not difficult to read unless used in very small sizes, and it is the most popular sans serif font today. However, it is rather plain, and people tend to get bored of Arial because they see it everywhere. But, since it is so widely available, easy to read, and the default for Microsoft products, it is a great font to use for the main content areas of your marketing materials, newsletters, websites, etc.

Recommended Font Stack

Font-family: Arial, Helvetica Neue, Helvetica, sans-serif.

Times New Roman

Times New Roman is the most widely used serif font, developed in 1931 for use by The Times newspaper in London. It has remained a very popular font for setting type in books, magazines, newspapers, etc. The U.S. State Department has been using Times New Roman 14 point on all diplomatic documents since 1994, replacing their old font of choice of Courier New 12 point.

Recommended Font Stack

Font-family: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif

Trebuchet MS

Trebuchet was designed in 1996 for Microsoft and is a popular sans serif font for those bored with the plain appearance of Arial. Having a definite style all its own, Trebuchet is easy to read for large or small type and works well for main bodies of text. Due to its unique styling, though, it can be seen as a feminine font, and if your audience is all men, they may not relate well to that font.

Recommended Font Stack

Font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif.

Verdana

Verdana, designed for Microsoft in 1996, is probably the easiest-to-read web-safe sans serif font available. With its taller lettering and more evenly spaced letters, it can be easily read in larger sizes as well as small sizes. It extends the width of the text on a page, so it is excellent for filling designs that have a lot of space with a small amount of copy.

Recommended Font Stack

Font-family: Verdana, Geneva, sans-serif.

Courier New

Courier New, a serif font, was primarily a font used in old typewriters. It is not generally used as the main body text. However, it is still used to display code in documents or when the writer wants the old-fashioned typewriter look in their document.

Recommended Font Stack

Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.

Georgia

Georgia, a serif font, was created for Microsoft in 1993 to provide a clean font for use on the web that would display well even in small sizes. Georgia font letters are taller than most other web-safe fonts, making them easier to read when used in smaller sizes. Georgia is a great alternative when you’re tired of traditional Times New Roman but still want a serif font.

Recommended Font Stack

Font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace.

Mostly Web Safe Fonts

The following are also good options, even though they aren’t fully supported by both Windows and Mac. They do have close alternatives in the recommended font stacks in the other operating system. The first three are very well supported, and the rest are supported in about fifty percent of machines.

Impact

Impact is a very bold sans serif font. As its name suggests, it was designed to impact the reader and is therefore recommended only for headings, small blocks of text, and areas on the page that you want to grab the reader’s eye. Because of its thick block style, Impact looks best when there is plenty of space around it; otherwise, it looks cluttered.

Recommended Font Stack

Font-family: Impact, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif.

Tahoma

Tahoma, a very close cousin of Verdana, was designed in 1999 for Microsoft. It is so similar to Verdana that many don’t see the difference in the fonts. Mainly, Tahoma keeps its lettering tighter so that text does not spread out as far as Verdana does. Tahoma is a great font option for those needing a sans serif font but who are getting bored of Arial.

Recommended Font Stack

Font-family: Tahoma, Verdana, Segoe, sans-serif.

Arial Black

Arial Black is one of many versions of Arial, released with Internet Explorer 3. It is a bolder font than Arial and is great for headings and short sections of text that require emphasis.

Recommended Font Stack

Font-family: Arial Black, Arial Bold, Gadget, sans-serif

Other good options

What Font do YOU Want?

Now that you understand the differences between the web-safe fonts, which one will you choose for your internet communications? If you’re looking for a serif font, then Georgia is our recommendation. It is the clearest serif font on the web since it was designed for just that purpose. However, suppose you are looking for a sans serif font. In that case, Verdana is our number one recommendation as it is the clearest on-screen font for readability, with good old Arial pulling up a close second.