I am available for freelance work - HIRE ME

On the Integrity of the Typeface

posted by Matt Ward on Feb 8, 2011.

In any well designed typeface, every character (or glyph) is meticulously and carefully crafted to work within a very specific typographic system. Sometimes, that system can be tight and rigid, and other times it can be much looser. Either way, the system is critical, and I believe that as designers we need to respect that system, and the integrity of the typeface. In this post, I’ll explain why.

Like so many different things, I think that there are stages to our development in the fine art of typography. I don’t think that these stages are particularly structured or concrete, but as we evolve as designers, we learn more about type and become more comfortable with how to use it, and in many cases how not to use it.

I wouldn’t say that I am an master typographer, but over the past twelve to eighteen months or so, I’ve become increasingly interested in typography, and have learned a great deal. Some of it has been from reading excellent books and articles on the subject, and some of it has merely been a matter of my own trial and error. One of the things that has emerged out of this learning is the simple fact that I now hate absolutely every design in which I have ever used Bank Gothic. It’s not that it’s a bad font, I’ve just that all of my previous uses (and none at all over the past several years) were entirely misplaced and just plain wrong.

More importantly, however, I have also learned to appreciate the integrity of a typeface.

Any typeface that is really worth using has been meticulously and carefully crafted, usually be a passionate and thoughtful type designer who has poured over hundreds, if not thousands of drawings and sketches, and spent hours and hours perfecting every curve, serif, stem and other detail of the vast range of different characters that make up a single typeface. Each character is a carefully crafted design element in its own right, and in the name of good typography we need to treat them as such.

It is for this reason that I would argue that good typographical choices will respect the integrity of a typeface and avoid stretching, slanting or otherwise manipulating text simply for the sake of achieving a particular effect.

Think of the Face in Typeface

To illustrate this point, it may be useful to try taking the word “face” out of typeface and thinking in those terms. Every person has a face. Every person also has very specific details in their face, including certain proportions, and when you start messing with those proportions, things tumble down hill very fast.

For instance, here is a nice photograph of a woman, which I have cropped to focus just on the face.

Here we have normal image of a woman at standard proportions

Here we have normal image of a woman at standard proportions

She is an attractive woman, but what happens if we take the image an start stretching it either vertically or horizontally? Let’s see:

Here we have the same image stretched vertically, and it looks horrible

Here we have the same image stretched vertically, and it looks horrible

Here we have taken the same image and stretched it vertically, and it looks awful. Her face is clearly too long and the entire image looks so off that a five year old could probably tell you that something wrong. Most adults would probably cringe when seeing something like this.

So then why do we, as professional designers, attempt to inflict this same kind of visual butchery on our typefaces?

Font Stretching

In direct contrast to our face analogy, one typographical crime that is often committed is the attempt to stretch out a typeface in order to achieve something in a design. I’ll admit that I have been guilty of this in the past, a guilt which likely stemmed from not fully understanding the nature of type. I don’t have a particular incident mind, but I can address the kind of thinking that probably led me to make a number of these typographical blunders.

It usually has something to do with trying to force a typeface to be something that it’s not.

Since I’ve been flipping through it lately and it’s right at the top of my mind, I’ll use the cover of Jeremy Keith’s excellent HTML5 for Web Designers to frame an example.

HTML For Web Designers uses beautiful typography

HTML For Web Designers uses beautiful typography

See that beautiful title, which just happens to be set in a typeface called Tilting Gothic FB (see the Colophon at the back of the book), likely using the Skyline Regular from, though the later is just a guess on my part. The point is that the tall, tightly condensed letterforms look really lovely, especially when paired with the serifs of FF Yoga.

As a young designer, I may have wanted to emulate this look. However, as I did not have this font and did not understand the integrity of type, there is a good chance that I might have tried to achieve the same feel by setting my text in the all-mighty Helvetica (ahem), and stretching it out vertically to try to create that same sort of tall, narrow look to the letters.

A stretched Helvetica doesn't have the same effect. In fact it looks quite horrible.

A stretched Helvetica doesn't have the same effect. In fact it looks quite horrible.

Doesn’t have quite the same appeal does it? Just look at those strokes. By stretching the shape of the text, we break the carefully balanced proportion between the horizontal and vertical strokes. The horizontal strokes appear significantly thicker than the vertical strokes. If we were to stretch the text horizontally, the opposite would occur.

Either way, this has a strong negative aesthetic quality of the typeface, and should really be avoided at all costs. The only exception that I can think of would be using a little trick in an application like InDesign, where you can allow the application to subtly adjust the width of glyphs in order to allow for better word spacing in justified blocks of text. Even then, however, the adjustment should be no more than 3% either way, so that it would be all but imperceptible to a reader.

Of course, the other option would be to use raged left alignment.

Fake Italics

