Cranky Design is a series of posts in which we try to make the world a little more stylish by looking at the details of design, whether it be webby, printy, or otherwise.

Hello there, internet friends. You like… fonts? Me too. Spend much time nerding out with them? No? Probably for the best. I’m a little obsessed myself. I’m sure my wife finds it charming that I’m constantly pointing out fonts in the wild. That’s charming, right?

So you like the fonts, but you don’t know much about them, and you’re a little curious, but not that curious. Perfect. I’ll tell you a couple things, maybe you learn something, okay. You’ll know more than your friends, and you like to feel superior to your friends, right? That’s what friends are for. This’’ll be great!

Don’t Call it a Font

If you REALLY like to lord it over your friends, this first lesson is perfect: Don’t call it a font. Call it a typeface. Whaaat? That’s right. The proper term for what we generally call “font” is actually “typeface.”

See, back in the dark ages of physical typesetting, a typeface referred to a family of type that had a consistent design and style. A font was a specific member and size of that family. So, for example, one typeface is “Times”. This includes the roman, italic, and bold styles and all of their various sizes. A font is one specific slice of that typeface, such as Times, italic, 14 points. See the difference? Now it will always bother you when people call a typeface a font. Welcome to type nerdery! You’re probably already sorry you came. Don’t worry, that’s natural.

Display & Title Typefaces

Wow, there are literally books fulla information on type that you don’t wanna know, so let’s just break a big hunk off the top and call it a day. What about display titles? You see these all over the place, online, in print, and in the real world. You probably need to use them yourself from time to time on your blog, on that report, even on that passive aggressive note you stuck on the fridge this morning.

So what makes a good display typeface? Well the fast and dirty answer is: use a condensed sans-serif font, loosen up the tracking (spacing between letters), and make it caps. Done. Lunch time. Here’s an example:

Just to make this example a little more relevant to everyday folk, I’ve chosen some very common typefaces that usually ship standard with modern OSes. On the left, you’ve got your classic Microsoft Word typeface, Times New (roman), a staple of any Windows PC. On the right is the lovely Gill Sans MT (condensed), also a typeface that can be found in the Windows OS.

So as you can see, the left side looks like your sixth-grader whipped up a school report he cut-and-pasted out of Wikipedia (solid work, son). Meanwhile, the right side looks like it could be legit. And the only difference is typography! I swear. So what’s really different?

Well, on the left, we’re using a serif typeface. Serifs are the extra little doodads that poke out of your letters. When a font is referred to as “roman” it means it has serifs. Most folks believe the origin of serifs come from the brush strokes used to create the letters (dating back to Greek architectural titling). It is commonly believed that serif typefaces are easier to read for long periods of time, such as with textbooks and novels. This is why a lot of typographers use serif typefaces for the bulk of text in printed books (but not all!). I set it in title case, meaning the first letters are capitalized and the rest are lowercase. Tracking (space between letters) is normal (“factory default” for the typeface).

On the right we’ve got a sans serif font (sans = “without”) that is condensed. Sans serif fonts don’t have serifs, which make them sparer and more modern looking (when a typeface is called “gothic” or “grotesk” it means it is sans serif). Condensed means that the set-widths are narrower than its non-Condensed brethren — essentially, it is a lean and tall font. If I were a font, I’d be Condensed. Condensed is obviously useful for squeezing in lots of text in small spaces (much in the same way that I can squeeze in between the washer and the dryer when necessary), but you’ll also find that Condensed faces are a staple for display and titling. There’s just something very professional and stylish about a good Condensed font. I’ve set this in all caps, which is what you want to do with a Condensed face, and I’ve widened the tracking, which means I’ve spaced the letters further away from each other. Looser letter spacing helps with legibility when using all caps and narrow faces. Because tracking is not a common adjustment lay folk make, I’ll show you how. To adjust letter spacing in Word (if you’re unfortunate enough to be dealing with typography in that program, my apologies):

Highlight your text. Go up to your Font menu and click the tiny arrow in the lower right hand corner. You’ll get a dialog box that pops up, and click on the 2nd tab called “Character Spacing”.

Drop down the “Spacing” box and choose “Expanded”. Then, to the right of that box, you’ll see another box called “By:”. Increase the point value of “By:” to space your letters further apart. You should see a live preview at the bottom of the dialog pop-up.

Now in Photoshop (also not the best place to work with typography, but common, and certainly better than Word!) click your Character icon (its the little A in your right-hand menus) or, if you can’t find the icon, go up to the menu, click on Window, and choose Character. You’ll see some more icons, none of them very intuitive, but look for the “A V” with the arrow underneath. That’s your tracking.

Bigger numbers mean more space between letters, zero is “normal”, and negative numbers mean closer together. Make sure your text layer or the actual text is selected before changing your tracking, or nothing will happen (I do this all the time).

What’s the Difference?

So what’s up? Why does the title on the right look so much more professional than the one on the left? They’re just letters, right? Well, if you’re REALLY interested in the answer, you might be a closet typography nerd. Ha! Get yourself some books. But the practical answer is, professional designers do it this way. Serif typefaces set in title case or sentence case with normal tracking (our left side example) are typically used for blocks of text at smaller sizes. This is what the text in your paperback copy of The Girl with the Dragon Tattoo looks like. But the cover title looks more like our example on the right. Now obviously, this isn’t the only way to set your display titles. But it is a common method used by the pros, and it is a quick and easy way to class up your own projects!

Condensed Font Suggestions

Loving the stretchy tallness of the Condensed font? Want some of your own? Here are a few of my favorites:

• Tungsten from Hoefler & Frere-Jones
• Trade Gothic Bold #20 Condensed from Linotype
• Champion Gothic from Hoefler & Frere-Jones
• Knockout from Hoefler & Frere-Jones
• Refrigerator Deluxe from Mark Simonson
• Promixa Nova ExtraCond from Mark Simonson
• Berliner Grotesk BQ from Berthold