Web Type 101, a primer

by Daniel Will-Harris

While you may never consciously notice the typefaces used on a Web page, they subconsciously affect the way you feel about the page.

• Type Matters - What type can do for you.
• What you see isn't necessarily what they get.
• Web-safe fonts - Use these and what you see is probably what they get.
• Free fonts for the screen - The easiest to read fonts.
• Graphic text - When you want to add some character to your characters.
• Embedding—sending fonts with your page
• Formatting text—long lines are hard to read
• Special Characters - Looking more professional by using real characters.
• Installing and using Web fonts - Don't wait, do it now.

Type matters

While you may never consciously notice the typefaces used on a Web page, they subconsciously affect the way you feel about the page. They can be formal or casual, modern or traditional, serious or friendly, cool or warm.

With the exception of a few icons in the background, this Web site's design is all type, and yet, because it uses a distinctive typeface (GM Nanogram), it gives the entire site a friendly, warm, hands-on kind of feeling.

Yet getting distinctive typefaces onto a Web site isn't straightforward—you really have to know what you are doing. But don't worry, I'm going to tell you how. First, some background.

Type on the Web:
What you see isn't necessarily what they get

Imagine if the only color you could see on the Web was magenta. Just magenta. Nothing but magenta. All the time. Imagine how dull that would be.

Well, that's exactly how the Web started when it came to type. You could display Times. And only Times.

In the beginning of the Web, there were words…but not typefaces. The only typographic constant was Times New Roman under Windows and Times on the Mac. But even that wasn't sure because the user was in complete control of the fonts they saw. Unless, of course, you sent your text as graphics, such as GIF files (graphic information format—along with JPG, one of the two standard graphics formats on the Web—to read more about graphics on the web, click here).

The Web was revolutionary not only in the way it distributed information, but in the fact that it was the only text-based medium where designers and authors had no control over how the text looked. Browsers added audio and video long before they even considered adding font control.

