Web Design: Using Text Fonts

Fonts can be one of the more important tools in your web design arsenal. After all, it's the most prevalent element on all your pages and it can contribute significantly to the overall effect you are achieving.

Something you may not have thought of is that there are 2 totally different applications for fonts which have almost no relationship to each other: page text and input to graphic design. We'll explore both. If you're just skimming these sections, please be sure to see the examples at the end.

Unfortunately standard type faces are very limited today since we must depend on the fonts installed on the user's system. In the Windows 95/98/2000 environments, we only have what Microsoft gave us: Arial, Courier New, Times New Roman, Comic Sans MS, and Wingdings (a symbol font) . MAC users are no better off. Of course we could use any interesting fonts we'd like, but for safety, we should use a font which most of our viewers are guaranteed to have available.

We should choose a font appropriate to the 'tone' of our website, which generally means Arial or Roman. Arial is larger and more readable, though a bit informal. Times New Roman is the choice of most sites that are news or financial related or have tons of text, but it is smaller, somewhat starchy, and not quite as easy to read. It is very difficult to combine the two. Comic Sans MS is used infrequently, but I selected it because I wanted an informal 'look and feel' to my pages. It's also slightly larger than Arial and offers a bit more white space for easier reading. Courier New is clearly the font of choice for representing information in a columnar form where columns in subsequent rows must line up. It's the only fixed pitch font available.

