• The Secret of Nice Typeface column
  • Originally written by Simon Li
  • The Nuggets translation Project
  • Translator: Ruixi
  • Proofreader: L9m, Wild-Flame

When I ask people what they find most difficult about typography, one answer I often hear is typography. We always want to use multiple fonts to spice up our designs, but most of us don’t really know which fonts to go with. How different fonts work together is more like a secret. Once you know that, you can create beautiful font combinations.

Font matching and hierarchy

In addition to making our designs more visually interesting, using multiple fonts is more about creating layers of fonts. Hierarchy means difference. If there is no difference, there is no hierarchy. Therefore, in order to create an effective hierarchy, you need significant differences, or strong contrasts. If you want to perfect your typography, strong contrast is the secret.

How do we do that

We usually try to distinguish the title from the body by creating contrast in the following three dimensions.

  • Fontweight: Headings are thicker or thinner. (Want to learn more about clever word weight? What Can You Do with Different Font Weights?

  • Size: Larger heading type.

  • Color: Choose a distinctive color for the heading font.

Changing font weight, size, and color can create contrast and create a sense of layering, but there are other ways to create contrast (if we have more than one font to choose from). And the tricks are pretty fun.

More possibilities

Different fonts and different typography Settings provide more possibilities for creating contrast. In addition to word weight, size and color, let’s look at font ratio, font type, case and spacing.

Font proportion

Fonts vary in width or proportion. Some are long and crowded. Some of them are regular and within the standard range. Some are heavy and broad. The following table summarizes some common ratios in Web font applications.

Sort common web fonts by scale.

For designers, fonts can be distinguished by their width. For example, you can use Open Sans Condensed Bold in the title and Open Sans Regular in the body. Use Montserrat in the title and Source Sans Pro in the body; Use long Oswald in headings and standard serif or Sans Serif in body text…

Use different proportions of the font for contrast.

Note that long or flat fonts tend to be less readable than standard fonts, so be conservative in your text.

Letterforms

A font is the shape of a font. We are familiar with typefaces, because we have to rely on them to distinguish between different typefaces. Serif and sans serif are two very common typefaces. Handwriting can also be used for handwriting.

Different types in Google fonts.

To create contrast, we selected fonts with different typefaces. Remember that super simple rule we hear all the time? Just pick a sans serif font, pick a serif font to go with it. This is actually using the differences between fonts to create contrast. We can also choose a script or display font for the caption and a Serif or sans serif font for the text. The possibilities are endless.

In the web template Big Day, I combined the calligraphy font Dancing Script with the elegant Sans serif font Fira Sans because of their strong contrast in letter structure.

The more distinct the fonts are, the greater the contrast we can create. Accordingly, the effect of font collocation will be better. In the same way, try not to combine fonts that are similar in type. This is why you should be careful when dealing with two different serif or sans serif fonts.

Combining two similar fonts creates a weak contrast that will only confuse the reader. It’s better to just use one font.

Case (lowercase and uppercase letters)

Capital letters look like squares because they are of equal height. Lowercase letters, on the other hand, tend to have jagged silhouettes because of the uneven rise and fall of the letters. We can take advantage of this difference and do some examples of comparison.

Uppercase words have different shapes than lowercase words.

If the document title is not long, we can use all uppercase letters to make it look more distinct from lower-case paragraphs. (If your headings are long and long, you probably don’t want them all capitalized. Slightly less readable after all.)

kerning

Kerning, the distance between letters, can also be used to create contrast. It is often used with capital letters because the spacing between capital letters makes words easier to read and gives them a sense of stability and maturity.

Extra spacing makes uppercase words easier to read and gives them a sense of poise and maturity.

Remember to avoid increasing the spacing between lowercase letters, as this will break the lines of words and make them hard to read. Also, don’t add extra spacing to your text to contrast it with headline text with larger spacing.

Increase the contrast

So far, we’ve covered seven ways to create contrast. To sum up:

Word weight/font size/text color/font proportion/font type/letter case/spacing

Remember, the stronger the contrast, the better your font composition will be. In order to get a stronger contrast, we can overlay the above points. For example, in my blog Jordan, I combine Oswald with Merriweather. I use Oswald as the heading font and Merriweather as the body font. Oswald is a long, thin typeface. I used both uppercase letters and increased spacing. As a result, I made some differences in font size, color, font ratio, font type, case and spacing. Great contrast, wonderful combination.

A combination of Oswald and Merriweather THAT I use in my blog Jordan. There are differences in font size, text color, font proportion, font type, letter case and spacing, so the contrast is very strong.

Following this rule, we can easily come up with some great or bad font combinations. As you go through each of the font combinations below, use the seven dimensions we just talked about to think about why they’re good or a little bad.

Winning combination

A less successful combination

conclusion

Font composition is an important part of typography. I hope that reading this article has given you an idea of how comparison is a measure of successful font composition and how to combine fonts more effectively. Have fun with font combinations!

This article was originally published at www.simon-li.com/design-and-… .

Like this article? If so, please click ♡ below and share it with your friends. It means a lot to me. You can also follow me on Twitter or Medium.

More about fonts

Want to learn more about fonts? Please check out my personal page Other Typography Articles.

A small survey

What is the hardest thing about typography for you? Fill out this short survey and let us know. This will help me create the best typography for you.