Text rules you need to follow in 2016 to achieve awesome design

There’s one thing that (almost) every design has in common: text.

Yet despite its importance for communicating information and setting the tone for projects ranging from resumes to business cards to websites, text often gets banished to the back burner while we search out stunning photos or create shiny graphics instead.

The Merriam-Webster Dictionary defines typography as “the style, arrangement, or appearance of letters on a page”. And neglecting to carefully choose and arrange the typefaces in your designs will only result in a less effective, less attractive design.

So, if you want to take your design projects up a notch, it’s a worthwhile investment of your time to learn good typography.

“But isn’t typography a technical, complicated subject?” you might ask. Not really. In fact, in his online book Practical Typography, Matthew Butterick argues that simply learning and applying a handful of basic rules will send you leaps and bounds ahead of other designers:

— Matthew Butterick.

It also follows that your designs will be better than the majority. So what are these five rules?

1. Prioritize your body copy, since that makes up the majority of the text. Getting that looking good will give you a foundation to build the rest of your design around.
2. Get the point size right for the context of your design.
3. Adjust the line spacing (also known as leading).
4. Limit line length (also known as measure) to improve readability.
5. Make wise font choices.

We’re not going to cover the basics of better typography in too much detail here, because they’ve already been covered here and here.

Instead, we’re going to deep dive into some of typography’s finer points. The following sections will cover some more advanced text rules that will help you fine-tune your typography.

Some will fall into the “macro typography” category (looking at the “big picture” of aesthetic and structure) while others will concern “micro typography” issues (details like spacing and alignment).

It’s important to pay attention to both categories for text both looks great and functions in a way that enhances your design.

Ready? Let’s get to it.

Understandably, a lot of people think legibility and readability are the same thing. They’re not.

Legibility is a trait that’s built into a typeface by its designer. It has to do with whether individual letters are easily identifiable and distinguishable from each other.

Some typefaces are much more legible than others—for instance, a scrawling, handwritten typeface is going to be harder to decipher than a simple sans-serif.

This is often where the choice between text and display typefaces comes into play.

Text typefaces are designed for easy reading, with high legibility, while display or decorative ones are often designed to attract attention or communicate a certain mood or personality, so legibility may not have been the designer’s priority.

You don’t have any control over legibility, other than through your font choices. Not all fonts are appropriate for all design contexts, and choosing the right font can be a tricky business and takes time and practice to master.

But you can look for typefaces that have been designed to be highly legible if the clarity of your text is a concern.

Some of the characteristics of legible fonts include:

• “Transparent” Appearance: Typefaces are considered transparent when they don’t draw a lot of attention to themselves. They have normal letter shapes, neutral style, and blend into their surroundings rather than being flashy or fancy.

• Generous X-Heights: This is the height of the lowercase letters. An ample x-height in proportion to the uppercase letters enhances legibility.

• Large Counters: The enclosed or partially enclosed white spaces within letters like a, b, c, e, and o. Larger, more open counters make for more legible letters.

• Low-Contrast Design: Restrained design features like uniform strokes, subtle serifs, etc. Exaggerated letter shapes, dramatic variations in the strokes that form each letter, or particularly long or thin serifs can all decrease legibility.

For text-rich documents and designs, readability should be one of your first concerns.

Unlike legibility, readability is completely under your control and has to do with the choices you make in using, arranging, and formatting your type—which, in turn, determine how easy it is to read your text.

To maximize the readability of your text, you’ll want to pay attention to choices like size, spacing (including tracking, leading, and kerning), alignment, line length, color, and how the text looks against its background.

Let’s look at some lesser-known readability tips that will help you fine-tune your text.

Kerning refers to the amount of space between two letters (or other characters: numbers, punctuation, etc.) and the process of adjusting that space to remove awkward-looking gaps between your letters or add more room between cramped characters.

Sometimes a font’s default kerning isn’t ideal for certain letter combinations, so you’ll want to manually adjust it so the spacing between all the letters looks consistent.

Kerning may seem like an unnecessary or unimportant detail, but adding it as a quick extra step at the end of your design workflow can make a big difference in helping your typography look polished.

Plus, kerning mistakes can sometimes make words hard to read, or even spell out something you didn’t intend (when two letters get squished together, like r + n becoming an m).

It’s not necessary to spend your time kerning body text. Any spacing issues between letters won’t be visible at sizes like 10 or 12 pt.

Where kerning makes the most difference is for large, highly visible text like headlines or typographic logos.

For a more in-depth guide to kerning, including problematic letter pairs to watch out for, make sure to check out our Beginner’s Guide to Kerning Like a Designer.

Line length, also called measure, influences readability. If you’re too far on either extreme—either too short or too long—readers will have trouble scanning the text.

An average length of 45–75 characters per line (including spaces and punctuation) is a common rule of thumb, though the ideal length will depend on your typeface’s specific characteristics.

Keeping within this range for print projects will usually require setting your page margins to be larger than the typical default of one inch/25 mm.

