Q4:05 Newsletter What's Your Type? A Beginner's Guide to Words on the Web

Pop Culture Updates Q4 2005   What's New with Blogs, Forums and Wikis?   What's Your Type? A Beginner's Guide to Words on the Web   Educate to Convert

Ask print designers their favorite font and you’re likely to get one of two answers:

1. Dead silence as they mentally examine tens of thousands of fonts
2. “Trade Gothic”

 Ask the same thing of a web designer, and you’ll likely get one of two questions: 

1. Image font?
2. Web font?

Web Text

There are two main ways fonts are rendered on the web. The first, most web-friendly way to display fonts is as text, using the fonts included on the site visitor’s computer to display the type. A web page’s code (HTML) contains paragraphs of “web text” that is easily edited, selected (for copying and pasting), and machine-readable.

 

There are several major advantages to web text, the most important of which is flexibility. Web-based text is displayed in the browser after being downloaded to the user’s comptuer. The only information downloaded is the text and a suggested size and font.

 

Note the word “suggested” above. The power of web text (and the web as a whole) is the amount of control given to individuals. Each visitor to your site has the ability to display text differently based on his or her individual needs. Perhaps Joe has poor vision – he can increase the size of all text displayed on the screen, no matter what the web site.

 

Web text is highly machine-readable. Consider Helen, a blind visitor to your site. Because your site is simply text, Helen can use special software on her computer to have your site read aloud and still get the same information as sighted visitors. Google and other search engines have similar software that can also read the web text on your site, helping immensely in search engine marketing.

 

The second major advantage of web text is file size. Computers read data (such as letters and numbers) and transmit information quickly. What computers are slower in is changing the shape or look of those letters. Web text relies on the visitor’s computer for styling the letters, saving on file size.* There’s no information downloaded specifying the shape of each letterform, or the “font” information, which is more complex, and thus, a larger download.

 

“Web text sounds great! Sign me up!”

 

There are some down sides to web text, mainly from a design perspective (it had to come back to design eventually, right?). The fact is, without differences in text shapes (font), size, and color, every web site in the world would look like craigslist. Font, size and color are very important for establishing visual hierarchy, usability, and most importantly, branding and identity.

 

Web text allows us some controls over type’s size in a relative way. Designers can specify bits of text as sub heads (<h1>), headlines (<h2> and higher), and paragraphs (<p>). Size of this text is relative to the settings of an individual’s browser for paragraph text (usually the equivalent of about 12 point, plus or minus). Control over things like leading (the space between lines) and kerning (spacing between letters) is not possible in the most basic web text. (We’ll talk more about controlling these types of features in Part 2: Web Text 2.0.)

 

Fonts (finally we’re back to that!) for formatting web text are pretty sparse. Because formatting the shape of the letters (the font) is the job of the visitor’s browser, fonts are limited to the fonts installed on that visitor’s computer. In a designer’s case, thousands of fonts may be installed, but most companies don’t have designers as their primary audience. Instead, we must rely on those fonts common to a large majority of web visitors, fonts that come with the computer. They are:

 

Arial: a contemporary-looking sans serif font. Looks reasonably good at large as well as small sizes.

 

Arial Black: like Arial, but a little bolder. Heavy-handed, but not as awkward as Impact (below).

 

Comic Sans MS: There are entire web sites devoted to why you should never, ever use this font. Of course, as with all rules, there are exceptions.

 

Courier New: A typewriter font, but a bit cruder. Looks better at smaller sizes than at large, where you can see its faults better. A little “dime store novel”-feeling

 

Georgia: One of my favorites, and one of the most underrated fonts on the web today. It’s a slightly more contemporary version of Times with some additional flourishes. Good for a light, traditional look.

 

Impact: There is no reason for you to use this font. Period.

 

Times New Roman is a classic font. The Times family was originally developed as the text font for, you guessed it, the New York Times. As you might suspect, it’s pretty traditional, but tried and true as well. A very readable font for text.

 

Trebuchet MS: A European-feeling font, originally inspired by road signage. Very readable on screen, though it looks better at larger sizes than it does at smaller ones.

 

Verdana: My wife once called this Veranda, and I have a hard time not reading it that way now. A good choice for slightly less informal, not nearly as pretentious as Arial.

 

Somehow, I doubt those fonts made it into your company’s corporate style guide. Fonts make up a big part of your company’s visual identity, and your web site needs branding too! So what to do? Most companies choose a combination approach when it comes to fonts. Use web text for the small type, where minor differences between fonts disappear, and opt for …. Drum roll, please:
 

Image text

The other way to display type online is as an image. In this case, a jpg or gif is used to display a picture of the type. Image type is useful in a number of ways. It can be rendered in any font imaginable, with any color in the universe (even transparent!). Image type can even have motion (using animated GIFs), though that’s a path most designers tend to steer clear of.

 

<insert “wow” graphic here>

 

The pros for web text are the cons to image text – it’s tough to edit, since design software tends to be expensive and fairly complex for non-professionals to use. Image text is also controlled by the designer, not by the user; it’s not possible for users to make text bigger or smaller depending on their needs. It’s also not as readable by screen readers (audio browsers) or search engines, though there are workarounds available (<alt>).

 

Image text can also be a hefty download. Generally, simple things like headlines are lighter than text on top of photos, but compared to its web text equivalent, image text is a bandwidth hog.

 

There are a lot of benefits to image text from a design perspective. Font selection we’ve already mentioned, but there are more – text justification, kerning, and leading are all controllable by the designer, so your web site can be as perfect as your magazine ads or business cards.

 

Next time … tune in for Web Text 2.0 (Expanding possibilities with CSS)

 

*If you’re a veteran computer user, you may remember the “good old days” when there was only one typeface used on very slow computers. Now computers are magnitudes faster, but still never quite as fast as you’d like them to be. The interface looks a lot better, but its visual complexity (millions of colors vs 2 colors) is the main reason your computer isn’t running at light speed today.

Discover Pop Art's Web Design or Branding and Identity services.