Fonts on the Web: Web-safe Fonts

by Ilene Strizver

Why can’t you use whatever fonts you want on a Web site…or can you? Which fonts can you use easily, safely, and reliably? The “wonders of the Web” still involve techno-quirks and design challenges. One of the primary ones — for designers, that is — has historically been the limited font choices on the Web.

In print, “what you see” really is “what you get.” On the Web, however, this is not exactly the case. For all viewers to see what the designer sees, either the viewers all need to have all of the fonts (known as Web-safe fonts), installed on their computers, or the fonts (known as Web fonts) all need to be accessed from a remote server — using a revolutionary, new technology explained in more detail here. If the fonts used in a Web page are not accessible to all viewers by either scenario mentioned above, the fonts will default to something else in their respective systems, which can have unexpected and often undesirable results. For this reason, most Web designers currently stick to the Web-safe fonts which are common to most Mac® and PC browsers.

Web-safe fonts

Web-safe fonts include serif, sans, and symbol typefaces. While some of them were originally designed for print, others have been designed specifically for legibility on the screen.

Sans Serif

The Verdana® typeface is widely considered the most legible of Web-safe typefaces. Its designer paid particular attention to ensuring that text remains readable on screen even at small sizes (on screen). Verdana offers a tall x-height, comfortable width, and open letter spacing.

The Trebuchet® MS typeface also retains clarity and readability at small sizes on the Web. It’s slightly narrower than Verdana, allowing more copy to fit in the same space. Its curved stroke endings and unusual lowercase "g" give it a bit more distinctiveness than Verdana.

The Arial® typeface was not (specifically) designed specifically for the Web. However, this very readable sans works well on the Web. Arial is similar to Helvetica in both width and spacing, but with slight character modification. (See Arial vs. Helvetica)

Serif

The Georgia® typeface was designed for the Web as an alternative to the Times New Roman® font. Georgia has open letterforms and spacing, making it crisp, clean, and easy to read on the Web, even at smaller sizes.

The Times New Roman® was designed for print, and for this reason is not the easiest to read on the Web, especially at smaller sizes. If you like the look of Times New Roman but need something sturdier, try Georgia instead.

All of the above fonts are available in Regular and Bold with italics.

Symbol fonts

Webdings, Wingdings, and the ITC Zapf Dingbats® typefaces are included with most operating systems. They contain many useful graphics, from stars, arrows, and snowflakes to thought bubbles, geometric shapes and interrobangs. Note that these font names may show up as symbols when a font menu is displayed as WYSIWYG.

Type As Graphic

There is a way around these creative limitations. You can enjoy complete freedom in your typeface choice when choosing a typeface for a heading, logo, nav bar, or any other type usage by converting it into a graphic. Your file can be in the form of a .gif, .jpg or .png. This gives you the flexibility to combine text with images, textures, and patterns and to take advantage of other creative approaches for a Web site.

But before you go nuts creating lots of graphics, keep these three things in mind:

• they are slower-loading than straight text
• they are not easily editable
• they are not searchable by search engines
•  

For this reason, most Web sites combine straight text with graphics in order to achieve a balance of readability, creativity, and ease of navigation.

• Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.