Let's Talk Fonts - Web Design Tutorial

Tim Carden 1 My friend emailed me a photo of a homeless old man holding a sign: "Will code HTML for food". Is this what the world is coming to? With all the visual tools out there these days, being able to comprehend the potentially-scary HTML is not really such a feat anymore. Gone are the days when being able to do it was enough, now it needs to look good too. In this tutorial I'm going to run through a few font-themed essentials that should be in the back of your mind at all times when building websites. Not everyone has 10,000 fonts installed! The web started with Times (or Times New Roman if you were on Windows). Hundreds of "ban Times New Roman" cult groups and "victims of ban Times New Roman cult groups" support groups later, the trend is changing. True, you could use any font you had on your system, but users would have to have that font installed or their browser would go back to, you guessed it, Times New Roman (or whatever the browser default is). Both Netscape and Internet Explorer support a form of font embedding, but at last check they were still incompatible. For consistency it is best to follow two golden rules: Stick with the fonts that "everyone" has installed. Provide a list of alternate fonts, should the desired one be unavailable. Microsoft owns the rights to a large number of fonts. Some of these have been specially designed for easy reading (see below). They ship several of these special fonts with all their products, including Internet Explorer. You can fairly safely assume that the vast majority of your webpage viewers will have these fonts installed. My favorites include the original Times New Roman, Arial, trebuchet ms and Fixed Width. If your visitor doesn't have the font installed, chances are they will have one just like it. This leads us onto the next point: the font list. Standard HTML for a font tag goes something like this: <font face="Arial">THIS IS SOME TEXT</font> Some visitors may not have Arial, but have a very similar font called "Helvetica" installed instead. If they don't have Arial installed, you would prefer this similar font to be substituted instead of letting the browser choose its default font. However, if you list Helvetica instead of Arial, then all the users who are missing Helvetica will have the same problem and you are back where you started. Fortunately HTML lets you list Fonts in a priority order. We can specify Arial, if it's available, or Helvetica if Arial is not available. These lists can be as long as you like and normally start with the most desired font and finish with the most compatible font. Here is our example above with more options: <font face="Arial, Helvetica, sans-serif">THIS IS SOME TEXT</font> Every browser should have three base fonts linked to installed fonts on the users computer. These are sans-serif (without the little hooks and curls on each letter), serif (with the little hooks and curls on each letter) and some form of fixed-width font. You can use the fixed-width font by wrapping the <TT> tag around some text. In the above example, the browser will search for Arial, then Helvetica if Arial is not found, and finally revert to the default sans-serif font defined in that browser.   2 Web pages are viewed online...ouch In print, a person with good eyesight can probably view 1pt text. On-screen however, 7pt starts to get all fuzzy. This is because a typical computer screen has a resolution of 72dpi compared to the 300dpi+ of printed media. Consequently it is important to keep the font size large enough to be clear on-screen. Fortunately HTML allows a minimum of "1" (about 7pt). This is okay for some fonts, but many others start to get very unreadable at this size. Remember that not everyone can see as well as you.   3 In Graphics The obvious solution to ensuring all users see exactly the same text is to render the text to a GIF or JPG image. However this will cause the page to be far too slow to download and is only really practical for page titles and page navigation items. But even with graphics it is important to consider legibility. T I P True Type fonts can be as simple as a curve stored for each character (just like some simple b/w clipart). However, the TrueType format also allows for inbuilt code to dynamically change the font shape at different font sizes ("hinting"). This lets the font display itself more legibly when very small while showing more detail at larger sizes. Many fonts don't include this additional component making them unsuitable for smaller sizes. Of course, some fonts wouldn't look good at smaller sizes no matter how much hinting there was. When rendering a text design to a bitmap, a graphic application will normally anti-alias (smooth) the text. Surprisingly, the anti-aliasing in many graphics applications seems to be different to what Windows uses internally. It is almost as if it is ignoring this hinting information. Consider the three images below made in Corel products. Note how more anti-aliasing is applied by DRAW. This results in a smooth and sleek image which is perfect for larger text and graphics, but less-crisp than default Windows anti-aliasing at small sizes. Some graphics software, such as Macromedia Fireworks, offer varying degrees of anti-aliasing. It is important to present the most legible text possible. If compressing to a GIF file, less anti-aliasing will generally also result in better compression. JPEG is the opposite. Be sure to experiment with no anti-aliasing as often there are a few particular small sizes that Arial, trebuchet ms and others look incredibly good at small sizes with no anti-aliasing. Some graphics software anti-aliasing is less-crisp than Windows internal anti-aliasing 4 Finally, the obvious... Like all design, don't go overboard with your font usage. Generally stick to a maximum of 2 fonts on your entire site. Consistency across titles, pages etc. is absolutely critical. Having one heading at size 5 and then another at size 4 gives an unprofessional slant to your pages. You may want a dis-joint rebel look and feel to your site, but even then ensure there is an underlying consistency or users will likely get frustrated and leave. Simplicity is best, and remember form follows function: the purpose of your webpage text is, first and foremost, to be read. Keep that in mind when considering any website typography.   What did you think? Did you like this tutorial? Was it easy to follow? Do you have suggestions for future tutorials? Have you seen an effect in Print, web or Flash that you would like to know how to achieve? Please feel free to contact me (Tim) on tiem@healthposts.com.au with your Corel technique query.   Copyright 2001, Tim Carden, All Rights Reserved