Beginner’s Guide to Fonts for Your Blog: How to Choose Font Combinations

Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations
Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations. From http://www.DesignYourOwnBlog.com.

How to Choose Font Combinations

Typography is the foundation of good design and using different fonts is a wonderful way to make your blog or website more unique. But figuring out which fonts to use and combine is tricky.

This guide will help you navigate the overwhelming world of fonts and help you pick some that will not only look great, but make it easy for your readers to digest your content! We’ll also talk about where to find free web fonts and how to use them on your blog or website. And at the end, there’s a free cheat sheet you can either download or pin to your boards as a reminder.

Here’s what you can expect to learn from this three part Beginner’s Guide to Fonts for Your Blog:

How to Combine Fonts
  • The different font categories
  • Simple ways to combine fonts
  • Matching your fonts’ “mood” or “personality” for your audience
  • Readability of fonts
Where to find free web fonts:
  • Why we should use text in place of images wherever possible
  • Some powerful font resources
  • How to identify a font you’ve seen on a website
How to use these fonts in our sites:
  • How to create a reference link to a fancy new font
  • How to incorporate the fonts you want into different areas of your site
  • How to create proper CSS font stacks

And now for Part One of the Beginner’s Guide to Fonts for Your Blog: How to Choose Font Combinations. Enjoy!

Font Categories

First things first. Let’s identify the different font categories because these are important distinctions to make as you’ll soon see. There are several types of font categories: Serif, Sans Serif, Slab Serif, Monospaced, Script and Display.

Serif typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comSerif fonts have serifs, little extenders or “feet” sticking off the edge of each stroke. Serif fonts are almost always used in print and have a traditional feel to them.

Sans Serif typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comSans (meaning without) Serif fonts literally do not have the little feet or extenders. Sans serif fonts are common on the web and they feel more contemporary than serifs.

Slab serif typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comSlab Serif fonts have extenders, but they have thick, square-ending strokes. Many slab serif fonts were created by adding slab serifs to the ends of sans serif fonts. They kind of fit between Serif and San Serif fonts because they have a little bit of modern mixed in with traditional.

Monospaced typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comMonospaced font characters each take up the same amount of horizontal space. You may notice that in other fonts, letters like “m” take up more width than letters like “i.” Monospaced fonts are meant to imitate old typewriters or old terminal computers. They are not advised for body copy on the web because the uneven spacing can create “rivers” which are gaps that appear to run through paragraphs of text. These gaps can cause weird readability issues. Monospaced fonts can be used in titles, subtitles or blockquotes, or they are typically used to show code examples or provide instructions. https://www.tcd.ie/CAPSL/TIC/assets/img/accessible-info/river-effect.png

Script/Handwritten typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comScript or Handwritten fonts evoke handwriting or cursive. Script fonts are intended for decorative use and can add a lot of personality to your design. Use them as an accent, such as in your titles or subtitles, never for body copy as they are not easily read in long paragraphs. Depending on the font, script fonts can have an elegant or casual feel.

Check out some nice script font round-ups.

Display typefaces/fonts from the Beginner's Guide to Fonts for Your Blog: How to Choose Font Combinations at www.DesignYourOwnBlog.comDisplay fonts can belong to any category above, however they are either quite detailed or very thick and best displayed in larger font sizes. Many of these fonts are popular to display quotes or to put over images. Again, use these as an accent font, such as titles, subtitles, or attention-grabbing text.

Check out some nice display font round-ups.

How to Pair Fonts

The best way to pick fonts that go well together? Follow a few simple guidelines:

  1. contrast fonts by using a serif and sans serifStick with just 2 fonts 
    Use the KISS method: Keep It Simple, Stupid. If you’re relatively new to typography, stick to using just two fonts (NOT counting your logo) throughout your site:

    • one font for headings and titles
    • another font for the body copy
  2. Combine a serif font with a sans serif font
  3. Contrast size and weights in font headingsCreate Hierarchy

    When glancing at a page of content, you want to be able to see the hierarchy of elements on the page. Choosing fonts with a versatile family is always a good choice because you’ll get a good range of weights.  

    Titles and headings are best when they are a heavier weight than the body copy. When a title is bold or just a thicker font than that of it’s accompanying text, it tends to stand out more like a title should.

    Use different sizes to create hierarchy, but be consistent. The page title should always be the largest font on the page and no other element should use the same size font. Subheadings should always be smaller than the title and sizes should correspond with importance. The body copy should be large enough to be readable (16 pixels is now the norm), so size your titles accordingly.

  4. Create clear contrast by combining…
    • contrast font weightsWide and condensed fonts:
    • contrast font cases: uppercase vs lowercaseUPPERCASE and lowercase fonts:
    • contrast fancy vs simple fontsFancy and simple fonts:
    • contrast font colorsContrasting colors:

    The preceding four images are from typespiration.com

Things to Keep in Mind When Selecting Fonts

Choose fonts that have the right “mood” for your audience

Fonts have personalities too and you want to choose fonts that reflect the tone of your site.

  • classic or old-fashioned fontSome fonts are classic or old-fashioned:
  • playful and light fontSome are playful and light:
  • elegant fontOthers are elegant:
  • gothic fontStill other fonts feel gothic:
  • retro fontAnd some are perfect for a retro vibe:

Pick fonts that go well with the nature of your content. The fonts you choose need to support your brand. To read more on font moods, read Four Techniques for Combining Fonts.

Don’t use fonts that are hard to read

hard to read fontsYou found such a cool font and you love it! But it might be a little hard to read. Think you can still get away with it?

If in doubt, get rid of it! You will do a disservice to your readers if they have to spend extra time trying to decipher what you’ve written. It’s also easier on the eyes to read dark text over a light background as opposed to light text on a dark background.

