How Singles Typography Crash Course

Was your college type instruction a little lean? Do you wish you’d paid more attention in design history class? Follow these 6 lessons from typography guru Denise Bosler, author of “Mastering Type,” and you’ll be making the grade in no time.

68 • J ULY 2012

WHATIWISH.indd 68

W W W. H O W D E S I G N . C O M

5/4/12 2:55 PM

WITH DENISE BOSLER

We all have epiphanies in our design careers, like when we suddenly understand why we need those typographic theories a former professor was trying to teach us. Or when we realize we should have been paying attention instead of doodling in our notebook. Or even when we realize something we know now would have been a great thing to know all those years ago. Sound familiar? You’re not alone. Even veteran designers have “aha” moments. The important thing is to learn from them and use the new knowledge to better your skills. Following are six lessons you can study now to improve your typographic knowledge and design skills. Think of them as proverbial smacks to the forehead.

W W W. H O W D E S I G N . C O M

WHATIWISH.indd 69

H O W • 69

5/4/12 2:55 PM

Kerning takes practice to perfect. Work your way through each of the word’s letter pairs until the entire word has consistent letterspacing.

PAY ATTENTION TO DETAILS Paying attention to the details shows that you care about the quality of work you’re presenting to a client. Just because a job has to be done quickly doesn’t mean you have permission to be sloppy. The more attention you pay to detail, the better the readability of the final job. Think of it this way: Give typographic detailing the same consideration you give to color. Here are some areas to consider: • Kerning. Kerning is all about increasing the readability

BRUSH UP ON TYPE HISTORY When I was a fledgling designer, I once had an art director tell me my work looked dated and mismatched. “Your connotation is all wrong!” he said. I nodded my head dejectedly and went back to work. I had no idea what he was talking about. A short time later, he showed up at my desk lugging a graphic design history book with several pages marked. Sure enough, my design combined fonts from the 1940s and 1970s, and used a Bauhaus style layout with 1980s colors—it was all wrong. He knew it and I knew it. I suddenly realized that I should have paid more attention in my design history class. Typography can make or break a design. As a designer, you need to know everything about type— including its history. There’s a reason why certain historic eras’ approaches to typography and design were successful: They made an impact on the world. Don’t merely look at projects from those eras. Absorb them, love them and explore them. Glean inspiration from the font choice, type treatment, layout, color and concepts. Dadaism, Bauhaus, Constructivism, Art Nouveau, Art Deco and other art movements’ typography and design influence designers every day. It’s also a great idea to familiarize yourself with type designers. From Frederick Goudy and Giambattista Bodoni to Zuzana Licko and Alejandro Paul, each made, and continues to make, a significant impact on type design. In addition, type designers, too, are inspired by typographic history. For instance, Zuzana Licko’s font Mrs. Eaves was inspired by Baskerville, and Alejandro Paul has said he admires the work of Hermann Zapf and Ed Benguiat. Before you start your next job, take a break, dust off your old textbook, and take a step back through history. You never know where your inspiration may come from. 70 • J ULY 2012

WHATIWISH.indd 70

of your design. Your words may seem to read just fine if the headline isn’t kerned, but doesn’t kerning make it even easier to read? Kerning isn’t just for headlines; subheads, pull quotes, numbers and typographic logos need to be kerned, too. Here’s how to do it: Look through the words that need to be kerned. Pick a pair of letters whose relationship looks perfect, and aim to have the rest of the letters in the word match that visual space. Fix the kerning until the entire word has consistent letterspacing. If there’s more than one word, move to the next one and aim to have this word’s kerning match the first word’s. And so on. Stop using auto leading. Right now. Auto leading is based on a mathematical formula that only works for those few fonts with average x-heights and ascender/descender lengths. Finesse your type manually instead, giving the letters the space they deserve. Add a point or two of leading to your body copy for tall x-heights, long ascenders and descenders, as well as condensed fonts. Take away a point or two of leading for extended fonts and those with small x-heights, short ascenders and descenders. Always decrease leading for headlines. The bigger the type, the more dramatic the space between lines appears to be.

• Leading.

• Ligatures. Ligatures are part necessity and part beauty.

