Skip to content
Home » Our Articel » 10 Rules of Font Combinations from a Designer

10 Rules of Font Combinations from a Designer

A photography instructor once told me that “You have to know the rules before you break them.”

That is the thing (both frustrating and liberating) about art and design – there may be some rules; there may be multiple best practices; but only a few practice it until they become experts. Bending or breaking the rules is always a possibility in the right context. So how do we learn to master effective ways to create font combinations? By looking at a few guidelines, then comfortably moving them outside the baseline as needed in a design.

What are fonts?

Fonts are graphical representations of text that have their own shape, size, type, color and design. Because they have different shapes, using a combination of fonts can make the design more attractive.

1. Choose a combination of complementary fonts

Many fonts have different emotions and personalities – serious, casual, playful, elegant. You definitely want to make sure that the emotion of the font you choose matches the purpose of your design. For example, a round, bubbly typeface might be appropriate for a children’s birthday party invitation card, but not for your business newsletter .

Minted/Carrie O’Neal

Just as is often the case with people, opposites tend to be more attractive: “introverted” and “extroverted” font combinations balance each other out nicely when combined. So, if you have a distinctive font with a “strong personality” (often referred to as a display font), combine it with more neutral and conservative fonts for design balance. The larger font has a lot more personality, with a curved, hand-painted look (which complements the designer’s background as an illustrator and typographer). It starts with a simple setting, a sans-serif-capital-size font that doesn’t interfere with the main font but is still readable even at a smaller size.

Behance/Ethan Johnston

Deciding to use more than two fonts to complement one another can feel like a guessing game. You will find yourself relying on instinct, gut feeling. And that’s okay. If you pay attention to how fonts combine well (or do not) “wildly” – on websites, magazines, store signs and product packaging – you will begin to develop a knack for what looks good and what doesn’t.

Dribbble/Kyle Anthony Miller

2. Construct a visual hierarchy

Traditional publishing formats such as newspapers and magazines offer a great example of how to apply visual hierarchy to fonts. They combine font sizes in a way that visually separates different textual elements such as headlines, sub-headlines, body copy, and captions. Qualities such as size, thickness (also known as “weight”), and spacing (including leading, spacing between sentences, and kerning, spacing between letters) all contribute to where the eye should navigate on the page and which text should draw attention. first time.

Behance/Andrew Colin Beck

A hierarchy can be created for all types of designs, not just layouts with titles and body copy. When you’re choosing a font combination for a project , try to focus on where you want the reader/audience to see first. Or here’s another way of doing it: Decide what information is important – which should stand out at first glance (a company name, a headline, a special offer?) – and which parts are less important. Then, create your font style, size, and settings in order. The most important textual elements are usually (though not always) the largest and heaviest.

The visual hierarchy also includes combining font sizes. The function of the font size or the size of the font itself is to determine the reading direction of the design. Usually someone will read the large font (title) first before reading the small font size. That way, the design message will be easier for the audience to digest.

Dribbble/Corin Nader

3. Consider the context

Where your design will appear can assist you in choosing which fonts will suit your project. The text should be easy to read at the size to be displayed, and clear, especially at small sizes. Consider the example below, the text is the smallest size in capitals, and each letter is spaced enough – the choice of both improves readability.

Dribbble/Salih Kucukaga

