FREE: Ready to build sustainable revenue and get paid for your life-changing work? Get the tools:

Brand Fonts: Why Some Website Typeface Combinations Look So Stunning

A combination lock on a locker

Your “brand voice?” It all starts with your brand fonts!

And the #1 place to start using your brand fonts is on your website.

There are two companies offering you the ability to customize the typefaces on your website, and they’re easy — and often free — to use.

In this post, you’re going to get the resources you need to use beautiful brand fonts on your website — plus five tips that will show you how to combine website typefaces like a pro.

Google Fonts is free and offers a robust collection of open-source typefaces suitable to standing in as your brand fonts.

Adobe Fonts (formerly Typekit) is a commercial solution that’s reasonably priced, and offers a wide range of beautiful brand fonts.

Adobe Fonts includes collections from major type foundries and typeface designers.

On this blog, I switched from the web standard Georgia to Gentium Book Basic, which is a Google font that’s classic and easy-to-read.

Fresh fonts served daily

Both services work in a similar fashion: typefaces are “served” up onto users’ machines, much the way websites are served on the internet.

Users don’t need to have the typeface installed in order to see it used on a web page.

So many font decisions!

In the early days of the internet, you wouldn’t expect to see your exact brand fonts on your website — it’s usually wasn’t available.

Now? Web typography is as powerful as print typography in terms of choice and the ability to customize the look of your website.

Does all this choice seem overwhelming?

The easiest way to pinpoint what fonts to consider is to first pinpoint your brand personality. Fortunately, I have a quick quiz that will help:

Related: How to Define Your Brand Personality: Start with this Quick Quiz

There are two main brand personality categories. Do you know yours now?

If so, then you should know which brand fonts will work for your website.

Now let’s go over the best way to combine and use brand fonts — I’m about to share a few closely guarded design secrets!

How many fonts should a brand have?

In order to maintain visual consistency, pick two fonts — just two.

It’s easier for your visitor to notice, absorb and remember two brand fonts than it is three, or four or more.

Spend some time picking out two versatile brand font styles and you’ll have what you need to establish a memorable visual brand.

Related: What Font Should You Use to Brand Your Business?

The easiest way to do this is to pick one font for your text, and a different font for your headlines and subheads.

Your text font should be highly readable. This is where the bulk of your information will be conveyed, so you need to be sure it’s clear and easy on the eyes.

Your headline font will be used in smaller doses, so it can be slightly more challenging to read, or more decorative.

Mix and match brand font styles

A great way to decide which styles combine well is to study their letter forms.

Look at two things: size and shape.

One will affect readability, and the other will help you combine different typefaces. Pick your text typeface first (it’s more important), then look for a headline style that will work with it.

Large x-height=readability

When looking for a text typeface, notice the space between the baseline the letters stand on, and the tops of lower case letters or the “bowls” on letters like b and h.

This is called the x-height.

brand marketing includes choosing a readable typeface

It’s easier to read text fonts when they have a large x-height rather than a small one.

Related: Are You Falling for Font Falsehoods? What Matters for Picking the Best Font Size

Typefaces with compact x-heights tend to close up visually at a distance, making them hard to decipher.

Both Google Fonts and Adobe Fonts offer you the ability to view text blocks set in the style you’re considering. Be sure to check readability at small sizes.

How to choose two brand fonts that look great together like a pro graphic designer

You’ve picked out a text typeface with a nice, large x-height. Now you want to combine it with a headline style, but where should you start?

First, try looking at the letter forms in the text typeface you chose. Look closely at the letters a, g and e.

For the best blend, look for typefaces that draw the letters a, g and e similarly. In the examples below, the serif typeface on the first line combines best with the second sans serif example. The serif typeface on the second line combines best with the first sans serif example.

brand marketing includes choosing good typeface combinations

Related: How to Choose and Combine Fonts

Another brand font tip the pros use

Another direction you can take things is to make your headline text dramatically different from your body text. Don’t try to match letter forms: make them obviously different.

In the example below, notice how the headline typeface is dramatically different, yet this combination works, too.

brand marketing includes choosing typefaces that combine well

Warning! Don’t make your brand fonts wishy-washy

The worst thing you can do is to almost match your letter forms.

In the realm of graphic design, something that almost matches looks like a mistake.

Be decisive: either make your letter forms match closely, or make them dramatically different.

See the example below for an almost-match that doesn’t quite work.

brand marketing includes avoiding typefaces without definite contrast

Get daring with your website typeface choices

Rock your typography like a pro!

Use the tips above to get started. Visit Google Fonts or Adobe Fonts and follow their instructions for bringing custom brand fonts to life on your website.

Editor’s note: This post was originally published on August 26, 2010 and has been updated with the latest links and information — enjoy!

Pamela Wilson

Pamela Wilson is the Chief Marketing Officer at DCS. She’s the creator of the Offer Accelerator Program. Learn more about Pamela’s content marketing books, and read reviews of the tools used to run this site.
Pamela Wilson coaches people in midlife to build profitable online businesses
I’m Pamela Wilson

In 2010, at the age of 45, I started this site and grew it into a business that offers freedom, flexibility — and consistent revenue.

YOURS FREE

A Guide to Large-Scale Revenue from a Small-Scale Audience

The free toolkit for experts who want to build sustainable revenue and do life-changing work.

Start Your Revenue Revolution Today

Where should we send your toolkit?

© All rights reserved