The designer's guide to mix type

Web Design is 95% Typography’ said Oliver Reicenstein, and I wholeheartedly agree. Typography can make or break your design.

While most designers know how to make text look good (Some typographical tips: Set font-size at 16px (100%), Line-height to 1.5) but most people struggle at one thing — choosing fonts that look good together.

So here I have put together a step-by-step, short and concise guide, to help you designers to make better typeface decisions and mix type better.

1. Define the mood

Once you are clear with what the motive of the design is, you’ll have a much better time designing.

After all, you won’t be using Comic Sans for a funeral flyer, would you? (Or for anything at all)

Or maybe Monotype Corsavia on your smartphone?

Or Georgia on your code editor?

Designers guide to Mix Type - Sublime Text 2 in Georgia
Gives a new meaning to vintage mode, amirite?

Can’t even think about it, right? We associate fonts with specific feelings. If the expected feeling of the design, and the feeling of the font doesn’t fit, we get something really awkward indeed.

So how do you know the mood?

My favorite method is to either ask the client, or to figure out 5 adjectives for the perfect design. I usually ask the client, then research, and combine my research results and the clients.

For example, if the adjectives I find are ‘modern, neat, clean, bold, serious’ I’ll probably choose a font like League Gothic. On the other hand, if the adjectives are ‘fun, simple, playful, kiddish, happy’ a font like Varela Round would be a lot better.

Designers guide to Mix Type - League Gothic + Varela Round
Note to self: League Gothic + Varela Round = Disaster.

2. The number

As a rule of thumb, I take no more than 2 fonts for websites. For invites and similar graphics, I can take three, but I try my best not to exceed 3.

Why? Here’s a live example…

Designers guide to Mix Type -Too much fonts are bad
Please don’t punch me for doing this? PLEASE?!

3. Contrast in their design

Contrast is really important when choosing typefaces, that is, contrast in terms of their design. You don’t want that both of your fonts look almost same as each other. When the fonts are too much same, they look ugly.

Also, remember to keep your mood in mind. The fonts should fit the moods.

A good example of a pairing is Open Sans and Georgia.

Designers Mix Type - Georgia and Open Sans 4eva
Georgia and Open Sans sitting on a tree…

The aspects in which fonts can differ the most are:

  1. Their weight
  2. Whether they are serif or not.

So remember, contrast between two fonts is good, but you should not forget the fonts’ moods.

4. MOAR contrast!!one!!!

The type which you choose for headings should differ from the body type in more than one way.

You’d want the fonts to contrast and look different when presented together. Forms of contrast are size, shape, position, texture, orientation, color. The ones that are useful to use now are color, size, and position.

Color

A simple change can go a long way. Something radical, like ‘headings in hot pink; body text in dark grey’ isn’t necessary, something as little as change in the shade of grey (Headings –> #333; Body –> #666) works well. Either keep it subtle, or a lot.

Size

Size difference is the most common of all. Headings are generally bigger, body type is smaller. Remember to change margin and line-heights accordingly. You don’t want the variation to be too subtle.

Position

Indenting, adding borders around headings, adding a large margin around them are common ways of adding contrast.

5. Contrast with other design elements

Even if your type looks beautiful, and you’ve done the above few steps perfectly, you need to ensure that it works in accordance to the rest of your design. Here’s an example

Designers guide to Mix Type - Contrast with other elements
One rages your inner designer, other looks pleasing. Which one’s which?

That didn’t look too good. Remember other elements of your design while mixing type, or your efforts will go down the drain.

TL;DR

  • Understand what the mood of the finished design should be; pick fonts accordingly.
  • Two fonts for web designer, 3-4 for graphics.
  • There should be contrast between the two fonts, but don’t ignore their mood.
  • Elements of contrast are size, shape, position, texture, orientation, color. We’ll use color, size, and position.
  • Finally, keep the other design elements in mind too.

I'm on Twitter and Dribbble.

Discuss on Twitter