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!

Are you working on your branding? Register for my FREE visual marketing workshop

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.

Have you see my free visual marketing workshop yet?

If you’re working on creating a beautiful visual brand, my free workshop will show you how to combine brand fonts, brand colors, and images to creating stunning, memorable visual marketing.

Best of all, it’s FREE — and you can watch it the moment you sign up!

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 coaches people in mid-career to build profitable online businesses. Apply to work with Pamela in her Offer Accelerator, learn more about her books, and read reviews of the tools used to run this site and business. Have you taken the free Focus Finder quiz yet?
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.

If you’re in mid-career, I want to help you do the same.

Sign up to learn and laugh at the online business life every week!

You can also read the Ultimate Guide for How to Build Your Business Online. You’ll get my complete, step-by-step approach to building a revenue-generating online business you love to own and run.

25 thoughts on “Brand Fonts: Why Some Website Typeface Combinations Look So Stunning”

  1. Very informative post Pamela, and love the new font on your site! I love playing with fonts but I’m never sure what works. I can usually spot really bad fonts, but the wishy-washy not so easily.

    What about a family of fonts that has a variety of serif and sans serif, bold, condensed and books to choose from. Something like DejaVu. Is it a good idea to use the whole family for headers and body text, if we’re looking for harmony, or does that get too close to the wishy-washy line? Could we blend serif and sans from the same family for headers and body copy?

    So many choices, and now even more!

    • Marlene, using a font family that has both serif and sans serif is a great way to handle this, and super easy. They’re drawn to work together, so if you can find one you like, go for it!

      Christopher, I’m glad this was helpful. Thanks for your comment!

  2. Hi Pamela,

    I’ve been following your posts for a few months now and, since I am going through a complete blog re-design, wanted to ask you 3 questions:

    1. What kind of fonts do you recommend that I use on http://www.SingularityWeblog.com?

    I am currently using Arial for it is a safe font but I feel that it doesn’t give me a sufficiently unique, cutting edge look and feel

    2. What kind of background color do you recommend for my blog?

    Some people like my current background but others complain that it is distracting. In my first re-design mock up so far we are going with a green background derived from my logo color…

    3. There seem to be 2 main types of blog footers: One is the minimalist style similar to yours. The 2nd one is a more information-dense footer similar to the ones used by Darren Rowse on https://www.problogger.net/ or Yaro Starak on https://www.entrepreneurs-journey.com/
    I myself am leaning towards the latter example for my new design. Any thoughts on why I should or shouldn’t have a more substantial footer?

    Thank you very much for your help!

    (If you need demographics for my visitors you can check out my stats here: https://singularityblog.singularitysymposium.com/advertize-with-singularityblog/)

    • Hi Socrates,

      One simple change you could make to your blog that would make it easier to navigate would be to use a different typeface for your sidebar than your main content area. You have busy sidebars with ads and type, and if your content area used a serif typeface (Georgia, or one of the new ones available for Thesis through the Google Font API) it would help your reader to decipher what is content, and what is navigation or ad information.

      I think the background color is fine, but the texture is distracting. You could try either a solid or gradated background, or simply reduce the contrast in the background you’re using.

      The footer style is a personal decision. If there’s anything you plan to put in the footer that is important, be aware that some people may not page down that far, and might miss it. So if you have really important information, consider running it elsewhere so it won’t be missed.

      Good luck! Thanks for reading.

  3. Thanks Pamela. It’s great to get your view on these innovations in the font industry. Also, thanks for the information on how to choose fonts.

  4. Hi Pamela,
    Thank you very much for your help!

    I have decided to change the background to solid or fading green in the same green shade as the logo.

    The footer will include a ton of info which will be available at other places too.

    The only thing left is figuring out the fonts: Yesterday, I played with all the Thesis 1.8 fonts for 3 hours and when I was done I returned everything back to Helvetica… In your opinion of my content is helvetica what should I use for the sidebar and the titles?… I just didn’t find anything which seemed to work that well… Do they really have to be different?

  5. This is a great article, a subject I’ve been planning on writing for some time, but just finished one focused on combining fonts for print.

    https://bonfx.com/29-principles-for-making-great-font-combinations/

    I don’t think we are too far off from having all our favorite classic typefaces available on the web through any one of about a dozen services (and counting).

    That said, here is a GREAT resource I’ve flagged to keep track of changes regarding who is offering what in the web font services category:

    https://sprungmarker.de/wp-content/uploads/webfont-services/

    It’s a big chart with just about everything on it. I had Google Reader create a feed from this page, though there is no RSS for it. It notifies me when it gets updated.

    • Hi Douglas!

      These are both great resources: thanks so much for sharing them. You’re right: it won’t be long before we can look back and laugh at the days we couldn’t use any typeface we wanted on the web. Personally, I can’t wait!

  6. Heyhey,
    rely awesome fonts and nice tips. The only frustration so far i´ve when i tried to pick another webfont for my projects is that my main work language is the portuguese and 80% or more of the new types available to use it are not prepare. Missing some glyphs like:
    á é º ª and other ones that are pretty needed in Portuguese lang. In english you don´t have that concern.

    But well, i´m still looking and searching for good fonts. somaday i´ll find it 😀

  7. I like your new font (Chaparral), it’s awesome! Often the problem with these serif fonts (in small size) for a text-typeface on the web is that they look less clear than a serif typeface. To be honest I also find that your typeface looks a bit less clear, but yet I don’t really have problems reading it. It looks smooth.

  8. Hi Pamela! I really enjoy your blog and tips! I thought I’d share something I’ve been struggling with to see if you have any ideas… on my site I am using Museo Slab & Museo Sans (through TypeKit)… in the slider particularly, Museo Slab looks HORRENDOUS on a Windows machine. On a Mac (which I am using) it looks great – smooth, like it is intended to look.
    I think the issue is that most Windows machines have “ClearType” enabled, which makes the majority of web fonts look this way.
    I am open to using other fonts, I just want to pick two and stick to them… I really like Museo Slab’s italic, because it looks like Archer (which is the font I really want to use, but it doesn’t come in a web font). If I had my pick of any fonts, I would probably use Gotham & Archer (or other H&FJ fonts, like Didot or Chronicle).
    Thanks for any tips or advice you may have! 🙂

    • Hi Stacy,

      Well, I’m looking at it on a Mac, and of course it looks great to me! I have found just the opposite — that Windows users often don’t have ClearType enabled, so web fonts that are being served up look jagged. There’s a post about it here: https://www.microsoft.com/windowsxp/using/setup/learnmore/cleartype.mspx

      You might want to check your stats to see what operating system your visitors are using. At any rate, it’s a good idea to make sure your fonts look good on Windows machines.

      Can the slider text be converted to an image? That would be one way to work around it. Just create one big image with the photo on the left, and the text on the right.

      We are in a transitional time when it comes to web fonts: in a few years, I suspect we won’t have these issues. Most machines will display type correctly. Until then, though, we may have to create these workarounds.

      • Don’t know how I missed both of your replies! Thank you!!!
        The slider could be an image, and I think that’s what I may have to do, the only issue being that I will lose the nice buttons (but I guess those don’t show for some people too, so….).
        I wish the majority of my users were Mac people, but alas, they’re not.
        Pamela – thanks for the help… looking forward to the reopening of your membership site, I think I’m in a good place right now to join in. When will it be open? I think I may know a lot of the material, but good templates and font stacks already done are hard to find!

    • Stacy,
      Does it happen in Firefox and Internet Explorer on the Windows machine?

      p.s. I’m in Windows 7 with Firefox 3.6.13 and it doesn’t look horrendous. If I look close, which I do now because I’ve been learning from Pamela — it looks just barely jagged. But, I really have to be looking close.

  9. I am redesigning my university’s newspaper. I’m trying to make the whole thing feel more modern, fresh and young. I would like to incorporate Museo Slab in my type wardrobe. Would Museo Slab make a good body copy? Or would it only really work for headline type?

    • Hi Hannah,

      I love the “type wardrobe” analogy! I might have to write a post about that. 🙂

      Museo Slab would be great for headlines, but I wouldn’t recommend it as a body copy font. There’s a related font — Museo Sans — that would blend with it perfectly. You’d have to check to see how it looks set up in paragraphs.

      Thanks for the question, and good luck with the redesign project!

Comments are closed.

Offer-Accelerator-PW-LOGO-300px

See if the Offer Accelerator is the right fit for you.

Pamela Wilson coaches people in midlife to build profitable online businesses

Learn about running a wildly successful online business that reflects your values and your priorities. And …

Laugh about the shenanigans in the online business world.

    Pin
    Share
    Tweet
    Buffer
    Share