Typographic Contrast and the web

In the previous article I used an example developed by Carl Dair to illustrate the concept of "legibility". In this article, I introduce you to one of the towering typographic minds of the mid 20'th Century and show you how his "Seven Principals of Typographic Contrast" apply to web design. The thing about this is, these principals were proposed before the word "internet" was invented.
Carl Dair was a Canadian and is generally acknowledged as one of the great typographic designers of the 1950's and 1960's. When he arrived in Toronto from Montréal in the late 1940's to join the Toronto firm of "Cooper and Beatty" he started a typographic renaissance that still resonates throughout the graphic arts industry to this day.

Dair simply didn't stuff type into a composing stick. He saw type as a creative medium and, as I have been pointing out in this series, was one of the first to view the words and letters on the page as a communications vehicle. To Carl, the type was more than the grey stuff that goes around the pictures and line art. He regarded the craft as the ability to make type express meaning- "Give words a voice" - rather than static decoration.

The cover of Carl Dair's book, "Design with Type"
IMAGE ONE . The cover of Carl Dair's book, "Design with Type"


In 1952 he wrote a book, "Design with Type" which is still available on Amazon. Though much of the technology he talks about disappeared with the advent of phototypesetting and then desk top publishing his discussion of the relationships between letters and words has stood the inevitable test of time. In fact this book is one of the best available and is one all serious "Web Designers", "Interactive Multimedia Developers" and "Flash Designers" should have chained to their PC's.

In the late 60's, Carl revised and updated the book and, at the same time, produced a series of pamphlets for the West Virginia Pulp and Paper Company (Westvaco) which he referred to as "A Typographic Quest". The purpose of the pamphlets was not to evangelize the use of type. The purpose was to create a series of paper sample books designed to promote the company's products. These were simple publications consisting of about 30 pages and measuring about 5.25 by 9 inches. Carl, never one to be satisfied with the status quo, saw this project as an opportunity to talk about his ideas regarding the use of type. The fact it was printed on Westvaco's paper was secondary to Carl.

These pamphlets, produced between 1964 and 1968 ( the year he died) are classics in the typographic trade and, because Carl was both the writer and the designer, each pamphlet was its own work of art.

"Typographic Contrast" is number 5 in the Westvaco series

IMAGE TWO ."Typographic Contrast" is number 5 in the Westvaco series and was published shorthly before he died.

In "Typographic Contrast" Dair shows how various forms of visual contrast make designs work and the visual meaning come to the surface. To do this he compares typography to music. According to Dair, graphic form and musical form have a common denominator: rhythm and emphasis, harmony and contrast. "Harmony and contrast", wroite Dair, "are fundamental to both, and the discovery of these basic principals and their application to the design of printed matter is the object of this volume of " A Typographic Quest".

The primary structural pattern of music is the three-part form of statement-departure- return (ABA) and it is no different in typography. In typography this form is based upon a fundamental three-part structure where two repeating parts are in correspondence and a third , contrasting part, stands in opposition.

How does it work? At its most basic it could look like this:

An example of of the ABA structure

IMAGE THREE . An example of of the ABA structure.

In this example two blocks of regular weight text bracket another block that is larger and bolder. A more ubiquitous,real world,example is the FedEx logo. The letters "E" and "x" (A) come together to bracket an arrow (B).

The Fed EX logo is a real world example of the ABA structure.

IMAGE FOUR . The Fed EX logo is a real world example of the ABA structure.

The seven kinds of contrast

To understand contrast you first have to understand the concept of harmony.

Harmony is one of those subjective issues. No two designers will settle on a succinct definition and Dair seemed to understand this. Instead of saying what it is he explains the "elements of harmony". These are ,he said, a consistent relationship between the black strokes of the letters on the page and the space around them: and any rules,frames or decorations being similar in style to the type. What he was getting here is that the lines and art used for rules, borders or other decorations should compliment the font.

In the example below I used a distressed font named " Confidential" for the Community MX name. In the top example I added an Art Deco border from Alien Skin's "Splat!" plug ins. The street, earthy look of the words looks out of place when bordered with flowers and so on. In the bottom example, I kept the font but changed the border to the "Spatter" frame in "Splat!" The look of that frame addds harmony because it is "similar in style to the type".

Harmony example.

IMAGE FIVE . The top image and its frame are dissimilar . The bottom frame is similar to the type and thus, according to Dair, the two elements are in harmony with eachother.

Type Contrast : Size

