Typography on the Web, part 2

In Part 1 of this article we explored the anatomy of a font.
In Part 2 we will explore the typefaces you can use on web pages.
In part 3 we will show you how to actually implement web typography by using CSS.

Choosing a Typeface

In part 1 I ended by saying you can't use any typeface on your computer and expect everyone else will see it. The reason for this is simple. When you code into your web pages the typeface you want to use, you are not actually uploading the type to your web page, but rather a link to that typeface that will hopefully be found on your visitors computer. If the typeface is not found on the visitors computer, then the face that will be used is the visitors default typeface, not yours.

How do you get around this.....
By specifying only typefaces that are found on most computers. Visibone.com (an excellent source for printed reference charts & some free on line references) conducted a web survey to find out what the most prevalent typefaces are on computers today.

Here are the top faces found on computers today (70% or more) according to Visibone. Visit their site for the full chart.

The above survey was not a scientific survey so results may vary.

As you can see, you do have a reasonable amount of typefaces to choose from that will be seen by most of your visitors. There is a good mix of Serif & Sans-Serif faces to choose from.

The current thinking among many web designers is that it is better to use a sans-serif face for your text as it is easier to read on a computer screen. I do not necessarily agree with this. Unless you have very large text areas, using a serif face is just fine. However, in the smaller type sizes, sans-serif is definitely easier to read.

There are some tools available that will allow you to use any typeface you want on your web pages, however they are very specific as to which browser your visitor is using.

WEFT

The most well known and supported tool is from Microsoft and is called WEFT (Web Embedding Fonts Tool). This tool will allow you to use any embeddable typeface on your web page by creating a font set that is embedded into your web page. When a visitor comes to your page, the type is temporarily downloaded with the page so that the visitor sees the type you have specified. The only caveat to this is the visitor must be using MS Internet Explorer, it doesn't work with any other browser. You can learn more about this tool by visiting www.microsoft.com/typography .

Bitstream

Bitstream, a maker and distributor of fonts has a similar tool for Internet Explorer/Netscape browsers (www.truedoc.com), however it is very limited as you can only use 5 or 6 typefaces and only the ones on their server. (You reference the typeface to their server as you cannot download these fonts, and it also requires an active-x player to see the typefaces)

If you really need a special typeface for something on your site, use a graphic representation to make sure everyone visiting sees it as intended.

One of the "arts" of typography is fitting the typeface to the intended audience and setting a visual mood for the story.

Each typeface has a feeling to it, whether it be bold and authoritive or light and whimsical. Choosing the right typeface can complement the mood or feeling that you want to convey with your web site.

Experiment with some of the typfaces named above, see what your websites "feel" like with different faces. Then choose the typeface that fits the overall "feel" of your website. Use a minimalist approach in typeface selection. Use one typeface for your headings and a different one for your body text. Using too many typefaces will just confuse your audience as to what is important, and what is not as important. If you need to emphasize something as being very important, use the same technique thruout your site, whether it means using bold type or a larger size or even a different colour, be consistent.

When a visitor first opens up your web page, their eyes will be drawn to these emphasized areas, so don't scatter them willy-nilly about the page or their eyes will become confused as to what you are saying.

Font Colour

Just a quick word about colour. People are used to reading black or dark type on a white or very light background. Make sure there is enough contrast between your type colour and the background colour so that the text is easy to see. This goes for your page links also. The standard of blue hyperlinks and red visited pages is entrenched in most peoples minds. If you opt for different colours for your hyperlinks, I would recommend underlining them so people don't get confused as to where your hyperlinks are.

Here ends part two. In the next and final part, we will put it all together and teach you how to use CSS to implement your typography strategy.

If you have any questions or comments, I can be reached in our Articles/Typography forum.

Mike Crone