Speaking of InDesign, one thing that the application actually allows you to do is to adjust not only the vertical and horizontal proportions of your text (which I still maintain you shouldn’t do); it also allows you to adjust the slant or skew of your text. This functionality can sometimes lead to the temptation of trying to force “false” italics on typefaces that may not have an natural italic option—either because one doesn’t exist or because you don’t have the italic version installed on your machine.

This is another typographical crime, and one that is perhaps is not recognized by as many designers as the problem with stretching type, because (if used intelligently) it doesn’t tend to look as horribly distorted as stretched text.

It’s still something that should be avoided, however.

Why? Simply because in a well-designed typeface, the italic form is more than just a slanted version of the regular roman face. In fact, if you check the glossary at the back of Bruce Willen and Nolen Strals’ Lettering & Type, the term italic is defined as:

A style of letters derived from cursive writing that is typically more inclined and upright roman characters (126).

As an example, we can look at one of favourite typefaces over the past little while. Recently, I have really fallen in love with the bold, italic version of the Palatino typeface. Below, we have the same text set in three different ways—regular roman, italic and then a false italic created by adjusting the slant of the roman.

Palatonio has a lovely, carefully crafted italic

Palatino has a lovely, carefully crafted italic

Notice the significant difference between the true italic and the false italic. It’s not just a matter of angle. As noted by the Willen and Strals quote, the letters Palatino italic actually have different shapes, which are more closely tied to the traditional cursive form. If you compare the letters of the italic against the false italic, you’ll see that every single letter has a different shape. In some cases, like with the o, the difference is subtle, but for the most part the differences are actually quite significant. The a and the f are excellent examples of this.

Alright, this may be true of a serif typeface like Palatino, but what about a sans serif? Well let’s take a look at Gill Sans.

Though to a lesser extent, Gill Sans also has a distinctly unique italic

Though to a lesser extent, Gill Sans also has a distinctly unique italic

While not as significant as what we saw with Palatino, there is still a clear difference in a number of the letter forms, again with the a and the f being prime examples.

Both of these examples lend further evidence to the idea that the italic form is more than just a slanted variation of the roman form. It is (or should be) a variant that is crafted with just as much thought and attention to detail as its roman counterpart. Moreover, you will often find that an italic variation has a slightly different character width, a different stroke width (even in the same weight) and different kerning, generally in an effort to optimize readability, all of which makes it far more a far superior option than a simple slanted roman.

This Typeface Doesn’t Work

But, some people might be thinking, “the font I want to use doesn’t have an italic version, and so I have to use a false italic to make it work.” To this I simply say: no, you don’t. If you need an italic variant and the font family you’re using doesn’t have one, then may I politely suggest that you made the wrong choice? Pick a different typeface—one which does have an italic variant.

You see, I believe that part of art good typography is not only choosing a typeface the looks great, but also which is able to naturally fulfill all of the requirements that are placed on it. If you have to rely on external techniques to force that fulfillment, then maybe a different choice would have been more appropriate.

This is something that I’ve learned over the course of my own work. Several years ago, I was working in a small, quarterly publication in which I was pretty much doing the entire design. I elected to set all of the body copy in Tahoma (probably not the best choice, I freely admit). For whatever reason, this typeface does not have a native italic version and so I had to use a false italic wherever there was a book title cited or emphasis was needed.

Looking back, it was a disastrous choice, as it meant having to go through an manually adjust the slant on various words all through the text. If I has used a typeface with a natural italic, however, I probably would have saved myself a lot of time as the existing styling on the content (authored in an external software package) would have been maintained when I poured it in. I probably over compensated on the slant too. If memory serves correct, I used a skew of 15%, where 8-10% would likely have been sufficient.

If I had to do it all over again, I would definitely choose a different typeface that had a natural italic.

But What about Helvetica?

But wait! What about Helvetica, Arial, Verdana and a handful of others? If we use the same comparative technique that we used with Palatino and Gill Sans, we’ll find there is very little perceptible difference between the italic and false italic. Let’s look at Arial first.

The natural italic and false italic for Arial are very similar

The natural italic and false italic for Arial are very similar

It’s true, a lot of these letters do look very similar, even identical. There are subtle differences through the e and the a, and even to some degree in the o, but they are barely noticeable. The same is true of Helvetica:

Helvetica is similiar to Arial, but uses the (more correct) term oblique instead of italic

Helvetica is similiar to Arial, but uses the (more correct) term oblique instead of italic

Things look pretty similar here too, except that Helvetica gets one thing right that Arial doesn’t. It doesn’t have an italic. Instead, it uses the term “oblique” which actually means a slanted roman face, rather than a true italic. Of course, in every application that I’ve seen, the oblique and italic forms are used seemingly interchangeably, and most people will never even notice the difference. They are not quite the same thing, however, and it is worth at least noting the difference.