Next came the <font face> tag (something you use if you're writing HTML by hand instead of using a program such as NetObjects Fusion that does it for you), which allows site designers to specify what font the browser should display.

Sounds good, but there's a trick—that font has to be installed on the viewer's' systems in order for them to see it. Realistically, this means that you can really only specify a few typefaces—the ones you are fairly certain will be on the viewer's computer. This can be confusing, because you'll see the fonts on your computer, but others won't see them on theirs.

These "Web-safe" faces are:

Windows

Times New Roman: a serif type that looks like something you'd see in a newspaper or magazine. It´s specially hinted so it´s easier to read on-screen, but Microsoft´s free font Georgia is really a better typeface for the screen.

Arial: a sans serif (meaning without serifs—the little doohickeys at the ends of each letter) face that has a streamlined, more modern look, but isn't necessarily easier to read on screen because it's on the narrow side and can look very light in smaller sizes. It's also incredibly boring and looks far too much like the type used by the IRS and other tax agencies, so it can have negative subliminal connotations.

Mac

Times: This face is similar to Times New Roman, but it isn't as carefully designed for on-screen viewing. In particular, it has no italic version, so the Mac just electronically slants the type. This looks terrible and is difficult to read, which is why many Mac people complain if you use italic on your site. But this can be corrected by showing them where to download the superior, easier to read Times New Roman, for free.

Helvetica: a sans serif face similar to Arial.

IE3 and IE4

Both these browsers come with two special fonts, designed for easier on-screen reading.

Verdana: An extremely easy-to-read sans serif face that's included with the Internet Explorer. If you have this font installed or are using the Internet Explorer, you'll see this paragraph (as well as the headings on this site) set in Verdana. If not, you'll see Tahoma (a face almost identical to Verdana that comes with Microsoft Office), Arial, or Helvetica. If you don't have this font, you can download it for free:

• Verdana for Windows 95/98/NT
• Verdana for Windows 3.1
• Verdana for the Mac

Comic Sans: This face is informal and friendly, which is great for some sites, but not professional enough for others. If you're using IE, you'll see this face now, if not, you'll see Times New Roman or Times. If you don't have this font, you can download it for free, click here.

Free fonts for the screen

Microsoft offers two more fonts designed for easier on-screen reading. If you do nothing else, download Georgia and you'll find the Web much easier to read.

Georgia: This serif face is much easier to read on screen than Times New Roman because it was designed for the screen, whereas Times was designed for paper (in the 1920s!). Georgia has excellent italics that are easy to read and attractive. If you have Georgia installed, you'll see all the body text of this site set in it. If not, you'll see Times New Roman or Times. Download Georgia for Windows or Mac:

• Georgia for Windows 95/98/NT
• Georgia for Windows 3.1
• Georgia for the Mac

Trebuchet is another screen-friendly sans serif face from Microsoft. It has more character than Verdana, but isn't quite as easy to read in smaller sizes. Download Trebuchet for free.

To learn how to install these fonts on your computer, and set your browser to display them, click here.

Facing fonts

When you use the <font face> tag or choose a font in your editor, you have to realize that your site visitor may not have the font you want, even if it's a common font such as those listed above. Because of that, the <font face> tag allows you to specify a list of fonts to use in case the visitor's computer doesn't have the first one. For example, when you specify Georgia, as we've done on this site, you can tell the visitor's browser that if it doesn't have this face, it should display Times New Roman, or Times, or even a generic "serif" or "sans serif" face.

You do this by adding HTML that looks like this <font face=Georgia, Times New Roman, Times, serif>. Always list fonts by the easiest to read first. For serif faces, this should be: Georgia, Times New Roman, Times, Serif. For sans serif faces, it should be: Verdana, Arial, Helvetica, Sans. Serif and Sans should always be the last resort because browsers can get confused and display difficult-to-read faces.

When you select a font in NetObjects Fusion, Fusion automatically creates a <font face> tag with a list like this. If you want to customize this list, double click the file called fontmap.txt located in your \NetObjects System folder to edit it in Windows Notepad or a Mac text editor.

Other faces, other formats

While using one of the above faces is almost a necessity, it's also limiting. Typefaces are an important way to give your site character, personality, style, and distinction. So what do you do? Create graphic files or use new font embedding technology.

Graphic text

Many sites you visit (including this one) use graphics for text banners, buttons, and even headings within articles. These files can be small and download quickly, and they can give your site the kind of "identity" that makes it stand out in the ever-growing mass of Web sites.

The key is to use graphics files only for a few words at most. Don't use them for an entire paragraph of text unless it's absolutely necessary for the style of your site, as it was in this example. And if you do, make sure to include all the text in your ALT tag. Without an ALT tag, before the graphics load (or if graphics are turned off) all your visitors just see empty boxes. Not good. With ALT tags, they'll be able to read your text even before the graphic loads.

Creating graphic text

Don't be afraid, you don't have to be an artist to create graphic files, you just have to have some software.

First, if you're using NetObjects Fusion, it will automatically generate text in graphic buttons and page banners, using any font installed on your system. This allows you to create stylish page headings—automatically. That's how they're created on this site—all automatically. This can save hours creating all these individual graphics—and since they change automatically if you rename the page, you don't have to worry about your graphics being out of date.

Fusion tip: You can create custom type graphics for headings at any time, right within Fusion. Choose the picture tool, then go to the NetObjects System folder and select the file called "dot_clear.gif." Choose "stretch" on the Properties Palette and drag the handle to make a GIF the size of the text you want. Select the "Effects" tab from the Properties Palette. Check "Enable Text in Element" and click on "Settings". Enter your text and adjust the typeface and size. You can use any TrueType font—you can even rotate the text in 1 degree increments. Don't forget to change the "alt" tag. When NetObjects Fusion publishes the site it automatically creates a GIF with your special typeface—so your site visitors see what you intended. Easy. Automatic. No other web creation software can do this for you.

If you want to create custom text graphics, the best software for text are vector programs, meaning they work with lines, curves, and other objects (as opposed to "Photo" programs that work with pixels or dots).

For the simplest, point-and-click text graphics, look at XaraWebStyle and NetStudio. Both programs are template-based, which means you choose from a series of pre-designed type styles, and insert your own words, select your preferred colors, etc. Both are inexpensive and easy to use.

If you use Windows and need more creative control, there's nothing better than CorelXara. This $89 program lets you create perfectly anti-aliased (meaning smooth) text (and graphics) and save it to the most compact files. I used Xara to create the graphic text and other graphics on this site.

If you're professional using a Mac (or Windows), you'll want to look at Macromedia Fireworks. This program provides a lot of power, plus some built-in effects for type. Adobe offers ImageStyler, its Web-specific vector program that uses an interface similar to Photoshop.

Whatever program you use, make sure your graphics files are:

• Anti-aliased—this makes the type appear smoother on screen. Make sure to anti-alias your type to the background color of your page, or it will have an unattractive "halo" effect. If you want NetObjects Fusion to automatically anti-alias the banners and buttons it creates, you need to add special software to your computer.
  If you're using a TrueType font and Windows (and if you aren't sure what you're using, you probably are—you can tell if it's TrueType by going into your word processor and pulling down the font selection box—usually on a toolbar under the menus. If it has a small "tt" logo to the left of the font name, it's TrueType, if it has what looks like a tiny printer, then it's Type 1):
  Go to the Microsoft TrueType font site and download a program called the "font smoother." Install this software. Your computer graphics must be set to 16-bit or higher. For more information about setting your display properties, click here.
  If you're using Type 1 fonts: Run ATM (Adobe Type Manager). Click on the Settings tab, then click on the Advanced button. Click on "Smooth font edges on screen." You do not need to be in 16-bit graphics mode for this to work, but if you aren't, it can slow down type appearing on your screen.
