Why Is Text So Important?

Well, it tells people things, for a start. Without words, your images have an awful lot of work to do. Aside from this flippant point, it should go without saying (although We will say it anyway) that your text should be legible, to the point, and within easy reach. Visitors are rarely coming to a web site to sit back and admire your graphics-it is most often information they are seeking. Graphic embellishments are often mere decoration.

The issue of accessibility is an important one here. Responsible web developers spend a lot of time ensuring that their designs are not compromised under user-defined viewing situations. For example, if a style sheet is not available, or images are turned off, the image-based buttons in the navigation bar will need replacement text to assist navigation. Equally important is replacement text for general images, especially images that convey a particular message or act as a link to another page, and there are many circumstances where background colors can conflict with text of the same color when images are absent.

Issues such as these need consideration at every stage of the design process. Essentially, your web site should make just as much sense with or without all images, and the hierarchy of your content should remain apparent in any situation.

Convey the Mood with the Right Font

The right font for the right job communicates with the user instantly. Your text is the first ingredient to appear as the page is downloaded, and it can instantly tell the user whether the web site is serious or friendly, modern or traditional, formal or casual. Do you want the web site to give the impression of a newspaper or journal, newsletter or fact sheet? If you do not want to convey such an authoritative standpoint, then maybe something humorous or light-hearted is needed? Choosing the right font or combination of fonts is key to creating the right impression from the outset.

Later in this tutorial you will review the most common typefaces available to web designers, and look at several that can be added to this list with a sprinkling of caution. Each can suggest the tone of the web site if used carefully.

ClearType Font Smoothing

Most seasoned web designers will tell you that text renders better on Mac browsers than on their PC equivalents, because the text is anti-aliased (meaning jagged edges are softened by the addition of intermediately colored pixels around the characters) as shown in Figure. It is certainly fair to say that those who build mostly with Mac browsers are often disappointed when they review their work over on the office PC.

The letter on the left is aliased, whereas the one on the right, which is anti-aliased, has softened edges with intermediately colored pixels.

Often, however, what is actually happening is the font they specified in the CSS is not available on the PC, and so the display defaults to the next available specified font, which can carry less clarity in some cases. However, it could also have something to do with that PC’s basic settings. The ClearType setting is a valuable asset for PC users, and is a preference local to a particular machine. In other words, it is not something you the designer can dictate through your design. It is worth considering ClearType though, as although it makes your PC-based browsing more enjoyable, it can also give a false impression of how your PC audience will view your work.

Basically, ClearType enhances the horizontal resolution available for rendering text through software such as web browsers, resulting in a much clearer display of text on liquid crystal display (LCD) screens. The benefits of ClearType rendering are less obvious for users with CRT displays, but still worth experimenting with. The outcome is less-pixilated characters, bringing the browser display a little closer to the smooth perfection of printed text.

ClearType is regrettably turned off by default, and is only available on the Windows XP operating system or later. To enable ClearType font smoothing on your PC, right-click the desktop, choose Properties, then choose the Appearance tab and click the Effects button. In the dialog box that appears, there is a drop-down list that lets you choose between Standard and ClearType font smoothing, as you see in Figure below.

Turn on ClearType font smoothing on your PC.

Once you have turned on ClearType font smoothing, it is worth visiting the Microsoft help section (www.microsoft.com/typography/cleartype/tuner/Step1.aspx) to fine-tune your settings.

It is always important to consider users who either do not have font smoothing turned on or do not even know about it, which will be a significant number. Be sure to switch between Standard and ClearType displays when testing your design, especially prior to launch. It just might be that there is a better font for the job that can suit either preference, and other platforms, and does not compromise your design as a whole.

[Contents] [Next]