Digital Web Magazine

The web professional's online magazine of choice.

Type-O-Graphy: making words stand out, every time

Got something to say?

Share your comments on this topic with other web professionals

In: Columns > DigiSect

By Stephen Van Doren

Published on July 10, 2001

Typography has suffered greatly in the digital realm of the 'Net. From sites that use the default-sized 100%-black Times New Roman to the people that feel you should have the same fonts as they do, we've sacrificed a lot of our integrity as designers. One would think that with the dawn of usable style sheets - typographical treatment is supported in almost every browser that is typically used-including, to a good extent, Netscape 4 - we would've gotten past these hurdles.

However, the vast majority of Indy web developers think that typography on the web will never be what it is in print, so why bother?

Quite frankly, my opinion is that it's something that we need to start concentrating on. Soon.

There's no reason to bemoan the futility of using some proprietary typeface in HTML text. That's not going to change in the near future. If you're really into that sort of thing, do all your content in Flash, where you have complete control over how your type appears and behaves on anyone's monitor.

Otherwise, let's move on.

The Times (New Roman), They Are A-Changin'

Let's first take a look at the availability of fonts that you can use on the 'Net. Of course, there is Times New Roman and Arial. Everyone knows about those. We've learned from our friends in the print arena that at large enough sizes, Times New Roman is the most readable font available. The serifs, though distracting to a small minority, allow the reader to glance over words at an alarming pace. Arial, without any serifs, tends to make the reader concentrate slightly more. This is not really a problem, as most web surfers these days have acclimated to the san-serif "font face" that we've grown to love, and no one will be the wiser. The results are the same when Helvetica, Geneva, and Palatino are specified for Macintosh users.

Over the past two years or so, an gaggle of new fonts has taken the web by storm, thanks to Microsoft. The foremost of these are Verdana & Georgia, both were designed by Matthew Carter. Both fonts are readily available and standard on almost every machine on which Internet Explorer has been installed. So we, as web developers, have felt perfectly comfortable using them as a standard. Specifying type for Linux users is somewhat more of a challenge, but generally speaking you can at least harbor hopes that they too will have these fonts installed.

This is not news. This is what we've been trying to do for quite some time. I cannot count the number of times that I've had to have a conversation with a developer about the typography of certain elements, setting aside certain pieces to be important, using the type to convey mood.

But is that all we've got at our disposal? Is it just the formatting of large chunks of text? Content? Is that all there is to change on the web? I hope not. Welcome to the visual hierarchy of typography, and the inherent benefits it offers.

Bold New Steps

You'll notice that Digital Web Magazine is formatted with several typographical formats for hierarchy. This is very important in a content-rich site. First and foremost, it makes the content interesting. Even something as unobtrusive as an italicized or bolded word makes it interesting-as long as that word/phrase is something that really needs to be emphasized.

Looking at italic and bold usage alone, you can see a trend, a commonality of inference. By simply changing a word that you think is important (as I have just done in this sentence), you've not driven the point-you've just confused the reader, and he/she will go elsewhere to get the information/product.

Let's pretend that you're putting a large chunk of text in a website about plumbing. If the content reads as follows...

Plumbing is easy and fun! Anyone can do it, and it saves a great deal of money for home improvements and quick fixes!

...Then your audience is going to immediately deduce a few things about how you feel about plumbing (and how you want them to feel, in fact).

First, you're driving the point that anyone can do it. Say that sentence out loud and emphasize the word "can." You'll notice it almost sounds condescending. Further, the audience sees that the only reason to do plumbing would be for home improvements and quick fixes. If your purpose for the content is to sell something, you have failed. If it's rewritten...

Plumbing is easy and fun! Anyone can do it, and it saves a great deal of money for home improvements and quick fixes!

...Then you've driven the point of saving money-something anyone can identify with. Do you see a trend?

Talking Heads

Headings are an important aspect of typography on the web (as well as in print). What's important to a reader when you're trying to sell them plumbing equipment? The brand, the price, and why they should buy it, right? Well, we use typography as another tool to make this a much easier thing to do.

