Web Typography, Now There's An Oxymoron!

The home page of http://chriswilhitedesign.com/ is an exacellent example of web typography
We are not relegated to the usual fonts as this great example of Web Typography from Chris White Design demonstrates.

I am going to talk about type. Type is not the grey stuff that goes around pretty animations or the images  Type is not the stuff that is so small only a monitor with a resolution of 320px by 240px can display the words to the average 50 year old. Type is not the stuff that looks like it went through a wood chipper and somehow is just oh so cool. Nope. Not here. This article is going to talk about the construction and presentation of the very words you are reading.

The web, as a communications medium, is new and yet the principles that govern the presentation of the message-- the words you are reading on this web page-- have their roots solidly placed in the mid 1400's when a German jeweler faced with the prospect of Debtors Prison applied his craft to Moveable Type. That is the standard jumping off point ; it  really isn't. It was actually invented in China in the 1040's. Type historians generally acknowledge a Chinese engineer, Bí Sheng, as the inventor of moveable type. There is an account of his typesetting process by the 11th century essayist, Shen Kuo.

Much of the state of today's web typography chaos is the inevitable clash between a technology that is over 900 years old and one that has existed for about one third of one percent of that time ... the PC.

The above image is the home page of Chris White Design.

Though I have my difficulties with his pronouncements and dictums, the First Principle of Robert Bringhurst's book, The Elements of Typographic Style, is one that should be tattooed to the inside of each Web developer's left eyelid. It clearly outlines the intersection of typography and the web and how important typography is to our craft. The principal? Typography exists to honor content.

I, for one, am seriously tired of visiting sites where the designer, in an effort to remind his or her peers how very clever they are, mocks the content through the use of a shredded font that obfuscates the message and the meaning of the words on the page.

I am so tired of visiting sites where the type is so small, yet oh-so-trendy, that I refuse to read the words because they're too damn hard to read. Why do I have to be subjected to sites where the important words or message of the page are lost because the designer didn't understand that line length really does count for something? How does the use of a page full of distressed type honor the content? The content is your client's message or branding statement. It is contained in the words around the images and animations. It isn't the images and animations.

Type is the single most important element of the web communications process. People don't visit your site to admire your work. Your peers do that. People visit your site to obtain information. If they can't read the information because the text is too difficult to look at, let alone read, how can they be expected to understand it?

What happened to make the state of web typography so dismal?

The computer happened and in certain respects it happened too darn fast. When desktop publishing arrived in the mid 1980's, practically every typesetter on the planet lost his or her job within five years. The craft with a rich 900-year history and trade mentality that usually involved a long apprenticeship virtually disappeared.

Their jobs landed on the shoulders of the people who were the least qualified to assume the role: graphic artists.

The relationship between typographers and graphic artists was symbiotic. They relied closely upon each other. In the mid-70's an article made the rounds of the Art Director community in Toronto and elsewhere. It was quite funny, because it explained how to become an internationally acclaimed art director. All you needed, to achieve this exalted status, were two phone numbers. The first was the number of a great typographer in town and the second was a photographer. The copy was sent to the typographer to be set and the photographer took the picture. Then the ad was assembled by the typographer and printed. The next step was to carefully cut the ad out of the magazine, mount it and courier it to the Awards jury. On the awards night you dressed in your finest clothes, and when your name was called, you firmly grasped your trophy and simply and humbly, thanked all of the little people that made it possible for you to be here tonight. Though the story is a bit hard on Art Directors it clearly illustrates what happens when professionals- typographers, photographers and graphic artists- who understand Bringhurst's First Principle work together to honor the content.

When the web arrived, the art of typography virtually disappeared. It disappeared because, on the web there is no typography, there is only type. There is only type because typography is a creative art that can't be controlled by HTML or even CSS.

Image is home page of Miss Mary Morning Elixer.

We start with our raw material--the pixel. In certain respects I am deeply envious of our print brethren because they get to play with three to ten times more pixels per inch than we do. Then they get to have thousands of them come spitting back out when they go to film or print. Not us.

The best we can hope for is about 100 pixels at the time of creation and output. We are relegated to "interfacing" with our audience through a computer screen.

This explains why the fine nuances of a Garamond serif roughly resemble a serif and the difference between Helvetica and Arial is difficult to distinguish. This also explains why pages that look great at a screen resolution of 800 X 600 sometimes require an electron microscope to read at a resolution of 1024 X 768.

Without Postscript and its offspring TrueType to help us along, enlarging type simply enlarges the pixels used to create the on-screen letterform. The result is a meltdown of the typeface. Serif fonts suddenly look blocky and chunky. Loops lose their smoothness. The leg of a k starts to wander--then it gets worse.

Knowing this, designers convert their text to artwork by converting it to outlines or make use of web fonts from such locations as Google Fonts, Typekit and Font Squirrel.

What we tend to forget, when it comes to choosing fonts, is that they give words a "voice". The reader actually forms opinions of the content based on font choice. Figure 6, below, illustrates this point. The only difference between each "About.com" is the font. As you can see, each font choice, Arial to Confidential, sends a different message about  the company.

Even the choice of font within a font family can actually add a "voice" to your design.

A good example of this, originally developed by Carl Dair in his book Design with Type, uses good old Times to make the point. In the example below, if you were to give the words a voice, you would be correct in saying they are a monotone.

Combine the Times Italic font with the Times Bold font, and suddenly the words take on new meaning. The first word, ah, looks soft and practically sighs. This is due to the design of the font that has a calligraphic, gentle look. The second word, ha, seems to shout at you.

Just as important as the voice is the actual design of the letter forms. There are distinct design differences between the Roman, Italic and Bold versions of the letters. Looking at the difference between the Roman a and the Italic a, one could not be faulted for claiming they are not at all related. The differences between the Roman and Bold version are not as evident but they are there.

These differences raise an important question: If you have Times and Times Bold on your computer, why do you need to add a stroke to the outside of the letter in Illustrator or Photoshop?

In this article I have introduced you to two important concepts behind type. The first, and most important, is that Typography exists to honor content. Always keep that in mind when designing your pages. As I constantly tell my students, "Fall in love with the user, not the technology." If you don't honor the content on the page then you are in love with the technology.

A relatively easy way to honor content is to simply let the words tell the story by giving them a voice.

This is the second concept. All of the fonts in a family support each other and even the choice of font can send a message opposite to the message you intended to send.

Image is the Taste-Rewind page at Spotify.