Five typography rules to design by

My colleague Brittany recently wrote a post on the “Five rules to write by.” (If you haven’t read it, check it out—after you finish reading this one, of course.) To complement her top five hard-and-fast rules for professional writing, I am sharing five typography rules for those who want to ensure their final documents and designs look refined and letter-perfect. Of course, this isn’t a comprehensive list—there are A LOT of other typography and design rules that Jake (my design associate) and I follow—but these five are definitely indisputable and a great place to start ensuring consistency.

If you need a quick reminder on the vocabulary of typography (such as the difference between serif and sans serif fonts), check out our previous post, “Which font? A three-step guide to typography for busy professionals.”

As a side note, my examples use an old-style serif font that I love named Caslon. William Caslon developed the font in his engraving shop in England in the 1720s. The font was very popular throughout the 18th century and (fun fact!) was even used in the US Declaration of Independence.

Rule 1: Hang your punctuation. Letters should align with letters. Hanging punctuation outside the text, especially quotation marks, makes a text block look more uniform. When punctuation isn’t hung, it creates a visual indent that distracts the eye and makes text look sloppy. You can see this in the example below.

1-hungpunctuation-01

Rule 2: Use curly, or “smart,” quotes. You won’t look dumb if you always use “smart” quotes! Curly quotes are designed with the rest of the font and are therefore more cohesive with the characters. In traditional printing, printers always used curly quotes for quotations marks and apostrophes. Straight quotes were designed following the invention of the typewriter. The new quotes eliminated the need for pairs of single and double quotes, creating room for two additional characters on the font wheel. In the computer age, we do not have this constraint anymore, so curly quotes should always be used. The example below illustrates the difference between the two types of quotation marks.

Most design programs have a setting that automatically turns all quotes and apostrophes into curly ones, so this should be an easy rule to follow. No excuses!

2-smartquotes-01

Rule 3: Use old-style figures for numbers. Old-style figures create a seamless reading experience because they flow more smoothly with words than standard numbers do. This is because the ascenders and descenders in old-style numbers match the way lowercase letters work together. Old-style figures don’t draw attention away from the words, as standard numbers do. Plus, old-style figures are just way prettier. You can see the difference in the examples below.

I should note that many sans serif fonts do not have old-style figures, so this style of number would not be an option. For serif fonts, however, you should always use old-style numbers.

3-oldstylefigures-01

Rule 4: Kern your 1s. The number 1 is thinner than any of the other numbers. However, in typesetting the 1 usually has the same spacing around it as the wider numbers, which results in blank space around the number. “Kerning” is adjusting the space between letterforms, so kerning around your 1s will help the spacing of numbers look more uniform.

Unfortunately, this is a rule that I don’t always have a chance to follow. Because of last-minute deadlines or lengthy corrections at the end of a project, I sometimes run out of time to make these changes (which makes me balling-my-eyes-out-emoji). However, some design programs do have an automatic “optimal” character spacing setting that does an OK job in a pinch.

4-kerning1s-01

Rule 5: Turn on ligatures, especially for serif fonts. A “ligature” occurs when two or more letters fuse together into a single glyph. In the English language, the most common of these collisions are fi, ff, fl, ffi, and ffl.

For example, in many serif fonts, the letter “f” extends out into the next character’s space, causing an awkward and, in my opinion, rather unattractive overlap. In italics, the “f” sometimes crashes with the surrounding letters on both sides and creates spacing issues. Some modern or newer versions of older serif fonts such as Sabon, Garamond 3, and Goudy Old Style were drawn to avoid the need for ligatures, but crowding is common in older serif fonts such as Caslon, Garamond, and Bodoni, so using ligatures is key. You can see the awkward spacing in the examples below.

In most design programs now, there is a “standard ligatures” setting that you can turn on that will automatically set the correct ligature whenever these letter pairings appear for specific fonts. Therefore, turning on ligatures is also an easy rule to follow once you adjust your settings.

5-ligatures-01

And there you have it—my top five typography rules. Even though they might seem like small adjustments, following these rules will add that extra level of polish to your designs that can make a big impression.

Delilah Zak

The principal visualization artist at Leff, Delilah works collaboratively with the team to conceptualize and create all manner of graphic content, from public reports to management articles to standalone infographics and beyond.

Leave a Reply

Your email address will not be published.