This one is easily understood because it is the first and most basic form of contrast. Altering the font size, immediately draws the reader's eye to the content. According to Dair, this works because the words or letters are set in the same style of type and they maintain the relationship of the letter to the background. All you really do is to create a physical enlargement of the pattern. This technique is most commonly used for head lines. For example, the subhead for this section uses a type size that is larger than the text you are currently reading.

When an artist goes to work with this principal interesting things happen. In the following illustration from the jiong.com home page you can see how your eye is immediately drawn to the "super sized" G. In fact the word " Jiong" is the first thing you pay attention to on the page. The key point here is that the font used for the lettering is the same.

Size is the most basic form of typographic contrast.

IMAGE SIX . Size is the most basic form of typographic contrast.

It isn't only static pages that can benefit from a size contrast. Young-hae Chang is a South Korean artist and translator who lives in Seoul. Using only text and music and the most basic of Flash techniques she tells stories that are raunchy, ironic, iconolclastic and fit the tone and mood of the piece in such a way that the words, animation and sound are inseperable.

Size can be used to great effect in Flash.

IMAGE SEVEN: Size can be used to great effect in Flash.

Type Contrast: Weight

This one is fairly obvious. If you look at the subhead for this section the first thing you notice is that it stands out from the background. In the example of Jiong , the "G" stands out because it is is very dark type in the middle of lighter type of the same style. One of my favoriute examples of this technique is used by one of the craziest sites I have ever encountered- titler.com. I have been visiting this site for a couple of years and it didn't surprise me to see it appear Curt Cloninger's book "Fresh Styles for Web Designers'.

The "Titler" home page.

IMAGE Eight: The "Titler" home page.

Right in the middle of the home page you are told how to have a "total titler experience". By combining the bold and ultra bold versions of the type face with the Roman , the eye is immediately drawn to the words "have", "a" and "you". Notice,too,how the contrast principal of size is also at play here.

In the example below, Carl Dair, uses this principal to great effect by showing it isn't only the Roman and Bold versions of a font that benefit from a contrast in weight. By mixing the Bold and the Ultra Bold versions of the type face both elements of the text on the page are immediately visible. In this proof of an invitation, done in the early 1950's for his employer- Cooper and Beatty - you read the headline and only later notice the italic type at the bottom of the page.

A brochure produced by Carl dair

IMAGE NINE : The contrast of weight is immediately evident in a brochure produced by Carl Dair in the early 1950's.

Type Contrast: Form and Structure

It is difficult, at best, to separate form from structure when talking about type. The reason is both terms essentially deal with the shape of the letters in the chosen font. When Dair talks about "Form" he is referring to the distinction between an upper case letter and its lowercase equivalent. He is also referring to a Roman letter and its italic counterpart. This also includes condensed fonts such as Frankilin Gothic Condensed and expanded fonts such as Univers Extended. As long as the forms compliment eachother feel free to use them This is why fonts are designed into groupings called "families". The various letter forms are all designed to compliment eachother. There rae even occasions where script fonts such as Park Avenue can harmonize with with standard fonts such as Garramond or even Bodoni. Though Dair mentions this he also cautions against it by making the vaid point that italics and scripts should never be mixed. This is due to the fact both styles are rooted in calligraphy and they are more likely to conflict than to contrast eachother.

The easiest contrast is to simply put two styles together like this:

Simply combining the styles of two fonts in a family contrasts form.

IMAGE TEN: Simply combining the styles of two fonts in a family contrasts form.

An even "edgier" approach is the one used by a Dutch PR agency named, "The Fish Can Sing". The contrast is achieved by mixing the styles throughout the various sections of their site. Designed by the British firm, Fibre, this site uses one font throught but mixes pages that are all upper case with pages that are predominantly lower case. It is quite effective and gives one the impression the entire site is composed of a horizontal scroll.

IMAGE ELEVEN: The client page for "The Fish Can Sing".

Fish Can Sing capabilities page.

IMAGE Twelve: The capabilities page for the same agency. The mix of upper case and lower case provides the contrast of form while maintaining design consistency.

Contrast of structure is a bit different. In this case the mixing of very dissimilar fonts provides the contrast. Done well, it is a design tour de force. Done poorly and it is a web disaster. Dair had a rather interesting take on this one. "The use of contrast of structure" he wrote, " may be compared to an orator who changes his voice not to increase or decrease the volume, but to change the very quality of his voice to suit his words." This is the root of what I was getting at in an earlier piece in this series when I suggested that you "give words a voice".

Bodoni contrasts with Frutiger

IMAGE THIRTEEN: You can't get more contrast than pairing the hefty Bodoni with the delicate Frutiger.