For a guideline that’s easy to count quickly, Ilene Strizver, a typographer and the author of Type Rules! The Designer’s Guide to Professional Typography, recommends aiming for 9–12 words for unjustified text and 12–15 for justified text.

Leading (or line spacing, the vertical space between lines) can have a significant impact on how easy a block of text is to read.

Like with line length, the key is finding a happy medium: spacing that is too tight or too loose will make reading difficult.

And the concept also holds that your optimum leading settings will depend on the style, point size, and case (upper or lower) of your chosen font.

In general, text set at smaller point sizes or with longer line lengths benefit from looser leading to offset the barriers to readability that already exist.

Most word processing and design programs have a default or “auto” setting, which is often a bit too narrow.

The common recommendation to adjust the default to a more readable setting is to make your leading 120–150% larger than the point size of your text.

So, as an example, if your text is 12 pt., and you were to pick a medium leading of 130%, you would multiply 12 x 1.3 and get a leading of about 15.5 pt.

The image above shows adjusted leading in action. You can see that the difference is subtle but effective. The text on the right is definitely easier on the eyes.

Some fonts come with two sets of numbers: oldstyle and lining. Oldstyle numerals (also known as non-lining, text, or hanging figures) vary in height and alignment, while lining numerals are uniform in height to match that of capital letters.

When a block of text has a lot of numbers in it, oldstyle numerals blend more easily with lowercase letters to create a paragraph with better flow and readability.

Lining numerals are more suitable for lists of just numbers or where numbers appear with uppercase words (like in headlines and titles).

Most people aren’t on the best of terms with their English language reference book (if they even have one). Yet matters of punctuation (as well as spelling, grammar, and writing mechanics in general) are essential to professional typography.

Particularly if you’re responsible for proofing the text of your own or someone else’s designs, this is an area you can’t afford to neglect if you want your final designs to come across as credible and look polished.

So let’s review some types of punctuation that are frequently confused and misused.

a) The Ampersand vs. And

It can be easy to use casual typing conventions without thinking about it, and the ampersand (&) is one of the most common culprits.

We all use it to shorten messages, from texts to tweets, but it really isn’t a proper substitute for “and” in any type of formal writing.

Unless you’re following a style guide that instructs otherwise, always spell out “and” in body text. One generally accepted exception is for linking related words in a series where an “and” is already present (i.e., The DJ plays pop, hip hop, and rhythm & blues.)

That’s doesn’t mean you’ll never have an occasion to use an ampersand. They pop up most frequently in logos and branding—in fact, there are some big-name brands that use the character (Dolce & Gabbana, Tiffany & Co., & Barnes & Noble, for example).

b)Hyphens vs. Dashes

This category of punctuation is one of the most troublesome in both writing and typography. But hopefully we’ll be able to straighten it out for you here. We’ll be looking at hyphens, en dashes, and em dashes—each has a different and specific function.

Here’s a short and sweet overview that should give you a starting point for using hyphens and dashes correctly.

Hyphens ( – ): Hyphens are the shortest of the three marks. They’re used:

• to hyphenate some compound nouns (mother-in-law) and adjectives (sugar-free)
• to attach prefixes to words (mid-July, ex-husband, non-dairy)
• to break words in a series (two-, three-, and four-year-olds) or at the end of a line
• in phone numbers

En dashes ( – ): En dashes are longer than hyphens but shorter than em dashes. They’re used:

• in number, date, and time ranges (2–4 ounces, a score of 24–15, 1990–2002, 4:00–6:00 p.m.)
• to indicate connection or direction (the north–south highway, the Los Angeles–New York flight)

Keyboard shortcuts: Option+hyphen on a Mac; Alt+0150 for Windows

Em dashes ( — ): Em dashes are the longest of the three marks. Typographically, two hyphens aren’t a substitute for an em dash, though some word processors will automatically convert them into one.

Em dashes have many purposes, and can sometimes be used in place of commas, parentheses, or colons. But here are some of the most common functions:

• to interrupt a thought or set off a thought within a thought
• to insert non-essential information (similar to parentheses)
• to introduce a list (similar to a colon)
• to emphasize a statement or make a conclusion, often at the end of a sentence

Whether spaces are inserted on either side of an em dash comes down mostly to personal preference and whether you’re following a particular style guide.

Keyboard shortcuts: Shift+Option+hyphen on a Mac; Alt+0151 for Windows

c)Smart Quotes vs. Dumb Quotes

Smart (or curly) quotes and dumb (or straight) quotes are intended for two separate purposes, yet many people mistakenly use them interchangeably.

Straight quotes aren’t really quotation marks at all: they’re hatch marks that, when used correctly, indicate measurements in feet and inches.

Most design and word processing programs can be set to use smart quotes instead of straight quotes (which, for some strange reason, are often the default), or you can use keyboard shortcuts.

When in doubt about issues of punctuation in typesetting your text, it’s best to refer to a writing handbook, or at least consult a trustworthy online resource like Purdue University’s Online Writing Lab or Oxford Dictionaries’ punctuation and grammar guides.

We hope this guide has provided you with some useful tips that will help you take your typography skills up to next level. As always, happy designing!