Ligatures, by definition, are any two or more letters that touch, though the most common are the ‘fi,’ ‘ffi,’ ‘fl’ and ‘ffl’ combinations because the pesky ball terminal at the top of the ‘f ’ interferes with the dot of the ‘i’ and height of the ‘l.’ Type designers create completely new characters that seamlessly combine two letters. A lot of thought goes into these new letters, and using them increases readability. Make sure your design software preferences are set to automatically replace common offensive combinations with ligatures. Many fonts have additional ligature characters that you can also use, some functional and others quite fancy. Check out the glyphs palette to see all of the possibilities. Just be sure they don’t decrease legibility. W W W. H O W D E S I G N . C O M

5/4/12 2:56 PM

While the most common ligatures are an ‘fi’ or ‘fl’ combination, many fonts also include specialty ligatures that are great for enhancing a logo, headline or design layout.

ORGANIZE YOUR FONTS Let’s see a show of hands for everyone who has more than 100 fonts currently open on their computer. 200? 500? 1,000? If you’re a design professional, then you probably have your hand in the air. It’s important when you’re on a deadline to have all of your resources ready to go, including access to your fonts. However, having too many open fonts cuts software efficiency by using up valuable system resources. It also wastes time to scroll through a huge list just to select a font, and increases the chance of font conflicts. Work smarter by using font-management software. There are many good options with a variety of features, so pick one that will suit your needs. Features include installing and uninstalling fonts, auto-activating fonts, resolving font conflicts, locating missing fonts, previewing fonts before installation and organizing fonts. It’s not enough to just load the software, though; you need to use it effectively. Here’s how to do it.

• Organize by client. This approach is similar to organizing by project, but include all the fonts for all the projects for that client. This works well when there’s a standard set the client always uses.

• Prepare. Read

• Organize by style.

• Clean up your hard drive. Place all your fonts into a single folder on your hard drive, organized into subfolders within that. This way, you always have easy access to all your fonts. A word of caution: Do not place your fonts directly into the system’s fonts folder. This will automatically and permanently open all your fonts and cause you a massive headache, not to

• Activate/Deactivate.

the instructions and watch tutorials (if available) to gain a firm understanding of the software. Font-management software has a lot of obvious and not-so-obvious features. Take the time to learn what it can do for you.

W W W. H O W D E S I G N . C O M

WHATIWISH.indd 71

mention grind your computer to a halt. Next, decide how you want to organize your fonts. You can sort them by client, job, style, alphabetical, and more—it doesn’t really matter how, just as long as you organize. Here are some options: • Organize by project. Create a folder for each project and place the necessary fonts within it. Move new fonts into the folder as you use them. Font-management software allows you to have multiple folders containing the same fonts. Temporarily activate the project folder when working on the project, and deactivate it when you’re done.

Create folders for serif, sans serif, script and display fonts. Go a step further by breaking those styles down into more specific folders such as modern serifs and condensed sans serifs. This method of organizing is helpful when designing with an idea of font style but not a specific font. If you have thousands of fonts, you may want to start slow and sort in groups of 10 or 20.

Temporarily activate the font folders you need. When you complete the job, deactivate the folders to keep your workspace clear of unnecessary fonts and free up your system resources. H O W • 71

5/4/12 2:56 PM

Universal Typography Key Commands – Illustrator and InDesign

Learning key commands increases both productivity and a designer’s software prowess. You can get started with the cheat sheet here.

T

type tool

Esc

return to selection tool while typing

Kerning/Tracking (increments of 20)

opt + arrow left or right

Kerning/Tracking (increments of 100)

cmd + opt + arrow left or right

Leading

opt + arrow up or down

Baseline shift

opt + shift + arrow up or down

Highlight text

shift + arrow left or right

Change type size

cmd + shift + < or >

Align left, right, center or justify with last line left aligned

cmd + shift + L, R, C or J

Justify with last line justified

cmd + shift + F

Reset horizontal or vertical scaling to 100%

cmd + shift + X

Reset kerning or tracking to 0

cmd+ opt + Q

Create outlines

cmd + shift + O

Show hidden characters

cmd + opt + I

Select a word

double click

Select a line of text

cmd + shift + \ OR triple click

Increase/decrease a value in a field

highlight field + up or down arrow

En Dash

opt + - (hyphen)

Em Dash

opt + shift + - (hyphen)

Bullet

opt + 8

