Up Your Typography Game

Good typography is at the heart of many great designs, from posters to websites to mobile apps. But what makes good typography? Well, quite a bit, that’s why it’s one of the main things graphic designers study in college and spend a lifetime practicing and perfecting. 

As designers, we are prone to notice and appreciate type in the wild. And if you see it the way we do, you begin to notice that typography is seriously everywhere. Books, magazines, street signs, menus, medicine labels, movie titles, sewer caps, license plates, the list is endless! And it was all designed by someone, whether they were professionals or just some guy typing his five-paragraph craigslist ad in all caps (don’t be that person).

With critical eyes and pretentious art school educations, when designers choose to focus on type, we either A.) Praise it, study what makes it successful, and lightly drool with admiration and respect, or B.) Quickly point out obvious flaws, ridicule the creator’s bad taste, cackle and let anyone who will listen know our recommendation for a better font.

The point of this preface—besides making you realize how pathetic and myopic designers can sometimes be—is to illustrate how varied, nuanced, and subjective typography is. The main content of this article is intended for designers—to shed light on some little tricks that can up your typography game. For non-designers, you’ll hopefully find these details interesting, and know what to look and ask for when working with designers in the future.

Let's start by covering three specific ways to format type. For reference, OpenType features are only found in some professional fonts (they’re not included in system fonts). When buying or downloading fonts online, the typefoundry will include specimen sheets outlining the font’s OpenType features if they have them.

The three formatting options are Small Caps, Numerals and Fractions. The rules for each can be applied successfully in many instances where you’d design with type; however, these lessons are intended to improve body copy, its legibility and its overall appearance.

1. Small Caps

We use all caps in a variety of different ways: to highlight someone yelling, call-out a formal name or add emphasis. The problem with using all caps is that when used in a paragraph it screws up the flow of lowercase letters which are most common in body copy. It stands out and is harder to read. 

Notice in the example below, the name "Bukowski & Sons" is tall, blocky and distracting compared to its surrounding text: 

An alternative is to click the small caps feature in InDesign or whatever you use to design. However, this just scales down the characters, making their stroke width thin and wimpy:

A better solution is to use OpenType features and turn on the small caps from there:

You can see that the color of the text matches the lowercase characters much better than fake small caps. OpenType small caps characters are designed to have the same weight as the fonts lowercase characters, and their letter-spacing is more tracked out, too. This is an elegant way to call-out text instead of using bold, italics, or underlines, which can be distracting.

2. Numerals: Lining, Oldstyle, Tabular, Proportional

Oh boy, these are some of the best OpenType features. As you can guess from the title, it’s not just one feature, but they all relate to handling numbers. Let’s dive in.

Proportional Lining

The default number styling for most fonts is proportional lining. “Proportional” indicates that the numbers are kerned next to one another evenly. “Lining” indicates that the numbers share a common baseline and ascender height. That looks like this:

This works for a lot of applications, but remember we are focusing on body copy today. When you put proportional lining figures into a paragraph, it has a similar effect as all caps- it can look too tall and becomes distracting.

You see the numbers push up above the lowercase letters, kind of like little hills. It’s not terrible, but there is a way to blend numbers into paragraphs better. This will improve legibility and overall appearance. Introducing…

Proportional Oldstyle

The main difference here is that oldstyle figures have a varying baseline. We also see them less in general, making them fun and unique to use and read. Due to their varying ascenders and descenders, these oldstyle figures can be easier to scan and read compared to lining figures.

So let’s see how these look compared to proportional lining figures:

Notice how the body copy appears more even in the second example. In the first example, your focus jumps to the numbers first, then reads the sentence. That might be desirable in some instances, but normally we want our readers to start at the beginning and read through the whole sentence, not jump around.

Tabular Lining and Tabular Oldstyle

So we’ve discussed two ways to work with proportional figures. Besides proportional, we also have the option to use “tabular” figures. Whereas proportional figures have equal white space between characters, tabular figures ensure that numbers line up vertically, regardless of the space between them.

This doesn’t apply to body copy so much as tables, lists of numbers, or things such as business cards and letterhead where you want stacked phone and fax numbers to line up nicely.

You can use tabular oldstyle figures in these instances, too, it’s just more of an aesthetic preference. If you’re working with really long lists or tables of numbers, lining figures read more succinctly and look clean and uniform. Depending on your project, audience, and content, try out both and see if one option is stronger than another.

One of our designer's favorite projects here at thunder::tech used tabular oldstyle figures to display a client’s financials in their annual report. It was a new look for them—a bit understated and sophisticated—and ended up working well.

3. Ordinals and Fractions

We’re on to our last features. I’m kind of lumping ordinals and fractions together—they both have to do with numbers, but otherwise aren’t related. These are just two more ways to fine-tune your typography skills, adding some nuance that not only helps the user digest the content, but also adds to the overall aesthetics of your project.

Ordinals

Ordinal numbers denote a position in a series. You may not have heard that term, but you’ve seen them written out as first, second and third. How they appear in the previous sentence is totally acceptable, but OpenType allows us to dress them up a bit.

First though, similar to faux-all caps, do not use the default superscript option in InDesign to achieve ordinals. It just shrinks the text, making the strokes thin and the characters hard to read. Let's compare superscript ordinals to proper OpenType ordinals:

Now let’s see how these OpenType ordinals look in an actual paragraph:

Fractions

You can layout a sentence with a fraction in it like this:

Or, you can use OpenType and substitute those boring clunky fractions for sexy, compact ones that are designed to flow in paragraphs better:

Some OpenType fonts only cover a few basic fractions, and the rest get typed out the boring default way, while others recognize all types of fractions and will convert them to the cute little ones

And that's it for ordinals and fractions. There's not a ton to them, but handling them through OpenType can make them look much better.

Phew! That can be a lot to take in, but we hope you've learned some worthwhile tricks and insights on typography. Ideally you're chomping at the bit to open InDesign and start exploring these OpenType features. Good news: There are still a lot more, so start looking into some of your favorite fonts and see which features are supported. Oh man, we didn't even get into alternate characters, swashes or ligatures …

Besides OpenType features, there are so many tips and tricks to help manipulate and improve typography, but we'll have to save some of those for another day. Or you can give us a call or send us a tweet, @thundertech, to get in touch with some of our fantastic typography gurus. In the meantime, kern on, and don't forget—never use Times New Roman, Comic Sans, or Papyrus, unless you're a doink.