• Optimized GIF —unless you're combining text with a photo or illustration with a lot of colors, choosy types choose GIF. Use the fewest colors you can, and save to a lower color depth (such as 4-bit or 16 colors) and your files will be smaller.
• Always include ALT tags—you want to make sure people can read your text, even if they can't see your graphics. ALT text is also important because it can be indexed by Web search engines—allowing people to find something on your site they might not if it was only in a graphic. It's also important for the vision impaired. Hold your mouse over the graphic that follows to see the ALT text appear.

For more information about the basics of Web graphics, click here. For more advanced information about creating web graphics, click here.

Sending fonts with your page

If you want to use the latest type technology, Bitstream's TrueDoc allows you to send fonts with your Web page. These fonts are displayed by both Internet Explorer 4 and Navigator 4, but won't appear in older browsers.

You can use this technology for free, using the fonts provided on the TrueDoc site, or, if you want the power to send any font you choose, you can purchase Bitstream's Dynamic Fonts for Web Publishing package.

Click here to see a sample of a web page with embedded fonts.

To read more about TrueDoc, click here.

If you decide to order Bitstream's WebFont Wizard, tell them you read about it in eFuse and you'll get a 25% discount.

Microsoft offers an alternative embedding system, but it only works for those using Internet Explorer, and it's not a secure system, so I don't recommend it.

Line Lengths

One of the most important ways you can make type easier to read on-screen is to control the length of each line of text. Lots of sites just let text run from one side of the screen to the other—and for those who have high-resolution screens, this can result in lines of text that are so long they're very difficult to read.

You can control the length of your text by creating HTML tables that are specified in pixels, rather than in percents. A good width for a line of text is between 60-70 characters, and this translates roughly into a table that's between 350 and 500 pixels wide.

