more

    Font Pairing for Beginners: A Simplified Guide

    The first rule of font pairing is that you should use no more than 3 fonts together. That’s a really useful fact, but choosing even 2 fonts tha...

    font pairing for beginners

    The first rule of font pairing is that you should use no more than 3 fonts together. That’s a really useful fact, but choosing even 2 fonts that complement each other can be a headache! You can have these two gorgeous fonts, but you put them together and find your creation cringe worthy. We’ve all been there.

    Today’s guide is for those that want to experiment with VistaCreate. The library of templates already has pre-set font pairings but if you want to create a design from scratch, you’re going to need a little bit of background knowledge. This guide will give you a boost of confidence, some fancy new terms and the blessing to go off pairing fonts like a pro.

    Basic vocab to get you started

    Contrast

    When speaking about contrast with fonts, what is implied is the contrast of elements such as form, weight, style, size, and color. When pairing fonts, you’re aiming for visual balance with the right contrast.

    contrast with fonts

    Concord

    Two fonts that have similar traits are concord. Finding concordant fonts is much easier than you think, they usually come from the same family.

    concordant fonts

    Serif

    Serif fonts have a small line attached to the ends of strokes. They’re a popular choice for print materials as they are easier to read.

    serif fonts

    Sans serif

    Types of font without serifs. Interestingly, sans serif fonts are said to be harder to read. For this reason, they’re used for shorter lines of text like headlines and captions.

    sans serif font

    Slab serif

    A typeface that is more block-like serif font. It’s considered an aggressive font so use it sparingly.

    slab serif font

    Decorative

    Decorative fonts are a little more artistic. This is the family of fonts that are used to set the mood depending on the message. It’s great for packaging and posters.

    decorative font

    Script

    This is a font type that is closer to cursive. It’s a difficult font to read when used for body text but works well when you have illustrations or a short title.

    script font

    It’s important to get these basics down because you will start recognizing the different types of fonts and what differentiates families of fonts. The reason why you have to be careful with pairing fonts is that fonts have personalities. If you glance at the list of fonts above, you can probably tell that a decorative font will not work with script fonts. And you’re right! But let’s keep investigating to find out why.

    The main goal to keep in mind as you’re trying to see if the fonts work together is unity and coherence. This can be in the form of dramatic contrast (that works) or simply fonts that go well together because they’re from the same family.

    As for the number of fonts, you should aim for no more than 3 as we’ve mentioned. The more fonts you have, the more challenging it will be to achieve harmony. If you’re just starting with font pairing, try different variants of fonts from the same family that have different weights.

    2 important questions to ask

    1. The first question you should think about is ‘what is the nature of your content?’ You have to consider what layout you’re working with and toward what purpose or goal. You have to establish these goals to keep the purpose of your fonts clear.
    2. The second question you’re probably thinking of is ‘how do I achieve perfect font pairing?’ Successful font pairing can be achieved through concordance or contrast (which you’re now familiar with). If fonts share certain qualities (concord), chances are they will work well together. Being completely different (contrast) is another way to make fonts work together.

    What you want to avoid is conflict between fonts. This can be fonts that are so different they don’t belong on the same layout or fonts that are way too similar to make a difference.

    9 perfect font pairings from VistaCreate

    1. Montserrat-Bold and Yellowtail-Regular

    Montserrat-Bold and Yellowtail-Regular

    2. AbrilFatface-Regular, Montserrat-Regular and Montserrat-Bold

    AbrilFatface-Regular, Montserrat-Regular and Montserrat-Bold

    3. PoiretOne-Regular and Bebasneue Regular

    4. Raleway-Regular and OpenSans-Bold

    Raleway-Regular and OpenSans-Bold

    5. Offside-Regular, Superfclarendon Regular and OpenSans-Bold

    Offside-Regular, Superfclarendon Regular and OpenSans-Bold

    6. OpenSans-Bold and NoticiaText-Bold

    OpenSans-Bold and NoticiaText-Bold

    7. OleoScript-Regular and Marion-Regular

    OleoScript-Regular and Marion-Regular

    8. Righteous-Regular, Montserrat-Bold and VarelaRound-Regular

    Righteous-Regular, Montserrat-Bold and VarelaRound-Regular

    9. Jura-Regular and Lalezar-Regular

    Jura-Regular and Lalezar-Regular

    3 tools for font pairing

    Font Pair

    This is a website that makes it easier to pair together Google fonts. You can sort the fonts by typeface combinations or simply search by font. The great thing about this website is that you can customise the text on the website to see if it will look good with the font pairings.

    Typ.io

    This is a great resource to turn to for inspiration. The website gathers successful font pairings from around the web to help you make decisions about your text. You can also contribute to the collection by downloading an extension.

    Typespiration

    The library of fonts on Typespiration is laid out as tiles which makes it really convenient to look through. On top of fonts, you also get color combinations that work well. The website also offers HTML/CSS code.

    You’re now equipped with some basic vocabulary, great examples from ready-to-use templates from VistaCreate and some of the most current tools you can use for font pairing. As you can tell, you can just explore the ready templates and see what fonts have been paired by VistaCreate’s designers. Sometimes you’ll find inspiration in the most unexpected places.

    To stay updated, read our blog post and dive deep into graphic design trends.

    VistaCreate Team

    Never miss a thing

    Subscribe to the VistaCreate newsletter and never miss out on fresh template collections, essential service updates, and other helpful information.

    Contribute to VistaCreate Blog

    Share your story with millions of creators using VistaCreate worldwide.