LEARN YOUR KEY COMMANDS Time is money. Designers know the truth of that, and, if there’s one thing we can do to maximize our time as well as our money, it’s learning key commands—specifically, type-related key commands. For example, typing command + shift + O is much faster than using the mouse to click on the direct select tool, click on your text, move to the Type menu and scroll through the options to select the Create Outlines command. In short, keyboard shortcuts increase productivity. Set yourself the goal of learning two to three new key commands a week. Look at your most repetitive actions and learn those first. If it helps, create a cheat sheet and tape it to the side of your monitor. Soon you’ll have one hand on the mouse, the other on the keyboard and be flying through your next design job. If you’re not sure what to learn first, start with this list of five common type-related key commands: • T for the type tool • Option + arrow left or arrow right to kern or track • Option + arrow up or down for leading • Command + shift + < or > for increasing or decreasing the size of text (default is increments of 2 pts.) • Command + shift + L, C, R or J to align text left, center, right or justify with last line left aligned. Once you learn all of the key commands, customize your own using Edit > Keyboard Shortcuts. 72 • J ULY 2012

WHATIWISH.indd 72

CREATE COMPLEMENTARY TYPE PAIRS As designers, we’re told over and over to use no more than two typefaces in a design. It’s a good rule to provide visual interest and create contrast between body copy, headlines and other text on the page. A combination of serif and sans serif works best to create this balance. But how to choose? The biggest challenge is selecting the right pair from nearly limitless options. Start by developing a list of 10 sans serif and 10 serif fonts, leaving the display type for another day. Be sure to include a stylistic mixture of classic and modern fonts. Set each typeface as a 24 pt. headline and 9 pt. paragraph of body copy, print them, then compare each serif with each sans serif. The best pairs share qualities like x-height, weight, width and letterform shapes. Go with your gut when you decide whether the fonts complement each other. If you aren’t sure they’re a match, consider them a no. Keep comparing them side-by-side and see which combinations work. This will give you a list of go-to complementary type pairs. You can even set up folders in your font-management software to reflect the complementary pairs. Keep expanding your list as you experiment with new font pairs. Soon you’ll have complementary sets for different design aesthetics. A word of caution: Don’t rely on the same pair or pairs over and over again. This will make your work look predictable. Always keep the design requirements and client personality in mind. W W W. H O W D E S I G N . C O M

5/4/12 2:56 PM

Use this quick reference chart to choose complementary serifs and sans serifs. USE WEB APPROPRIATE FONTS Up until a few years ago, live text was limited to a handful of fonts. If a “fancier” font was needed, it had to be a graphic. This was why non-web-specific fonts were kept to a minimum online. Fortunately, for those of us who cringe at the thought of using those original standard web fonts, options for live text are getting better every day. With the more recent introduction of subscription font hosting, it’s easier than ever to use great looking fonts in web design. (See “The New Web Typography” on page 54 for more information about these services.) Unfortunately, though, it’s also easier than ever to make poor font choices. Computer screens are made of pixels—smartphones and tablets included. Whatever the size of your type, the pixel size remains the same. All type is reformatted to fit into the existing pixels. Small typographic details like serifs fare worst with this reformatting, because a single pixel cannot be rendered as more than one color (i.e., it cannot be divided in half). If a typographic detail does not fill a pixel, the computer must decide whether to fill the whole pixel or leave it blank. For large font sizes, this degradation is negligible. For smaller font sizes, however, this can be the difference between legibility and illegibility. If you must use a serif font as body copy, choose one that has a slab serif instead of a thin serif with delicate brackets. Try Museo Slab, Chapparal Pro or Oxtail (www.typekit.com). Sans serif fonts will always be legible at a small size, so they work well as body W W W. H O W D E S I G N . C O M

WHATIWISH.indd 73

copy, but please pick a sans serif with more personality than Arial or Verdana. Try P22 Underground, Botanika Web or Le Havre (www.typekit.com). Better yet, combine two to create a great complementary type pairing. And remember to carefully read the font’s license before using a web-font service bureau. Most fonts require a separate license for web use. Make it a point to try to learn something new everyday, even if it’s just reading the next section of your graphic design history book. It’s OK to smack yourself in the forehead once in awhile. Denise Bosler is a graphic designer, illustrator, author and professor of communication design at Kutztown University in Pennsylvania. As a self-professed designastrator, she creates award-winning design and illustration work for a wide variety of clients from small businesses to Papyrus and Target. She’s the author of “Mastering Type: The Essential Guide to Typography for Print and Web Design” (HOW books, 2012; MyDesignShop.com). www.bosler.com; www.masteringtype.com

WEB EXTRA Don’t know your old style from your transitional or your sans serif from your slab serif? Get a brief primer on common letter classifications from Denise Bosler’s new book, “Mastering Type.” HOWdesign.com/HOW-July-2012

H O W • 73

5/4/12 2:57 PM