You can also see this principal at work in the sample of Dair's work in Image 8. The delicate italic contrasts rather neatly with the strong bold text above it. Still it is the web I am writing about here and examples of this principal abound. One of my favorites is Thirst out of the U.S. Note how well the contrast of structure works for this piece of their site which is from the objects area of the Valicente Brothers.

Two sans serif provide excellent structural contrast.

IMAGE FOURTEEN: Two sans serif provide excellent structural contrast.

Type Contrast: Texture

This is not adding a texture fill to a headline created in Fireworks MX 2004. In this case it is how the type looks as a single unit on the page. This texture is derived from the letterforms and how they are arranged on the page. Dair's description of this is both succinct and artistic :"Like threads in a cloth types form the fabric of our daily communication."

This page, from the Getty Research Library was designed by Cirus Studios of Los Angeles. It is a resource for the Russiantypographic innovator El Lissitzky who dies in 1941. What immediately caught my attention was the fact the site, though designed in Flash, is almost anti web because it carefully follows a print design. This lead in to the site features a tremendous example of Texture Contrast through the manner in which the text surrounds the photograph.

Typographic contrast from the Getty Research Institute.

IMAGE FIFTEEN: A great example of typographic contrast from the Getty Research Institute.

Dair also explored this concept in his own work. Here is a page for a paper sample book he created for the E.B. Eddy Company. Carl believed even doing simple work, like paper samples, was no reason not to employ his craft.

A page from a paper sample book designed by Carl Dair.

IMAGE SIXTEEN: A page from a paper sample book designed by Carl Dair.

Type Contrast: Colour

The sixth contrast is this one. The interesting point Dair made was that he felt the addition of a second colour was actually less emphatic than plain black on white or white on black. In this case the second colour is being used for emphasis and careful attention should be paid to the word or phrase being emphasized or the tonal values of the colours being used.

This principal is one that tends to be overlooked by a lot of HTML and Flash developers. The latest "fasion" seems to be grey text on a dark grey background. All this does is to reduce contrast, not enhance it, and make the page very unreadable. The other "faux pas" that drive me up a walll, across the ceiling and down the other wall is placing similar colors over each other. They will mix as you can see in the example below. Again, contrast is reduced.

IMAGE SEVENTEEN: Both words and the background share the gold color. The net effect is to reduce,not enhance, the contrast between the background and the words.

When looking for good examples of this principal , the movie sites would be a good place to start. For example, in the screen shot below, notice how the most important word in the title is "FIRST" and how it contrasts rather nicely with the rest of the text.

Color is used to contrast the word "FIRST".

IMAGE EIGHTEEN: Color is used to contrast the word "FIRST".

It isn't only the movie studios that use this technique to great effect. Underware is a type foundry based in the Netherlands. Their work is both elegant and "quirky". To give you an idea of just how "quirky", one of their newer fonts is named "Sauna". To promote it they produced a book that uses heat activated ink. Thus the only way to really "see" how the font works is to actually read the book in a "sauna" and they did just that in Amserdam. They set up a portable sauna in the street and invited people in to read the book.In this example note how their corporate orange is used.

Color used to contrast against the ubiquitous grey background.

IMAGE NINETEEN: Color used to contrast against the ubiquitous grey background.

Type Contrast: Direction

The last one is direction. This is the vertical or horizontal direction in which the type flows. Turn a word on its side in a web page and people will see it. It isn't only words that can benefit from this. CSS columns that stagger from wide to thin can also provide a rather interesting form of contrast.

The guys that can really work with this concept are Flash developers. Not only can they manipulate words but they can also animate them. The example below is is taken from the site for "Catch Me If You Can". This is the ending sequence of the Flash animation and the words move onto the screen from either side of the stage.

Flash MX 2004 gives you the freedom to add motion to the direction.

IMAGE TWENTY : Flash MX 2004 gives you the freedom to add motion to the direction.

The web site of Hyphen Press out of the UK is a case study in typographic clarity, legibility and functionality. It brings a print discipline to the web and in this example, the direction princiupal can be found in the contrast between the the text block from the publisher and the actual text underneath it.

Horizontal to vertical direction shift.

IMAGE TWENTY ONE: Note how the direction shifts from horizontal at the top of the page to vertical.

Conclusion:

This article has reviewed the important principal of typographic contrast as presented in a brochure written fifty years ago by the canadian typ[ographer Carl Dair. He presented seven principals ranging from type size to the direction of type on a page. Though written for people whose profession was print, Carl's words are equally a[pplicable in a medium he never experienced.

Obviously, designing sites that stay within only one of the principals is counter productive and constraining. Through the many examples presented you can see how the professionals who design sites or Flash animations mix these principals to achieve their design goals.