Above all else, keep your body copy in a modest, easy-to-read font and you won’t go wrong.

Additional Tips + Resources

For additional font selection resources and another special tip, download my free ebook, 3 Ways to ROCK Your Blog Design! Just subscribe here and you’ll get the free download immediately.

Here’s that free Font Categories cheat sheet I told you about too. Don’t forget to pin it to your Pinterest Typography boards so you can remember it!

Update 3/3/2014: Just found this amazing new website called Type Finder. It asks you about 6 questions about the type of font you’re looking for, then spits out a list of both free and paid fonts that fit your criteria. Definitely worth checking out!

This concludes Part One of the Beginner’s Guide to Fonts for Your Blog

What’s next?

Want to know where to find and how to use FREE Awesome Web Fonts? Read Part Two of the Beginner’s Guide to Fonts for Your Blog: Where to Find Free Web Fonts.

Then in Part Three I’ll show you how to incorporate them into your site: How to Use Cool Fonts on Your Blog or Website.

Got any questions or thoughts you’d like to share? Need some guidance picking out some font pairings? Please comment below, I’d love to hear what you have to say!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

29 Comments

  • Nadia Ghouas says:

    Hi,
    Can I mix the Feel – pointing at the “feel font” you used under “handwritten fonts” (handwritten type) with Lily Script one? And if so which body font would you mix it with?

    Thanks for your help. 😉

    Bests,
    Nadia

    • Marianne says:

      Nadia,
      It would be best to not mix two script fonts together. Choose either Feel or Lily Script then combine it with either a serif or sans serif font for your body copy. Just pick two fonts for now to make it easier instead of worrying about 3.

      You can purchase Feel here: http://www.myfonts.com/fonts/sudtipos/feel-script/ but Lily Script can be used free through http://www.google.com/fonts so I would personally go with that one to start. Then try this tool http://font-combinator.com/ to find a good combination. Try following some of the pairing guidelines above by choosing body fonts that contrast with the thick wide strokes of Lily Script: something thinner would be best.

      I hope that helps! Feel free to post your pairings here when you find one (or some) for feedback.

  • Sofie says:

    I have a question about the weights ultra-thin > black.
    I’ve noticed that on my blog, when I make fonts larger, they also grow ‘fatter’. Is there a way to prevent this? For example, could I add ‘thin’ as a css specification?

    Thanks!

  • giada says:

    This post is super useful, ‘ve bookmarked it for later reference!
    Thanks and hello from the Epic Friday Linky Party! 🙂
    giada recently posted…Springspiration! Home décor, wallpaper and fabric ideas.My Profile

  • This is fabulous and so helpful. I find when I’m creating a pinnable image for Pinterest, selecting fonts is the most time-consuming task because I’m never certain what looks best/has the most impact.

    Thanks so much for sharing. I’m pinning for reference.
    xoxo
    Jennifer | The Deliberate Mom recently posted…Make Your Blog Stand OutMy Profile

  • Fenny says:

    Hey 🙂 ,
    I found your post really helpful . But i was wondering if you could Tell me. From wher you got the Display Font “Whitney ” with the Circles, or did you added the Circles seperatly ? And if so , how did you do it ?
    Fenny

    • Marianne says:

      Hi Fenny, thanks for reading and leaving a comment 🙂 I feel awful about this, but I honestly do not remember where that font came from. I didn’t create it myself but I searched all the usual places and can’t seem to find it. I’ll keep looking and if I find it, I’ll let you know!

  • Margot says:

    Need help picking fonts for our website..so hard..Need heading, dub heading and text. Perhaps I could send you some screenshots and you could offer suggestions??

    • Marianne says:

      Hi Margot, have you found at least one font that you like a lot? It’s better if you can find at least one that you really would like to use, then it will be easier to pick out another. Since you are new at this, I would start out with just two fonts. It’s not necessarily a good idea to use one font for headings and another for the subs. It’s better to use the same one at different sizes, other wise you risk not having uniformity.

  • Dear Marianne,
    Thank you very much for all the interesting content you always share with us! I keep following you because I always learn something useful thanks to you. This post is great too.
    In fact, what I would like to ask you is about a lovely infography that you posted on Pinterest, that when I clicked it, linked to this post.
    I think that is soo smart, because you can design a pretty image with illustrator so that it is more attractive to Pinterest users. But when I got here, that infography does not appear in this post. How did you do that?
    Do you think it could be a good idea to write a post about this? I would love to find out how to do that. It would be so useful for my website. I hope I have explained myself well,
    Thank you very much!
    Cristina

  • Audria says:

    Hi Marianne
    What fonts are you using on this site. I really like it.

    • Marianne says:

      Thanks Audria! I am using Oswald for headlines and Open Sans for body copy, both Google fonts. The script that appears here and there is Jenna Sue from DaFont or Font Squirrel.

  • CJ says:

    Hi Marianne,
    I’m extremely new to the blogging family and have found your information very helpful. So thank you! I’m having a difficult time finding the right font balance. The main header is a font called FACTOR http://www.1001freefonts.com/factor.font with an initial logo in Arizonia. Would you have any suggestions for the blog description/tag font, article/widget titles and body fonts? Right now I’m using regular Playfair Display font for the body? Thank you so much for your time and help.

    Best!

    • Marianne says:

      Hi CJ, can you send a link to your blog so I can take a look? It’s easier when I can see them all together.

    • Marianne says:

      Hi CJ, can you provide a link to your blog? It’s easier for me to tell when I can see them together.

      • CJ says:

        Hi Marianne, thank you for your response. I sent you the link via email on Tuesday 9/6 and wanted to make sure you received it. Hopefully that was the correct avenue.
        Thank you again!

Leave a Reply

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

CommentLuv badge