What is the heading

Find the best font families for headings and paragraph text

Mixing different font families should by no means be left to chance, nor is it a matter of taste.

There are clear rules in the designer's hand tools as to how one can or should put together font families.

When mixing font families,

  • some properties must be very similar for a harmonious overall picture
  • some properties are clearly different, thus clearly distinguishable

So on the one hand we have “looks good together” for the beautiful web design and on the other hand “are clearly distinguishable” so that the hierarchical structure is not lost.

How do we achieve this without training as a designer? Here is the necessary knowledge and procedures so that you can assess the quality of the compilation or choose a compilation of font families yourself.

First step - select the font for the paragraph text

As emphasized in the previous chapters, the selected font should match the content! If you have a modern theme, the font family should be modern, such as Helvetica. If the topic is solid, then the appropriate font can be used, e.g. Times.

If you have texts about filigree works of art as content, then the font should be accordingly. If you have a text about safes, the writing should be stable and robust and not fall over when you look at it at an angle.

First we choose the font for the paragraph text. Make sure that the selected font matches the basic forms of the second order. And what are the basic forms of the second and first order?

In short - the basic forms of the second order have a narrower width than height. There are no strong curves with the second order - an oval just isn't as round as a circle. The text becomes easier to read.

It is best to use second-order fonts for the paragraph text (basic text).

Fonts of the first basic order are often constructed with the view that the height and width are identical or very close. These fonts are good for headings.

And now we come to the interaction of the 2 font families. The emphasis is on 2! If you want to use more than 2 font families, it quickly looks "unpleasant". So please limit it to 2. Which criteria are important and which must be observed?

Property for a harmonious overall picture

What must be the same The middle length! Each font family can be examined for different properties. For us, the middle length is very important. This is clearly visible with the small "n" compared to the small "d"

Note: When mixing, the center length should be the same or very similar!

Line variance

You can see a base line (with the small k) and the hairline (capital A, capital U, H the horizontal line) in the following example

The hairline and the base line are particularly important - in some fonts there is a clear difference in thickness from one another. This deviation is called line variance.

If you now have a font family with a large variety of strokes, Both selected fonts should have a similar variance and a similar stroke width in the stem. This makes the fonts look harmonious with one another.

Clear differences are needed!

The font family for the headings and for the paragraph text must be clearly distinguishable from one another. For this purpose, colors are used on some websites. Of course we want to work with 2 different font families (otherwise this chapter would make little sense).

So far we have looked for fonts that go together harmoniously. If we only consider the previous criteria, there is a risk that the fonts are too similar and there is therefore no clear visual separation between the heading and paragraph text.

Tip: Use one font family with serifs and the second font family without serifs. This is the option that usually works very well.

Stay away from mixing 2 sans serif fonts!

It becomes very difficult if you try to mix 2 sans serif fonts. A lot of experience and a sure instinct are required for a good result when mixing two sans serif fonts.

Tools for combining font families

How to practice and learn to mix in a playful way

If you want to practice and play there is a nice application online at:
http://www.typeconnection.com/

You can select specific fonts that you send on a “date” - you will immediately receive feedback as to whether these would fit and make a nice couple or whether a clear case of “divorce” is pending.

automatic suggestions for second font

And now the point where you say - you could have written that right away, so it's even easier. To save my honor: I take the position that you should understand why you are doing something so that you can do it in the best possible way.

A very simple variant is offered by Google Fonts at https://fonts.google.com/ - you can call up the following example directly with https://fonts.google.com/specimen/Roboto.

With Google Fonts, after selecting a font after displaying the various letters, we receive the item “popular pairings with ...” and can immediately assess the visual effect of the combination with the second font by clicking on it. Different fonts are often offered.

Have fun choosing font families that match each other - combining fonts is not as difficult as you might think, and with background knowledge it is quickly fun.

Recommend • Social Bookmarks • Thank you

If you find a bug, please let us know (regardless of whether spelling mistakes or errors in content).

With a mouse Mark the faulty point and take over with the following button:

After submitting it comes here feedback! Please do not send twice. Thanks.