Last time, we took a peek at some typographic errors that can easily creep up as you work, and how you can be cognizant of how to work around them. We’re back with a follow-up installment of common typography mistakes, and design tips that will hopefully help your good typography become great.
We said it last time, and we want to give the same caveat again: “common mistakes” is a bit of a misnomer, as in some sense what’s considered typographical errors can actually be constructs of a graphic designer’s personal taste. So take all of these suggestions at just that—suggestions, not gospel. Don’t let any one person’s design process preferences dictate your style. If you’re aiming to break rules—break them beautifully, and with intention.
Let’s get started, shall we?
1. Smart Quotes vs. Dumb Quotes
Here’s the deal: in general, there’s two flavors of quotation marks you’ll encounter in the wild—smart quotes and dumb quotes. Sure, it sounds a bit flippant to call a typographic glyph dumb, so you might also have heard the terms straight quotes vs. curly quotes, which is a pretty succinct aesthetic descriptor. Smart quotation marks are typically curly looking—appearing like tiny little 66’s or 99’s hugging your line of text. Conversely, dumb quotes are rigid, standing straight up and down—a characteristic you can chalk up as a holdover from the days of typewriters and their quest for economies of spacing.
So the advice here is pretty plain — if you’re intending to use quotation marks, make sure you use smart/curly quotes.
How do you do that? If you’re on a Mac, Alt + [ and Alt + Shift + [ will, produce opening and closing double curly quotes, respectively. On a Mac, Alt + ] will give you an opening single curly quote, and Alt + Shift + ] will provide a closing single curly quote. You’ll want to use these when you’re looking to set quote within a quote, and you’ll want to use the closing single curly quote for apostrophes.
As a heads up—not all typefaces will have all the different flavors of quotation marks. If you’re still unsure how to access certain styles of quotes, you can always dive into the glyphs palette of your design software to see the styles of quotes the typeface you’re working with has.
Why would you go to all this trouble for something as small as quotation marks?
You’re right—it’s certainly a fussy, nit-picky typographic vexation that sticks in a graphic designer’s craw. Is using a certain style of quotes going to break your design? Probably not, we’ll level with you on that. However, having the eye and wherewithal to consider something like the appropriate typographic marks lends to the fit and finish that can make the elements of your design projects seem thoughtful and considered. It’s in those last 2% of persnickety details that can take a very good project to an exceptional one. So, yes, consider your quotation mark hand-wringing a typographic nicety that shows you’re taking a fine-tooth comb to your work to make sure it’s fit as a fiddle—work you can be proud to sign your name to.
2. Em Dashes vs. Hyphens
A dash is a dash, right? Well, not exactly. When you’re slinging typography not only do you have two distinct types of dashes at your disposal, you’ve also got hyphens to consider. Don’t worry, we’ll get you squared away. The neat thing about knowing the differences is that their intended use is fairly applicable, whether you’re tapping away while word processing on a manuscript in Microsoft Word, or getting deep into baseline grids over in InDesign.
So let’s go shortest to longest.
The smallest horizontal typographic tick you’ll typically use is the hyphen. On your QWERTY keyboard, the hyphen sits just to the left of the equals/plus key. As its namesake might imply, hyphens are used when typesetting a hyphenated name, like Josef Müller-Brockmann, for example. Compound words are also a go-to use for hyphens; words like world-changing, or, design-related.
Next up is the en dash. It’s longer than a hyphen, but just about half the width of an em dash. En dashes are frequently used for stating date ranges, e.g. 1910–1914, or joining two unrelated names in a phrase, e.g. the Hawley–Smoot Tariff Act. On Mac, a shortcut for an en dash is Option + Hyphen.
Longest—and last up—is the em dash. Em dashes are used to indicate distinct breaks in thought, in many ways similar to semicolon. For example, this article—or so its author hoped—is intended to help emerging typographers.
Em dashes also come in handy when attributing quotes. For example:
“Dribbble’s the best design community around!” —Everybody
If you’re on a Mac, the key command to get your em dash is Option + Shift + Hyphen.
There’s also aesthetic schools of thought around how much space should accompany an em dash whenever it’s used. Some argue they should be flush with the letterforms on either side of them, others choose to add thin spaces to give the marks a little room to breathe.
In reality, it’s up to you. Use your best judgment, and know the correct answer will likely depend on the typeface you’re using, as well as how your em dash spacing choices mesh with the block of text near it. Like we said with using quotation marks, your choice (or lack thereof) of hyphens and dashes won’t make or break your design, but it’ll polish up your typesetting and take it to the next level.
3. Free fonts
Type is the lifeblood of graphic communication, you know that. Let’s be honest, you’ve probably got a boatload of fonts squirreled away somewhere on your machine right now. Listen, we’re the last people who make any judgment over font collecting—there’s no shame in wanting a wide suite of different fonts at your disposal. We’ve all been there, and that’s smart.
Knowing that you’re likely a typeface aficionado, we’re going to present you with two seemingly contradictory statements:
There’s no substitute for quality typefaces—and—free typefaces can often get the job done just fine.
What’s the reason for the cognitive dissonance? Even just a few years ago, tangling with free fonts was a gamble—besides the janky sites that often hosted them, often free fonts were…lacking. Functionally speaking, these free font fonts had a greater chance of lacking the finesse, features, and painstaking attention to detail that commercial fonts did. The breadth of glyphs, as well as the overall craftsmanship of the typeface wasn’t up to snuff. The poor quality was tangible.
These days though, we have to say, free type is pretty dang good quality—with the caveat being you have to be discerning. Sources like Google Fonts—or the library from Adobe Type that comes as part of a Creative Cloud subscription—are filled to the brim with type families from talented, respected type designers. Big names, reputable names. And there are many others too, just beware. Do your homework. Be mindful. And, at the end of the day, make sure you still support your local type designer when you can.
So, say you come across a free font in your typographic travels. How do you judge its potential efficacy? A good rule of thumb can be found in looking at the glyph count: the more robust the character set—including diacritics, alternates, ligatures, and swashes—can tell you that more time, at the very least, was likely afforded to the design. Free fonts of questionable quality may also be lacking the diligent spacing considerations and kerning pairs that a commercial typeface family will offer. While free may bring good feelings to your wallet, poorly crafted fonts may seriously affect your type’s legibility once you start setting blocks of text. Before you commit to using any free design wholesale, make sure you put it through its paces to make sure it holds up.
4. OpenType features
OpenType is one of the major font formats you’ll encounter when seeking out type. A boon to visual designers, the OpenType format allows for a wide array of advanced typographic features that can make your text shine, including ligatures, swashes, alternates, oldstyle figures, fractions, ordinals, and other typographic flourishes. These typographic elements are de-facto special effects which typographers can wrangle to add depth and visual flavor to their work.
OpenType features allow a single font family to afford an impressive reach of expressive aesthetic possibilities. You can rely on most contemporary commercial fonts offering standard ligatures, fractions, and ordinals, while some display faces—especially scripts—may come equipped with hundreds of additional decorative glyphs.
So, really, the main common typography error at play here is simply being unaware of the abilities OpenType fonts offer. Right this second you might have a library of fonts at your disposal that have expanded capabilities you were never aware of.
Most of the time, accessing these features takes a design app with advanced typography controls—you’re unlikely to utilize them fully in common text editors or word processing apps. OpenType features can typically be activated through your design app’s type or character palette, as well as seen as individual elements in your glyphs palette. So go take a look—you might be delighted to find your favorite typefaces offer up even more.
Just a few friendly words of caution—while it may be enticing to test out all the expressive typographic bells and whistles OpenType features provide, a little often goes a long way. So be judicious. Also, when playing around with decorative or discretionary glyphs, be sure to pay attention to your line spacing, lest your expressive swashes or alternates start colliding into the other parts of your text.
5. Vertically stacking type
We hate to make sweeping aesthetic statements, but we’re saying this as objectively as possible—when you’re working with Latin character sets, rarely does vertically stacked lowercase type look well-dressed.
The first lesson is, if you’re trying to make vertically set type work, definitely lean on capital letters first. That said, you still need to keep your typographic wits about you.
Think of the archetypal vertical motel signage—you know, the ones in glowing, buzzing neon that spell out MOTEL. Or maybe a similar scene outside a diner that says EATS. Those are both sort of iconic pieces of typographic vernacular.
Well, think for a minute about the architecture of those letterforms as they’re stacked atop one another. They work, first and foremost because they’re capital letters. All of the constituent letters share roughly the same width. They stack atop each other like blocks that have roughly the same optical edges.
To get a feel for why the opposite approach is troublesome, let’s flip the script—imagine “motel” again, this time in lowercase letters stacked vertically.
Because proportional fonts allow for each glyph to take up a different amount of horizontal space, your mostly-solid stack of letterforms now gets a little tipsy, the profile of its edges wavering in and out, adapting to the different glyph widths. In addition to having to try to balance this, you’ve also got to deal with the ascenders and descenders that come with lowercase letters. More often than not, such an arrangement of lowercase letterforms will make such a vertical arrangement look like a stack of precariously placed dinner plates ready to topple over at any second.
Knowing this, the lesson is that you’re going to start your experimenting using capitals.
But even there we’ve got to give you some friendly warnings. Say you had another word you were trying to set vertically, in capitals. Maybe RING, or HILL. This can pose a problem depending on the typeface you choose. For instance, a single stroke capital “I” (like that used here in this very sans serif font you’re reading) would cause trouble for you. Without bars at its baseline and cap-height, even the capital letters will start to feel wobbly as they try to perch atop those skinny I’s. The strong edges of your vertical block of text become wavy, undulating around the mismatched width of the I.
So be cognizant of white space when you’re setting type vertically, but also your line lengths—the interplay between letters is going to be exaggerated. For instance, setting something short like FOOD won’t likely give you grief, but Gastrotypographicalassemblage—in all-caps vertical type—is going to be a fatiguing eyeful. So keep it short and sweet.
Secondly, considerations for web design pose additional challenges than print. You may have to adapt your font size so that your letterforms do not impinge upon readability or functionality on smaller screen sizes. The thought of hyphenated vertically-stacked Latin characters might make any typographer break out in a cold sweat.
Conclusion
So there you have it! A few more nuggets of typographic wisdom for you to chew over and help you deflect some common typography errors. Like we said at the opening, remember that designers will duke it out over social media and the like ad nauseam ready to fall on the sword of their favorite typographic preference. Everybody just needs to relax—it’ll all be OK. Despite what anybody else might say, when it’s your project, your keen design eye is on the hook for making the call—so don’t discount what your gut tells you!
For more typographic resources, check out 6 overlooked typography tools in Adobe Illustrator and 5 online typography exercises to improve your skills.
Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
