Typography Tip #4: Learn About Leading

Leading is a key component to good typography. Whether you know what it is or not, you use it every time you set type. If you live in the world of Microsoft Word, you know it as single spacing vs double spacing. In the land of typography beyond that of Microsoft Word, there are significantly more options.

The word leading comes from the old school typesetting days when type characters were individually set by hand and those lines of characters were separated by slabs of lead of varying thicknesses. Like font size, leading is measured in points.

In Typography Tip #3, I discussed using smaller type to achieve a better typographic look. Well that concept goes hand in hand with properly using leading. A smaller point size doesn't help you much if you don't give it room to breathe. In my first post, introducing this series, I discussed how poorly set type can actually tire your eyes and poor leading is often the culprit.

A lot of understanding leading is really training your eyes to see when type feels too close together or too airy. As mentioned in a comment on Typography Tip #3, 10 point type with 14 point leading is a great place to start when setting body copy. Another thing to keep in mind is that san serif fonts (like Helvetica) typically need more leading than serif fonts (like Times New Roman). Check out the examples below to see how much leading can affect good typography.

So start playing around with different leading and point sizes and see what happens!

Typography Tip #3: Use A Smaller Point Size

Back when you were typing papers in high school you were told to write in double spaced 12 pt. Times New Roman type. Yuck. Okay, the double spacing make some sense in school since it gives the teacher ample space to write notes, but you never see it in the real world. Luckily, most people leave double spacing when they leave school, but unfortunately the same cannot be said for point size when setting type.

12 point type is not the average type size you see day to day. To be honest, it varies a bit since each font. For example, san serif fonts, like Arial, tend to be larger than serif fonts, like Times New Roman. 10 point type is a good rule of thumb for body copy size for most fonts. Of course this varies a bit based on what, and where, you're writing. It's a little hard to tell in the sample above since this is the web and typography for the web is a whole different ballgame, but it gives you and idea. You can also make the font larger for design and aesthetic reasons, but if you're just writing something standard in Word, try defaulting to 10 point rather than 12 point. It makes a big difference.

Typography Tip #2: Properly Using Dashes

There are three types of dashes used in type. Yep, three. Most people, unless you are a writer or work in a publishing industry, are unaware of anything beyond the standard hyphen and unfortunately I frequently see hyphens placed where they shouldn't be. It's a big enough problem that our agency proofreader has a Word document he sends to people when he gets enough of their writing that doesn't use dashes properly. Since he spelled things out to nicely, I'm plagerizing a bit of it in this post. Here's the rundown on the different kind of dashes and how to use them:
There are three categories of dashes: hyphens (-), en dashes (–) and em dashes (—). What's with the weird names? Well, en and em refer to the letters 'n' and 'm' respectively. In a given font, much of the distinction of width is based on the width of the 'm' since it is the widest letter in the alphabet. Therefore an em dash is the same width as the letter 'm' for a specific font. The same goes for an en dash, which is usually about half the width of an em dash (since the letter 'n' is generally half the width of the letter 'm'.)

That said, here are the guidelines for when to use these different dashes:

Hyphen (-)
Hyphens separate compound adjectives or hyphenated words
Examples: small-business owners or Pre-Raphaelite

En Dash (–)
En dashes substitute for the word “to” when writing dates
Example: January 15 – 17, 2010 
Note that there is a space on either side of the en dash.

Em Dash (—)
Em dashes separate the start of a sentence from the text when listing bullet points

• Visual Communicators—Art Directors, Graphic Designers, etc.    

Em dashes also help when a list of items separated by commas contains additional commas that would make it difficult for the reader to understand:
(… the key Great Lakes states—Wisconsin, Illinois, Indiana, Michigan, with the longest coastline of all, Ohio and Pennsylvania—have all agreed …).
Note that there is no space on either side of an em dash.

Okay, that's great, but all you see on your keyboard is a hyphen key right? Well you need to know a few commands to make en and em dashes happen and unfortunately it varies based on the program, but no worries, we have the short cuts listed below.

How to type en and em dashes:

PCs—for Microsoft Word (and most other PC word processing programs)
En dash
Typing a word followed by a space, two hyphens, another space and then a word will result in an en dash: word – word.

Em dash
Typing a word followed by two hyphens and then another word with no spaces either side of the hyphens yields an em dash: word—word.

