68 JULY 2012 WWW. HOWDESI GN.

COM
Was your college type instruction a little
lean? Do you wish youd paid more atten-
tion in design history class? Follow these
6 lessons from typography guru Denise
Bosler, author of Mastering Type, and
youll be making the grade in no time.
WHATIWISH.indd 68 5/4/12 2:55 PM
WWW. HOWDESI GN. COM HOW 69
We all have epiphanies in our design careers, like when we suddenly
understand why we need those typographic theories a former profes-
sor 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?
Youre 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 I T H D E N I S E B O S L E R
WHATIWISH.indd 69 5/4/12 2:55 PM
70 JULY 2012 WWW. HOWDESI GN. COM
BRUSH UP ON TYPE HISTORY
When I was a edgling designer, I once had an art
director tell me my work looked dated and mis-
matched. 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 colorsit 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. Theres a reason why certain
historic eras approaches to typography and design
were successful: They made an impact on the world.
Dont 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 typogra-
phy and design inuence designers every day.
Its also a great idea to familiarize yourself with
type designers. From Frederick Goudy and Giambat-
tista Bodoni to Zuzana Licko and Alejandro Paul, each
made, and continues to make, a signicant impact
on type design. In addition, type designers, too, are
inspired by typographic history. For instance, Zuzana
Lickos 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.
PAY ATTENTION TO DETAILS
Paying attention to the details shows that you care
about the quality of work youre presenting to a client.
Just because a job has to be done quickly doesnt mean
you have permission to be sloppy. The more attention
you pay to detail, the better the readability of the nal
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
of your design. Your words may seem to read just ne
if the headline isnt kerned, but doesnt kerning make
it even easier to read? Kerning isnt just for headlines;
subheads, pull quotes, numbers and typographic logos
need to be kerned, too. Heres 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 theres more than one
word, move to the next one and aim to have this words
kerning match the rst words. And so on.
Leading. 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 manu-
ally 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 lead-
ing for extended fonts and those with small x-heights,
short ascenders and descenders. Always decrease lead-
ing for headlines. The bigger the type, the more dra-
matic the space between lines appears to be.
Ligatures. Ligatures are part necessity and part beauty.
Ligatures, by denition, are any two or more letters
that touch, though the most common are the , f,
and f 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 dont decrease legibility.
Kerning takes prac-
tice to perfect. Work
your way through
each of the words
letter pairs until the
entire word has con-
sistent letterspacing.
WHATIWISH.indd 70 5/4/12 2:56 PM
WWW. HOWDESI GN. COM HOW 71
ORGANIZE YOUR FONTS
Lets see a show of hands for everyone who has more
than 100 fonts currently open on their computer. 200?
500? 1,000? If youre a design professional, then you
probably have your hand in the air. Its important when
youre 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 efciency 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 conicts.
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 conicts, locating missing fonts, pre-
viewing fonts before installation and organizing fonts.
Its not enough to just load the software, though; you
need to use it effectively. Heres how to do it.
Prepare. Read the instructions and watch tutorials (if
available) to gain a rm 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.
Clean up your hard drive. Place all your fonts into a
single folder on your hard drive, organized into sub-
folders 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 systems fonts folder.
This will automatically and permanently open all
your fonts and cause you a massive headache, not to
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 moreit doesnt
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-manage-
ment software allows you to have multiple folders
containing the same fonts. Temporarily activate the
project folder when working on the project, and deac-
tivate it when youre done.
Organize by client. This approach is similar to orga-
nizing by project, but include all the fonts for all the
projects for that client. This works well when theres a
standard set the client always uses.
Organize by style. Create folders for serif, sans serif,
script and display fonts. Go a step further by breaking
those styles down into more specic 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 specic font. If you have thousands
of fonts, you may want to start slow and sort in groups
of 10 or 20.
Activate/Deactivate. Temporarily activate the font
folders you need. When you complete the job, deac-
tivate the folders to keep your workspace clear of
unnecessary fonts and free up your system resources.
While the most common
ligatures are an or
combination, many fonts
also include specialty
ligatures that are great for
enhancing a logo, head-
line or design layout.
WHATIWISH.indd 71 5/4/12 2:56 PM
72 JULY 2012 WWW. HOWDESI GN. COM
LEARN YOUR KEY COMMANDS
Time is money. Designers know the truth of that, and,
if theres one thing we can do to maximize our time as
well as our money, its learning key commandsspe-
cically, 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 rst. If it helps, create a cheat
sheet and tape it to the side of your monitor. Soon
youll have one hand on the mouse, the other on the
keyboard and be ying through your next design job.
If youre not sure what to learn rst, start with this
list of ve 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 incre-
ments 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, custom-
ize your own using Edit > Keyboard Shortcuts.
CREATE COMPLEMENTARY TYPE PAIRS
As designers, were told over and over to use no more
than two typefaces in a design. Its a good rule to pro-
vide visual interest and create contrast between body
copy, headlines and other text on the page. A combi-
nation 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 type-
face 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 arent sure theyre 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 reect
the complementary pairs.
Keep expanding your list as you experiment with
new font pairs. Soon youll have complementary sets
for different design aesthetics. A word of caution:
Dont 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 per-
sonality in mind.
Universal Typography Key Commands Illustrator and InDesign
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 justied 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 eld highlight eld + up or down arrow
En Dash opt + - (hyphen)
Em Dash opt + shift + - (hyphen)
Bullet opt + 8
Learning key com-
mands increases both
productivity and a
designers software
prowess. You can get
started with the cheat
sheet here.
WHATIWISH.indd 72 5/4/12 2:56 PM
WWW. HOWDESI GN. COM HOW 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, com-
bine two to create a great complementary type pairing.
And remember to carefully read the fonts 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 every-
day, even if its just reading the next section of your
graphic design history book. Its 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. Shes 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
Dont know your old style from your transitional or your
sans serif from your slab serif? Get a brief primer on
common letter classications from Denise Boslers new
book, Mastering Type.
HOWdesign.com/HOW-July-2012
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-specic 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, its 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, its also easier
than ever to make poor font choices.
Computer screens are made of pixelssmart-
phones and tablets included. Whatever the size of your
type, the pixel size remains the same. All type is refor-
matted to t 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 ll a pixel, the computer
must decide whether to ll the whole pixel or leave
it blank. For large font sizes, this degradation is negli-
gible. 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
Use this quick refer-
ence chart to choose
complementary serifs
and sans serifs.
WHATIWISH.indd 73 5/4/12 2:57 PM