In NetObjects Fusion you simply create a text box that's the width you want. If you want to know the actual dimensions, look on the bottom of the Fusion window and you'll see a box that says w:450 h:1200 (or the dimensions of the object you've selected).

Does that leave a lot of blank space on-screen when someone is viewing a page on a monitor at 800x600 or 1024x768? Yes. But is it easier to read that text? Yes. And the easier it is to read your text, the more likely someone is to read it. That's why this site, and good sites that have a lot of text, have a lot of blank space on the side—because that space "costs" nothing, and it's more important to make your text readable than it is to fill every inch of the screen.

"Special" characters

Most Web sites still use "typewriter" characters for quote marks, apostrophe's, and em-dashes (—). That's because, until fairly recently, it was difficult (if not impossible) to specify the real "typographic" versions of these characters. But using the real characters makes your site look more polished and professional.

' This is a typewriter apostrophe.

This is a typographic apostrophe.

" This is a typewriter quote mark. "

 This is a typographic opening and closing quote mark.

-- This is a typewriter em-dash.

This is a typographic em-dash.

But now you can specify usually these characters and be assured that they'll appear properly in browsers, Version 3 and newer. I say usually, because for a while most people said they worked right, but lately I've received complaints from Mac and Unix users, saying they didn't.

For a while, there were special HTML character codes for some of these characters, and while these work in older browsers, they may not work in newer browsers, which are moving to characters based on specific character sets, such as Unicode (a system that can contain up to 64,000 characters).

If you're using NetObjects Fusion, just insert the characters you want, and they're automatically coded correctly for all browsers. To make sure Fusion creates typographic quote marks, go into Publish, click on Setup, then click on the HTML Output tab. At the bottom of the dialog there's a box that says "Quote type." Click on the drop-down list and choose "Curly Quotes," (which should be the default setting).

If you're not using Fusion but are using Windows, make sure to specify <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">. That way your special characters are viewed correctly on all Windows and Mac browsers Version 3 and newer. Note:  Some UNIX and Mac browsers may not display these special typographic characters correctly.

How do you insert these special characters?

There are several ways to insert these special characters. Some programs automatically convert typewriter characters such as quotes, apostrophe's, and em-dashes into typographic characters. Word and WordPerfect both do this. NetObjects Fusion converts quote marks and apostrophe's but not em-dashes.

Windows: The best program for viewing and selecting characters is Symbol Selector from RKS software. This program lets you view all the characters in any font at any size, and easily paste them into your word processor or graphics program.

Windows: Or you can use Window's' own "Character Map" program, usually located under Accessories in the start button.

If you can't find it, go to the Control Panel, choose Add/Remove Programs, then click on the Windows Setup tab. Click on Accessories, then click on the Details button. Select Character Map and click on OK. You may be asked to insert your Windows CD.

Mac, use the Keycaps program to select special characters.

Conclusion

So, don't take type for granted.

To learn more about the impressions of feelings that type conveys, visit my EsperFonto site , the 'Web's only interactive typeface selection system. Just tell it the kind of feeling you want to convey, and it will suggest appropriate typefaces.

Installing and using Web fonts

First, download the fonts designed for the screen. The most important pair to download are Georgia and Verdana. IE users will automatically have Verdana.

Install them on your system

Windows95/98/NT: copy the fonts to the \windows\fonts folder. You will need to close Fusion and restart it before the new fonts will appear.

Mac: Drag them onto the closed system folder. The system will ask if you want them installed in the fonts folder. Answer Yes. '

Set your browser to use one of these fonts as your default browser font

Georgia will probably be the most "comfortable." If you prefer a sans serif, choose Verdana.

To make Georgia your default font:

Navigator4: Choose Edit/Preferences then choose Appearance/Fonts. Under Variable Width Font, choose Georgia. To make sure you see embedded fonts, select Use document specified fonts, including Dynamic Fonts.

Navigator 3: Choose Options/General Preferences/Fonts. Under Variable Width Font, choose Georgia.

IE4: Choose View/Internet Options. From the General tab, click on the Fonts button. Under Proportional Font, choose Georgia.

IE3: Choose View/Options. Click on the Font Settings button, click in the box to the right of "proportional fonts" and choose Georgia.

About the author

Daniel Will-Harris is a designer and author whose design and writing work can be found at his Web site. His site features TypoFile Magazine and EsperFonto, the Web's only typeface selection system. He may be reached via e-mail at daniel@will-harris.com.