Combining Typefaces

 

 

Combining type is a really important part of your design. Making sure you don’t convey the wrong feelings, and the most important reason: make your design pleasing for the eye. But how do youachieve a good combination of type which looks great and beautiful? There are several ways to do this, several methods. In this article I’ll explain some to you, some often used, some less often used. Just some I know and I would like to teach you.

Contrast

An approach we’ll often be using is making sure there is contrast between your heading and paragraph text. Meaning your headingcould be bold, and your paragraph regular. You have to be careful though, the contrast might become too big. Choosing a black serif font, and combining it with a very thin sans-serif font, might look very awful. Here an example of good use of contrast:

contrast1

Serif with Sans-serif

Something that often works well is combining serif with a sans-serif. It’s an often used combination and very safe, it can go wrong but mostly it looks good. Here an example of good use of serf/sans serif:

serif and sans serif

 

The way I did this, was I compared the two typefaces like on the image below. I saw there were some similarities, which is important otherwise the contrast is too big.

compare type 2

As you can see the descender are the same, the x-height is the same but there are some other details which makes it different. Which results in just the right contrast and useable for the serif/sans-serif combination.

Same Font Family

This combination is as safe as serif with sans serif, maybe even safer. But we dont need to take things the hard way, we just want a good combination. Take a look at the following example where Icombined Calibri Light with Calibri Bold.

familiy 1

 

Same Mood Like I said before, type can convey different feeling or emotions. One type really fits a fairy tale, other are very serious. If we look at the following combination for a newspaper, the first one obviously doesn’t work.

mood bad

This second one obviously does:

mood

Same Characteristics Another way is to make sure your two typefaces have similar characteristics. Look at the x-height for example. It’s best if they are quite the same. For example you could take a look at the x-height, stroke size, descender and so on. If we take a look at the image below, you can see there is a difference in x-height, now lets combine the two with the same x-height, and two with different x-heights.

x-height

Tip

Did you guys know there is a difference between typeface and font? A font is specific chosen type from a typeface. For example Arial is typeface, while Arial Black 12px is a font.

Some examples

Now let us take a look at a couple of website and analyse why they look good.

example1

In the above example they used contrast. Both Sans Serif typefaces, but the header is a little bolder and bigger. example2

Here they combined serif with sans serif, but also made the upper one a little bigger, but not too much.If they upper font would be bolder than it is now, it would not look as good as now.

example3

 

 

This one is a great one too. They made a contrast with x-height and stroke width. The o of the sub-header is almost round, while the o in the header would not be round. You might think this would make the contrast too big, but by making the header stand out more youreduce the chance of over-contrast. Now I need you to apply one of those above rules I just thought you. Look around at websites and their type and figure out what make them look good together. Let me know.

 

Some further reading:

A crash course in typography: http://www.noupe.com/design/a-crash-course-in-typography-principles-for-combining-typefaces.html

Type classifications: http://www.smashingmagazine.com/2013/04/17/making-sense-type-classification-part/

8 weight of combining typfaces: http://www.webdesignerdepot.com/2011/02/eight-ways-to-combine-typefaces/