But that still doesn’t address the real question at hand. If Helvetica, Arial and other fonts have an oblique (or “italic”) version of a typeface that is essentially just a slanted roman, then wouldn’t that justify using a false italic? I suppose there is some merit to that argument, but I would have to counter by asking if you should even need to justify at all? Again it comes back to using the right typeface for the job.

Besides, Helvetica, Arial and Verdana all have italic (or oblique) variants, and if I had simply elected to use one of them instead of Tahoma in my project from several years ago, it simply would have been a better typographical choice and I would not have had to force my requirements onto a typeface that didn’t fit them.

Conclusion

I’m sure there are exceptions to what I’ve written here. There are always exceptions, and sometimes these exceptions can be executed in fascinating and interesting ways. One key example would be when customizing a typeface for a logo or as part of a design, though that differs in many ways from the use of a particular face for headings, body copy and other forms of block text. Another would be coming to an existing project where you may not have the option of choosing a different typeface.

For the most part, however, I strongly believe that it’s important to respect the integrity of any typeface, by selecting the right one for the job and not trying to force a font to do something it’s not designed to do.

Just think of our precursors. Before the advent of the computer as a design tool, type had to be set manually, using individual sorts for each letter. These sorts were (and still are) physical, metallic pieces that could not be stretched, skewed or slanted at will. If a printer or designer wanted to use a taller, wider, italic or oblique type of letter, they needed to use a separate font set specifically designed for that purpose.

We should approach digital design the same way, and respect the integrity of the typeface.

What do you think? Have you ever tried to force a typeface into a shape that it was not intended to have? Were you frustrated with the results? Please feel free to share your thoughts, comments and experiences!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Feb 8, 2011

Colin Oakes says:

Typography is the shit!

Awesome tips and guidelines here for creating amazing typography either for web or print.

Have you had a chance to grab a copy of 8Faces (http://8faces.com) it is a great magazine by Elliot Jay Stocks full of typography inspiration and information.

Thanks Matt, You never fail to impress.

Feb 8, 2011

Matt Ward says:

Thanks Colin.

I wasn’t able to snag issue 1 but I have issue to of 8Faces and its totally awesome. Still have a couple interviews to read, but yeah it’s great.

Feb 8, 2011

Gaurav Chaudhary says:

Great article!

Thanks.

Feb 8, 2011

Antonea Nabors says:

Am loving this article! I couldn’t agree anymore. It takes years of experience for a designer to learn that type can make or break a project. A lot of thr time a designer hears the word “Typography” and they think they understand what it means. It takes a lot of bad typography for a designer to finally understand what good typography is. We all learn the hard way, but that’s the best part!

I wrote an article about using Helvetica properly and in it’s original form. This article really reminded me of that an I’m glad we are on the same page!

http://velvetant.net/blog/how-to-use-helvetica-properly/

Great write-up!

Feb 8, 2011

Edgar Leijs says:

Totally agreed! Statement said.

Feb 9, 2011

Keri says:

Thanks for writing this; I learned a lot. I love your examples of the stretched-out face & stretched out Helvetica. Ugh! =)

Feb 9, 2011

Leah | Postcard Design says:

wow! intensive article man! I’ve never really given it that much thought. but as a designer, I’ve always thought that a font should be used AS IS. after all, there are so many fonts out there that I could use for any particular design. thanks for the article, will think about that argument

Mar 10, 2011

Claire Wielandt says:

Simply Brilliant!
Thank you for a very interesting article and I really do agree!
I myself have only recently managed to begin to see the true beauty of a well-crafted typeface and your article proves the point.

:)

Mar 10, 2011

Alexandre Minev says:

I feel like I am in the same place with typography as you. I’ve always been standoffish about it because it has always been one of my weaknesses as a visual artist. I never took formal typography classes. But now I am starting to give it more importance than anything else and I am excited about all the possibilities it will bring to my work.I am currently reading Robert Bringhurst’s “The Elements of Typographic Style” but there is so much information in there that it’s taken me a while. Anyways, thanks for the article.

Mar 10, 2011

Al Kirby says:

Thanks. I will now pay more attention to italics.

Mar 10, 2011

sommeil says:

Wonderful article :)
I remember doing the skewing thing myself until about a year ago and I just feel incredibly embarrased about it by now… ^^’

Mar 11, 2011

Emmanuel Baako says:

Glad I stumbled unto this. Very informative and well written article. Thanks for sharing.

Aug 7, 2011

johnk says:

No shit dude. Graphic artists write too much obvious stuff. Not as much as HTML writers though.

Aug 16, 2011

Martin Varesio says:

Thanks. I will now pay more attention to italics!! Great post!!

Leave a Comment

Copyright © Echo Enduring Media 2009-2014