Web Typography

Unlike documents created for the print medium, Web developers cannot make use of whatever typefaces (fonts) the author fancies or may have available on his computer. The Motive Internet Glossary explains that "In order for a webpage to use a specific typeface (as HTML text) it must be available (installed) on the user's computer. By extension, a typeface that is installed on the majority of user's computers may be referred to as 'web-safe'." Read the article to learn which fonts are "web-safe."

That means that if you think you absolutely must use a specific font and aren't sure it will be loaded on the user's computer, you must transform the text into a graphic, using a program such as Photoshop, ImageReady, or PaintShop Pro. Remember, that the more graphics you use on a page, the slower it will load. Also remember that a voice-synthesized "screen-reader," such as blind users employ to learn what's on a Web page, can't read graphics, so you must always identify graphics with an "alt" tag. The content is what's important; just make sure it's good content and that it's legible.

Web Typography is evolving as we speak. HTML 4.0 codes can specify the size and color, and typeface use Cascading Stylesheets (CSS) to format your Web text, but since the two major browsers don't always interpret these codes in the same way, we still don't have a fool-proof way to format fonts so that they will display in a predictable manner in all browsers. Aunt Mary recommends you first learn what you can do with HTML 4.0 codes to enhance text attributes. Then start experimenting with Cascading Stylesheets (CSS). Keep in mind that not all of the fancy effects that CSS codes can create will display in all browsers; so be sure to TEST your results in all recent browsers before launching them for public view.

The following Web sites offer an abundance of information on Web typography:

  • An excellent place to start is the Yale Web Style Guide. Scroll down the contents list to "Chapter 5: TYPOGRAPHY". There you;'ll find two super-important statements:

    "... perhaps the most distinctive characteristic of Web typography is its variability. Web pages are built on the fly each time they are loaded into a Web browser. Each line of text, each headline, each unique font and type style is re-created by a complex interaction of the Web browser, the Web server, and the operating system of the reader's computer. The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions   of how your pages should be rendered -- you'll never know exactly how they will look on the reader's screen."

    "Cross-platform font sizes. The Macintosh and Windows operating systems display type differently, even when the same typefaces are involved. In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on the Macintosh. This difference in font rendering can have a major impact on your page layouts."

  • Suzanne Stephens illustrates and explains good use of typography on her site "Web Page Design for Designers."


Last updated October 9, 2004