Fonts and the web

By Craig Goldwyn, Visibility.tv

Fonts are a great way to express your style and personality, but with current technology, getting a webpage to show that personality on every computer is tricky. Here's why:

When we create a website, we can use whatever font we want, but if the people viewing the website do not have the font you have chosen installed properly on their computer, their web browser (usually Internet Explorer) will look into the fonts list on their computer and pick a substitute! So much for you careful design.

We can compensate for that by listing two or three alternative fonts when we program the page, so if the browser can't find the first choice, it looks for the second, then the third, etc.

The best way to make sure the web pages look the way we want is to chose fonts that we are confident are on almost every computer. That's tricky because fonts take up memory and some people turn them off or discard them, but there are a few that we can usually rely upon to be up and running on most computers because the operating systems and other key software require them: Verdana, Arial, Helvetica, Georgia, and Times. The first three are sans serif fonts (see sidebar to the right) and the last two are sans serif fonts. The good news is that Verdana and Arial are fairly readable fonts in all sizes (Times is not quite so readable on computer screens in small sizes), meaning that the eye does not tire when reading them. They are boring, however.

Boring as they are, Verdana and Arial are fine for body copy. But fonts are a nice way to convey emotion and style. So how do we do that? We can fool the computer. We can pick special decorative fonts for headlines and subheads, and then we convert them to graphic files (gif, jpg, or png files), sort of like taking a picture of them. Here's an example of a headline set in an unusual font converted to a graphic.

Another possibility is to turn the entire page into a graphic such as a gif, jpg, or even a pdf. The problem with this is that graphics tend to be large files and slow the viewing of your pages. It also makes it almost impossible for people to copy and paste info from your web pages into an email if they need to, and it also prevents Google and other search engine software from reading your pages and adding them to their catalogs because search engines cannot read words in pictures.

This font switching is not just a problem of the web. If you send someone a MS Word file or even an email with exotic fonts, there is a high likelihood their computer will be forced to substitute another font, thereby screwing up your design and layout. Line breaks and page breaks will also likely get messed up. The best way to prevent this is to convert the document to a pdf file. They are a form of graphic file that insures that the fonts will look they way you want. They need Acrobat Reader to be viewed, but almost everyone has it. The problem is that you need a special program to convert a MS Word file to a pdf file (unless you have a Mac, they can do it without special software). There are also websites that can do it for you for free.

So go ahead, have fun. Pick a font or two that shows your personality for your website's logo, headlines, and subheads. Pick three different ones if you wish. Just get used to the reality that your body text will be Verdana or Arial on many computers.

Font colors

There are standards for text colors in web design. We follow these practices (1) for good looks, (2) so that computers can read the text aloud for blind people, and (3) so all browsers show the words and colors properly, including cell phone browsers.

Color use. It is important that people be able to find their way around your site easily, so web standards dictate that the use of color be standardized on all pages. One should not use one color for links on one page and another color on another page. Nor should one use the color of your links for your headlines or captions. And your text links should have at least two colors, one for pages you have not visited yet, and another for pages you have visited. This is an important navigational aid.

If you are looking at a web page I have designed for you, you must first flush the cache in your web browser. Your browser's cache remembers what pages you have visited, and you must make it forget to see things as if you were a newcomer to the site. If you do not know how to flush your cache, see the article here.

Body text. Because links are usually underlined, body text should never be underlined for emphasis. People might think underlined text is a link. For emphasis it is best to use bold. You can use italics, but on many Windows computers the fonts are not smoothed properly on the screen, and italics look blocky and are hard to read.

Headlines and subheads. They are usually a different font than the body text, and can occasionally be a different color. But it is best to keep them the same color as the body text because links should be a different color (in fact, as you will see below, there are often three colors used for links), and if the heads are a different color there can be some real color clashes if we are not careful.

Links. Links come in three "states": Active, visited, and hover. Links to pages you have not visited are called active links. Links to pages you have previously visited are called visited links. When your mouse passes over a link it is called a hover link. Links should be a different color than the body text, and often we use a different color for each of the three states. Links are also usually underlined. However, it is considered bad practice to designate a link with just an underline and not a color change.