Beginner’s Guide to Fonts for Your Blog: How to Choose Font Combinations – Design Your Own (lovely) Blog

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

• 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 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 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 (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 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 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 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 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. Stick 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. Create 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…
   • Wide and condensed fonts:
   • UPPERCASE and lowercase fonts:
   • Fancy and simple fonts:
   • Contrasting 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.

• Some fonts are classic or old-fashioned:
• Some are playful and light:
• Others are elegant:
• Still other fonts feel gothic:
• And 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

You 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 10,000+ others and get instant access now!

Hooray!! Thanks for subscribing friend! Now go check your email for your VIP Library access. (You may have to check spam or another tab in your gmail).