Macs—for Adobe Creative Suite programs and anything within Mac OS
En dash
Key command: Alt/Option + - (hyphen)

Em dash
Key command: Shift + Alt/Option + - (hyphen)

**Please also note that a hyphen is not the same as the minus symbol. There is a separate glyph to use for this so that it matches the plus sign. (Thanks for the tip, Suzanne!)

Typography Tip #1: Don't Double Space After A Period

This is one of my biggest pet peeves and any professional designer is going to tell you it's a very common typography mistake. The history of double spacing vs. single spacing after a period, however, is rather long and complicated. Just take a look at this Wikipedia article that will tell you all about the English style vs. the French style and the various spacing changes with punctuation over time. It's long and kind of confusing, but the end result is that the modern typesetting rules for the U.S. are to single space after a period.

But why did we all learn to double space after a period then? Well, originally I was taught in typography that it's a holdover from the typewriter era when every character had the same amount of space in what we call a monospaced font (like Courier). It was thought that two spaces after a period helped the reader differentiate where one sentence ended and another began since there was already so much space around all the letters and in the spaces between words. That's partially true, but a larger space (an em space*, not necessarily a double space) after a period was apparently an accepted style of typography way before the typewriter was around, though those professional typesetters used all different kinds of spaces around all types of punctuation that no one (except apparently the French) still use today.

That being said, single spacing after a period has become the accept style guide and should be how you're typing. Modern typographers and designers prefer single spacing because it offers a continuous flow for the reader's eye and a more aesthetic horizontal line of the text. I also believe it's easier to read. After being so used to single spacing, when I read something with double spacing it's jarring. Look at these next to paragraphs and decide for yourself. Which one looks better aesthetically and which one flows better for your eye.

Single spacing:

The quick brown fox jumps over the lazy dog. Or did the quick brown fox jump over the fence? The second sentence is more familiar. I'm not sure why. The first sentence is the traditional phrase that uses all the letters of the alphabet. Isn't that right?

Double spacing:

The quick brown fox jumps over the lazy dog.  Or did the quick brown fox jump over the fence?  The second sentence is more familiar.  I'm not sure why.  The first sentence is the traditional phrase that uses all the letters of the alphabet.  Isn't that right?

Like the first one better? I do. Many of you who still double space may like the second one better since you're used to it a bit more, but open a book or magazine nearby and look at the spacing. It'll match the first one. The typesetting standard in the U.S. is now for single spacing after periods, so if you write anything that will ever be published and touched by a professional, keep in mind they'll just do a find/change to get rid of all your double spacing, and be highly annoyed at you for it.

* An em space is the the width of the letter 'm' in a given font. You will learn more about this when I do a post on properly using dashes.

New in 2010: Typography Tips

One of the blogs New Years Resolutions is to bring a little more focus to design tips and more specifically typography tips. I'm a type nerd. I'll admit it. I doubt that most of the Creative Cooler's readers care quite as much about type as I do, but there are certain typography rules that everyone should know, designer or not.

If you choose to go into graphic design you will inevitably take a typography class. Most likely you will (and should) take many, but every designer remembers that first class because it's usually quite brutal. The thing about typography is that it's a kind of art form and those who understand it can quickly see and point out what's wrong, but until you reach that point you're usually scratching your head wondering what you did wrong, because it looks almost exactly the same as the one considered to be right. It takes awhile to reach that point and when you do, let me warn you, you will be forever plagued by the vast amount of bad typography that surrounds us daily.

The trouble is, many people set type these days and even plenty of designers never really learned how to treat typography well, let alone those who are simply setting type when they write something in Microsoft Word. There's leeway of course, like any art form, but there are also certain rules that pretty much every designer abides by, especially when it comes to setting something like body copy. Why? Because good typography actually helps you to read more easily. If a paragraph of copy is set poorly it slowly starts to strain your eyes and make you tired. I remember my typography professor telling us that getting tired while reading a textbook is mostly likely the fault of the typography and not the subject matter or writer. Textbooks are generally huge and packed with information. Printing a extra hundred pages to give the type enough space to breath is not usually an economical choice.

So if you've bothered to read this whole post on why everyone should learn the basics of typography, I hope you'll pay attention to future posts giving you said tips and take them to heart. I'm not the first blogger to post these tips and rules online, but since I still see so many people setting type poorly, the more people spreading the word the better.