Tuesday Type - Get The Lead Out (or In)

When I talk about art-related subjects (favorite covers, the history of pulp illustration, etc) I usually take a general "art appreciation" approach.  But with Typography, and I"m thinking I should take a more direct "How To" approach.

That's because:

1) Everybody has the power to set type these days.  Whether it's a flyer for the school picnic, or a banner for your website, or a book cover, you have the tools to create type, and many of you will use it. 

2.) The one element, more than any other, which makes a book cover or a poster or whatever look professional (or scream "Amateur!") is the typography.

So, as a public service, I'm going to start writing about Typography.

One thing I'm going to do differently from other tutorials on how to use type: I'm not going to talk about best practices that much. That is, I'll mention some of those rules of thumb in passing, but I don't want  you to blindly do it this way or that way: what I really want to do is help you SEE the type and what it's doing and how it works.  That way you can decide for yourself.

I'm also going to try to avoid generalities and talk instead about very specific topics.  (Serifs.  Kerning.  The many meanings of the words "roman" and "gothic." When not to bother with typography. ) Knowledge is power, after all, and if it isn't specific and practical, it isn't knowledge.

Disclaimer: there are a lot of things you can't do with typography without an expensive tool like Photoshop or Illustrator, and a lot of training.  The logo you see above, for instance, could not be done in Photoshop Elements.  (It's also far from perfect, and I'll be adjusting it and talking about it as I get to various topics in future posts.)

However, there's a lot you can do to make your typography better than that of the average bear, even with minimal tools.

And one of the first things you can do is pay attention to something we call leading.

Leading: Which Rhymes With Bedding

Back in the old days of actual physical type, they used thin strips of lead to separate each line of type.  That's why that vertical space is called "leading" (and why it's pronounced "ledding" not "leeding").

Example 1

This vertical spacing is something you usually don't need advanced software to do. There is some kind of vertical control for this in nearly every program that sets type.  (You do need more control than just "single-spaced" or "double-spaced" however.  Many word processors have more detailed controls buried in their "paragraph settings.")

Default (sometimes called "auto") leading is about 120% of the size of the text itself, and that distance is measured from baseline to baseline.  So 10 point type will be spaced about 12 points apart.  This distance is fine for body text.  It makes row after row of text easily readable.

But for display text -- such as a book title or text on a poster -- it is much too far apart.  It's one of the first signs of amateur type-setting.  It looks loose and scattered and doesn't make good use of space.

A good default for display leading is what we call "solid" leading, when the leading is defined as the same size as the text itself.  (So 10 point type would have 10 point leading.)  Because most fonts are designed with a little buffer room for the ascenders and descenders, this still leaves some room between lines of type.

(Ascenders and descenders are those parts of the letters which stick up or drop down.  Such as the top of a "b" or the bottom of a "g".)

Taking Things to Extremes

Tight Leading

Example 2

 It's popular right now, especially when using a blocky sanserif type on a thriller, to use very tight leading -- to leave no space at all between the lines of type. The letters press against each other in a crowded, almost claustrophobic design. This can look very good, but imho, it depends on the tracking, which is the horizontal space between the letters, and also the height of the letters.  Such tight leading on a font with letters spread wide apart can look like a mistake.

And if you are using upper and lower case letters -- which have ascenders and descenders, you will run into problems. Note how, with the Very Tight Leading in Example 1 (above), the "g" and "d" crash into each other.  And some fonts are simply not as legible that way.

Sample 2, on the other hand, has a block capitals font, and is completely legible. (Note for reference: the Very Tight Leading here in Example 2 uses 24 point type and 18 point leading.)

Loose Leading

Another fashion is to go the other way -- give lots of extra space between the single words of a title, which are spread across an entire cover.  Often the subtitle and blurbs are tucked in between the lines of the title -- in tiny type so it's clearly not a part of the title.  I usually see this when the words of the title are stacked vertically, one word on each line.

Notice in Example 1 that the Rather Loose Leading almost looks like three unrelated words. If you use this technique you need to clearly relate the words of the title with font choice, size and color. They may need to be significantly larger than any other type on the page. or they might need to be in a very different font.

Now, there's another use for loose leading: some fonts really like to be spread out -- in particular some of the swashy calligraphy, or chancery fonts.  In the lower example, the Rather Loose Leading font is Zapfino, and because if the super-high ascenders (the 'h' and the 'd') it actually looks better to spread the leading than to leave it at default.

(NOTE: the Rather Loose Leading in Example 2 is 24 point type on 48 point leading.)

So it's never a bad idea to play with the leading of a headline or title.  Watch out for legibility issues: having enough space to be readable, and overlapping letters.  In the right circumstances even those things can work, if there is something else that makes up for the illegibility.

One trick to help you see how the overall design is working, and to see if something is really legible, is to squint. Can you still see the most important details when your vision is blurred?  Does the design still look good, even when you can't see small details? (With computers, you can also zoom out, and make the image a tiny thumbnail.)

In the end, most of the time, you won't want to go to extremes. You'll just want to make the leading somewhat tighter than default, and even that is not always a good idea.  The longer your block of text, the less it is like a title or logo, and the more it is like body text.  The default spacing tends to make text most readable.  Tighter makes it prettier.

But do play with the different settings.  See what it does for (or against) your design.

See you in the funny papers.