I've seen designers take a chance and specify a selection of similar font faces such as Verdana and Arial and others. Their HTML lists them in the designer's order of preference with syntax like <font face=(verdana, arial, helvetica>. This is fine but you must be prepared for the user who doesn't have 'Verdana'. Arial is a good substitute however, and Verdana and others seem to be on most computer systems anyway.

It doesn't seem to take long for a couple hundred fonts to show up on your computer. Just install PrintShop and almost any Microsoft product and you're there already. My point though, is to design your site to a font you're virtually guaranteed your users will have. I've seen several sites which use an exotic font which the site owner offers free for download. Seems a tad arrogant to me that the user should be encouraged to install a specific font for the benefit of a single site and I do wonder about the licensing freedom to make such an offer.

Enough on the shortfalls of font typefaces. All is certainly not lost because we can always use whatever we wish when we design graphics from our fonts, which we'll see shortly. Also, we can vary our fonts by using the usual text highlights of bolding, underscoring, and italicizing, as well as varying the size of the font. Font size now takes us to a very important consideration.

Each user has control over the default font faces and sizes they want to use for proportional and fixed pitch text. We designers can't do anything about that except hope that our readers have not selected weird defaults which interact badly with our theme and our text layouts. Since we can't do anything about this, let's at least understand the problem.

Did you know that HTML allows 7 different fonts sizes in its design? They are known as '1' thru '7', The average font for readability 'seems' to be a '3' and occasionally '2', with '4' thru 7' reserved for headings and other emphasis items. Things get a little dicey when you consider that size 3 seems to equate to the majority of defaults being used. So ... whatever you specify as <font size=3> is going to appear on your web page in the default size of the particular user's browser. Here's an example:

My Netscape browser has a specification of 11 point Arial for the default 'variable width font' and 10 point Courier New for 'fixed width font'. This is the way I'm going to see your pages, with one exception. I will NOT be using my default typefaces (Arial and Courier New) unless the designer does NOT specify a typeface. Expressed another way, I will not allow my browser's typefaces to override those of the web designer.

Remember the 1 thru 7 business? Well '4' is the next size above the default and '2' is the next size lower. It's all a relative scale; nothing absolute at all about sizes! Just to make this more iffy, the user can specify to his browser to use specific typefaces and override the web designer's. Most users don't try to override the designer, but they do have the ability.

I'm now going to show you an example for you to use for comparison. However, I have to use a graphic screen shot since your browser may not display the text the same as mine does. This will be an interesting experiment, so look at the following text as it appears with your present browser settings:

Now is the time for all good men to come to the aid of their country.
Size 3 Arial.

Now is the time for all good men to come to the aid of their country.
Size 3 Courier New.

Now is the time for all good men to come to the aid of their country.
Size 3 Comic Sans MS.

Now, here's a graphic of what it actually looks like on my system when I use my default variable-width size of 11 pts. Compare it to yours and then see if it's the same. (Compare the below box to one above.)

I think you've seen the point I wanted to make. If you look at this page with a default 'variable' font that's larger than 11 pts, all of the Comic Sans will probably look bolded. I don't know about you, but this drives me a bit daffy! If you want to play with your fonts, go right ahead now if you've never had the pleasure, and see how the page changes. Hold off just a moment though until you see the following interesting example.

One more quick exercise to show how the user's default font size affects the scaling of the other HTML font sizes. Again I'll resort to a graphic screen capture.

Here are the seven sizes with my default variable width size set to 10 using Comic Sans MS:

Here are the seven sizes again with my default variable width size set to 12 using Comic Sans MS:

Notice how 'Size 3' actually became bolded when my default size was higher, as I mentioned above. Isn't this intriguing? I hope you'll agree if you've never gone through it before. I doubt that many designers have thought about this until they see their site through the eyes of someone else's browser.

It's time to play if you want. In Netscape version 4.xx, you select font face and size by choosing Edit, Preferences, Fonts. In Internet Explorer 5, you select the font face using the Control Panel Internet Options (General tab, Fonts button), and font size by using View, Text Size on Internet Explorer's menu bar.

Now we're going to take a look at our fonts from the perspective of using them to create graphics. The good news here is that we can use an unlimited number of fonts to 'decorate' or embellish our web pages. Software like 'banner creators' or image editing programs can convert a text string from any true-type font to a graphic. There are many, many examples of how I used this throughout my site.

The topic Banners 'N Buttons goes into this with good examples so I won't repeat that here. Just on this page you'll see my site banner or logo, 'Sam's Web Stop' which was done by Ulead's Cool3D using a 'Star Trek' Font I had. My page banners were done using 'Verdana' on a blank banner from FrontPage 2000's themes.

What I think you may find very interesting is the utility value of fonts, specifically symbol fonts. These are those type faces referred to variously as symbol sets, dingbats, or specialty fonts. These come in handy from time to time provided you know they're there, what their symbols are and what keystrokes to press to get the specific symbol.

For web designers, these symbol fonts can be a rich source of 'do it yourself' graphics. You can create a one or 2 character text string, embellish it with a particular program, and presto you have a graphic, an icon, or an animated GIF file. A good example is the banner I had used on the earlier version of this web site which used a 'typewriter keys' font I had in my 'collection'.

Or, you can use the 'Wingdings' font on your system and make a nice e-mail icon

or you can make an animated 'Click here' icon.

Just think, every character of every symbol font is a potential icon or button! Trust me that you can make better graphics than what's offered up in many of those clip art packages that come on 12 CDs.

By the way, do you see how problemmatic it is when you mix graphics and text on the same lines? They are a devil to line up and with the larger graphics you must place them 'right' or 'left'. My topic on Publishing Your Web [Uploading] shows several examples of how I did it. Having your text aligned 'justified' really helps out, since it provides a nice square contour around the graphic.

If you review my own use of graphics and text, you'll see that the graphic is never paired with another one in a paragraph of text, and also that it is usually on the right. Web designers can avoid this problem by using tables to keep things where they belong. You'll see many examples of this in all my Reference Material topics.

Whenever you create your own graphics like the examples above, you are likely going to run into 'the jaggies' syndrome when you create transparent GIF files. Most people do. As a commercial message to get you to read the Banners 'N Buttons topic, I explain how you can avoid this problem as shown in the first graphic below, and instead produce the clean looking graphic on its right. I also explain the jaggies in more technical terms than 'jaggies'.

First, be careful about installing too many fonts on your system. It's not the space they occupy but rather 2 other considerations:

Second, and this flows directly from the first. Get yourself a competent font manager program! The program, Boss Font Manager, which came with my Arts and Letters drawing application, is excellent, plus it came with a CD of 1000 fonts. There are three features to look for:

There's a freebie at Ziff-Davis' PC Magazine download site called 'Font Viewer' which isn't bad but it doesn't do enough. Unless you have the Arts and Letters Product (although I believe they now sell Boss as a standalone product), take a look at the DaveCentral download site (Look in the Graphics, Font Editor and Font Viewer categories.). These links are provided in my topic Sites to Visit, in the Download category.