combining fontsIf you haven’t heard, Netflix jumped on the bandwagon and got its own custom typeface recently, joining the likes of tech giants Apple, Google, Samsung and more that adopted bespoke typefaces. Why would these companies go through the hassle of creating custom typefaces? One possible reason has to do with how typeface and font usage can influence perceptions. According to an interview in The Verge, Netflix brand design lead Noah Nathan said one reason the company created its own font was to give Netflix “its own unique identity.” While you don’t need to get your own custom font for your website, it may be good to think critically about how your website’s typography might influence your site’s visitors and branding. Read on to learn eight tips for combining fonts on your website, making it a more appealing experience for your visitors.

Serif vs. sans serif vs. script typefaces

Before getting tips on combining different typefaces (i.e., font families, such as Times New Roman) and fonts (i.e., type with a specified style, weight and size, such as bolded Times New Roman, 12-point font), it may be helpful to first learn what kinds of typefaces there are.

There are a number of different typeface classifications, but three of the most basic ones are serif, sans serif and script typefaces.

Here are some examples of the different typeface classifications:

combining fonts

Serif typefaces are identifiable through small lines, known as “serifs,” that mark the ends of each stroke. In the serif typeface example above, you can see that each letter features small lines marking the ends of each stroke. Serif typefaces typically convey a more classical air, and they sometimes look better on the web when higher-resolution displays are used.

Sans serif typefaces, on the other hand, don’t feature the small lines or “serifs” that are associated with serif typefaces. Sans serif typefaces usually convey a more simplistic vibe than serif fonts, and they typically look better on the web when lower-resolution displays are used.

Last but not least, script typefaces often look like calligraphy and handwriting. Depending on the kind of script typeface you use, your typeface may convey a different personality. Generally speaking, it may be good to limit this typeface’s use to titles or other short phrases, since using a script font for longer pieces of text can make it more difficult for someone to read your text.

Tips for combining fonts

Now that you know more about the different typefaces, here are some tips on combining fonts.

Using one font versus using multiple

Before launching into the full-on crash course on combining fonts, you’re probably wondering why you would want to combine multiple typefaces and fonts in the first place.

There are times when it’s appropriate to use just one typeface and little variety in terms of the type’s style, size and weight. There’s even a name for the concept: concordance. This typography strategy is useful when you want to communicate a straightforward, no-nonsense feeling.

Here’s an example of concordance that works:

combining fonts

However, if you think your design needs to pop and draw eyes, you may want to combine typefaces and fonts to make a larger impact. That’s when combining fonts comes into play.

Serif font + sans serif

One common way to combine fonts is to use a serif font and a sans serif font. Some people think that using a sans serif font for a body of text and a serif font for headings can make for good design. Here’s an example of a Georgia font (serif) and Verdana font (sans serif) combination:

combining fonts

Create contrast

The reason why combining a serif font and a sans serif font usually works well is because this combination creates contrast. When selecting fonts, contrast is something you may want to strive to create. More specifically, you’ll want to find typefaces that are different but still share one or two commonalities. These commonalities could pertain to a shared weight (i.e., font thickness), character shapes, the X-height (i.e., the height from the bottom to the top of lowercase letters) and the characters’ width (i.e., glyph width). You’ll also want to pay attention to the different angles corresponding with the typefaces’ axes, as they can act as another point of difference or similarity.

Here’s an example of contrasting fonts (Georgia and Arial) that work well together:

combining fonts

Avoid conflict

While you do want to create contrast by combining fonts that are different with some similarities, you also want to steer clear of combining conflicting fonts. Conflicting fonts are too similar to one another, causing them to conflict with one another. For example, combining two similar serif fonts or two similar sans serif fonts can sometimes result in conflicting combos.

Here’s an example of two serif fonts (Georgia and Times New Roman) that don’t pair well together:

combining fonts

When in doubt, it may be safer to just avoid using two of the same typefaces (e.g., two sans serif typefaces or two script typefaces). At least, until you develop an eye for what works and what doesn’t.

Use fonts from the same font family

Another go-to trick that you can try out is to combine fonts that belong to the same font superfamily or typeface superfamily. In the world of typography, a typeface superfamily or font superfamily is a group that encompasses related font designs in a range of styles and weights (e.g., sans serif and serif fonts under the same family tree). One popular superfamily is Lucida, a superfamily that includes serif (e.g., Lucida, Lucida Bright and more), sans serif (e.g., Lucida Sans, Lucida Grande and others) and various script fonts (e.g., Lucida Calligraphy, Lucida Blackletter and Lucida Handwriting). Using fonts from a superfamily allows you to easily select fonts that strike the perfect balance of similarity and difference.

Here’s an example of a well-known font superfamily, Museo:

combining fonts

Don’t use too many different fonts

When it comes to website design, it may be wise to limit the number of fonts you use on your website. The general rule of thumb is to stick to using two fonts – perhaps three, at the most. If you use more fonts than that, you may increase the risk of cluttering your website with too many different fonts.

Here’s an example of too many fonts:

combining fonts

Here’s a better use of multiple fonts:

combining fonts

Each font should differ in terms of its importance in relation to your website’s other fonts. For example, if you opt to use three fonts, you may want to select a font falling into each of these categories:

  • Primary font – A primary font is the font that will likely draw the most attention. It’s a font that you may want to use in your website’s headers.
  • Secondary font – A secondary font should stand out less than your primary font. It’s a font that you would use for larger bodies of text, such as your website’s paragraphs or blog posts. It’s important to choose a secondary font that’s easily legible. By doing so, your chunks of text will look cleaner and be easier for audiences to read.
  • Accent font – If you opt to use three fonts instead of two, consider using the third as an accent font. Accent fonts are used in very specific cases to draw your website’s visitors and audiences, such as cases involving call-to-action buttons and links. Your accent font should be distinct from the rest of your fonts and web pages.

Make sure you’re communicating your brand and the right personality

Most importantly, don’t forget to choose and use your website’s fonts or font based on the personality and brand you want to communicate. If the fonts don’t fit your brand, then even the best font combinations might not appeal to the audiences you’re trying to draw. For instance, take a look at the two examples below. Do you think Option A is a better fit for a bank or Option B?

Option A
combining fonts

Option B
combining fonts

Option B probably better communicates trust and credibility – traits that consumers would find appealing in a bank – than the more fun and slightly childlike Option A. As such, Option B would likely be a better option for a bank’s website – unless the website is an educational page for children about bank accounts, a context that would render Option A the better fit.

Website builders make combining fonts less daunting

If all these tips are a bit much for you to keep in mind, using a website building service can help. These services allow you to not only build your website with ease, as they usually offer drag-and-drop editors and pre-made templates, but website builders also make it easy for you to use font combos that fit your website. That’s because many website builders come with themes that already include preselected fonts and font combos that fit the themes. That said, certain website builders still give you the flexibility to choose the fonts yourself. For instance, Wix and Weebly both provide templates that come with preselected fonts, and both website builders also give you the flexibility to change these fonts if you want to. In addition, some website builders, such as Yola, offer different premade font combinations that you can select from. All in all, if you use a website builder to make your website, you may have less to worry about when it comes to your website’s font combinations.

A last word on combining fonts

While typography and fonts may not seem like the most important aspects of a website, they can still affect how people view your brand, you and your service. Now that you know more about combining fonts in effective ways, learn more website building tips that could help you further increase website traffic. Get started by taking a look at our website building blog and website builder reviews.