I recently saw a television commercial for Janus Funds. I was left in awe at the amazing typography that they used. The words were spilled across the screen in a fade-in and fade-out motif as the announcer spoke them. But something stood out to me: in the sentence "Janus can help save you money, and keep your business alive," the words "Janus," "money," and "alive," stayed just a few moments longer than the rest of them. For an extremely brief moment, you saw only "Janus," "money," "alive," splashed on the screen. Sure, that doesn't tell you too much, save for the fact that Janus is all about money and staying alive (so to speak). You already know that Janus works for businesses, so your mind figures out that they will save your business from death. Hooray!

Make sense? It is subtle, yet effective.

Why do I mention this? Simple. If you're using headers effectively (as "Janus," "money," and "alive," are headers in the commercial and used effectively), then the audience is going to be able to leap from point to point, paying less attention and learning more. Why is this?

Because - let's be honest - your audience isn't going to spend a great deal of time reading your corporate mission statement. Chunk it, give it an appropriate header, and move on.

Typical Imagery

The final step in tying everything together is the image-work that you do to make your design complete. I'm talking about your navigation system, as well as the fonts you use to convey the mood in your design-at-large (read: banner-level stuff).

If all your content, for example, is laid out in Times New Roman, your second level headings are done in Georgia, and your primary headings are in Georgia all-caps, it would only make sense that your graphics be in a serif font, preferably something that ties in well with the serif fonts in your body.

That's what is meant by consistency. I wouldn't dare suggest that you use the same font everywhere—that's simply boring—but tying the navigation system, for example, in with your content just makes sense.

Have fun with the rest of it, but keep it together. Tie it in.

Until quite recently, it was assumed that typography on the Web had designers by the throat. These rules are quickly changing, and it's important for us to keep abreast of the new developments. Flash, CSS and other tools have given us the ability to keep our audience interested in our words, while at the same time preserving reasonable download times and highly usable sites.

Besides All That

I mentioned previously that some elements of type have to be set apart, or one's content will fail to engage the reader's interest.

We're not putting books online, a fact which begs a new approach. The best example of such an approach that I've seen online (consistently) has been Adobe. In their articles (such as HTMHell by Jeffrey Zeldman), pieces of the body text are copied out and turned into graphical elements to give the reader a point of focus (one sentence, maybe two) that will help them to decide if the article is going to be even slightly interesting.

This is a powerful tool for designers to use. Quote the article in a sidebar (or "floating" block) and give the reader a chance to decide if the content is important enough to read.

Not only does this design technique give you the opportunity to use a proprietary font as a design mechanism in the content, but it also makes the content easier to read. Simply put, the graphical element will break up the content enough so that, even if it's a huge amount of text to read, it will not be nearly so monotonous. Try breaking out something every 5-6 paragraphs—you'll be amazed at the power you've just unleashed.

These elements are also effective as headings for the content. Each one serves as a placeholder for the content that will follow. In a 'blog, such an approach can be used in tandem with links. It establishes, immediately, what the author/designer team believes is most important about the article. Without them, we're left with only hierarchically-arranged text, like what's used on this site.

If this article didn't have any headers, I doubt you would've read this far. Huge, boring chunks of text don't make for easy reading on screen. We've become far too spoiled for that to be the case.

Tying It All Together

You've got your hierarchy, you've got text that is chunked out in pieces that the reader can understand and chew on, and you've set aside graphical elements to further point to the visual navigation of the content. What is left?

The final piece of the typographical puzzle is acceptance and consistency. If you can take the steps to make your content interesting, on a day-to-day basis, chances are quite good that your content will continue to be interesting to read, and fun to follow.

I will thank you, the Web will thank you, and your readers will definitely thank you.

Got something to say?

Share your comments  with other professionals (2 comments)

Related Topics: Typography, Web Design

 

Stephen Van Doren is a software developer and graphic designer from Denver, Colorado.

Media Temple

via Ad Packs