In addition to size, font style also has an effect on readability. A good start for choosing a font that fits the context of your design is to pair it with the attributes of the message you want to convey with a photographic signature (this relates to the personality of the font discussed in Rule #1).

That part of the process will determine whether a display typeface or a neutral font (or some combination of the two) is more suitable for your project. Sometimes you want something to stand out, and other times context requires an unobtrusive font, for example for long text. The magazine layout below combines the look of a two-type font with a sans serif that’s easy to read on body copy.

Dribbble/Carolin Gebele

Context can also be found in terms of genres and historical periods. Doing a little research into the background of the fonts you are considering – when and how they were formed and for what purpose, or even how they are used in a cultural context – might help a little to determine if they are a good match for your design. For example, a book cover design for a biography of Abraham Lincoln might feature a serif font used during the American Civil War era, such as Caslon or Clarendon.

As another example, font style can play a big role in anchoring the overall look of your design, especially if you’re aiming for a certain aesthetic. This design has a distinctly retro/1950s style, so the fonts chosen reflect the context and more or less match the ads shown in that era.

Behance/Keith Lowe

4. Mix serif and sans serif

Short on time and need to quickly select two fonts? Try one serif and one sans serif. Fonts are design elements that come in two distinct types. The two tend to work well together, especially at contrasting sizes.

Behance/Rob Fuller

It should be noted that in the world of typography, there is a debate about whether a serif or sans-serif font is best in terms of readability. In large amounts of text, serif fonts generally move the eye more effectively and increase reading speed, especially in print (although this obviously depends on the character of the specific font used). On the other hand, sans-serif fonts are often used for online/on-screen text due to their simple letterforms that display clearly at various screen resolutions.

Dribbble/Tom Pickering

5. Creating contrast

One of the main reasons for pairing serif and sans serif font combinations is that they are perfect for creating contrast. This contrasting idea brings together several concepts you might consider, including hierarchy and how fonts complement each other.

Contrast can be achieved in several ways, including through style, size, weight, spacing, and color, among others. In the example below, a bold, chunky font size function is paired with a tall, thin font – and although the two are quite opposite, they work equally well at large sizes because they are different. Distinction helps create a distinct role for each font, giving them room to stand out as individual pieces of information. The size of the date (in pink) is twice the height of the title (in white), so the thin numbers don’t disappear; their larger size provides enough presence to stand out against bold headlines.

Dribbble/Albert Barroso

6. Avoid conflict

When combining fonts, you want contrast, but you don’t want conflict. Just because different font sizes function doesn’t mean they will automatically match well to each other. In general, typefaces that share some quality – perhaps they have more or less the same proportions, or lowercase letters of the same height (known as an “x-height”) – will usually harmonize better together, even if their overall appearance is different.

Take a look at the combinations below – they might illustrate a situation where a serif font and a sans-serif font are only slightly different from each other. At the top of the typeface, circular, well-spaced letters, while at the bottom are taller, condensed letters. Add the contradiction between a thin serif and a thick, uniform structure, and the two clash more than they contrast.

Dribbble/Jean Francois Porchez

7. Avoid pairing fonts that are too similar

Contrary to Rule #5, choosing what is a font that is too similar (eg, not having enough contrast) can be a dilemma in itself. You will have problems setting up the hierarchy, because the fonts are visually indistinguishable from one another. And any visible difference will sound like an error rather than a deliberate choice.

But fonts don’t have to be the same to be incompatible with each other. Typefaces that are different but have comparable weight, proportions, and/or letterforms that are sufficiently similar to make your design confusing and blurry, especially when used in the same size – like the pair below, despite the fact that one is serif and others are not. This is an easy way to test whether one or more fonts might look the same: Place them next to each other on your screen, then sit a little apart and squint your eyes. If the fonts look the same, this can be a good indication that your design could benefit from changing the contrast between your typeface choices.

Dribbble/FontFont

8. Use fonts from the same family

Using a typeface from the same family is always a safe bet; most of all, they were created to be perfect for each other. Look for a family of letters that has lots of options (different weights, styles, and boxes) to make sure you have enough variety for your purposes.

Fontspring/Latinotype

When pairing fonts that come from the same family, you should plan carefully to create contrast, varying font sizes, weights (such as light, regular, and bold), and squares (top, bottom, lowercase).

Fontspring/Fontfabric

Families that come with more features like italic, or extended, extended or compact versions offer more leeway to get creative with your font settings.

One of the advantages of limiting your typeface for a project to only one font family is that it shortens the design process. There are times when trying to pick the perfect font combination can be time-consuming, but when you’ve made your selections beforehand, it takes a bit of the pressure off and automatically helps you create a more compact look.

9. Limit your number of fonts

A font is an individual character that can stand alone, so we need to limit its number. Maybe you’ve heard that you should keep the number and size of fonts in a project only for two or three fonts. This is a major guideline in some applications (and it is common in editorial designs such as magazine pages), but it is not a hard and fast rule.

Some projects require more complex font combinations, for example when you’re replicating a certain look, such as a fancy Victorian-era design, or when you need a decorative aesthetic. But if you choose to use a varied font, the overall effect should be harmonious, not conflicting or messy.

Dribbble/CruzineDesign

However, as with any other design element, you can go overboard with your choice of typeface. Most projects will benefit from a more controlled and well-thought-out approach. The best way to refine your choices is to give each font a specific role in the design. If you find yourself using a variety of fonts, but can’t exactly give a motive to your choice, it might be time to cut back.

10. Practice!

And last but not least, a friendly tip rather than a rule: Practice combining your own fonts, when there’s no money or a boss to lead opinion on the project. As with any skill, becoming competent takes a lot of practice. And as with most creative endeavors , the art of pairing fonts is often the goal. There is no surefire formula for finding the perfect letter combination.

Above we have covered a lot about what fonts are and their various uses. Starting from the function of the font size, font size, and various font combinations that can be used.

So, take the plunge. Experiment. Use your intuition. Sometimes you just have to feel that something works fine, even though it technically shouldn’t, by “rules.” Other times, you’ll find the font pairs don’t match; try to find out why and learn from there. Take these typographic foundations as a starting point, and if they help you enough, use them – if not, don’t let them stifle your creativity .

Leave a Reply

Your email address will not be published. Required fields are marked *