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 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:
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
- Combine a serif font with a sans serif font
Create HierarchyWhen 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.
- 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!
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
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.
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!
You know, I’ve noticed this too sometimes and I wish I had an answer for you but I don’t. I couldn’t even find anything online about it. I have noticed that different browsers render fonts differently so it could be inconsistencies there.
I tried out {font-weight:thin;} but nope, that doesn’t work.
A girl can try:D
oh well now that you mentioned it, have you put the # weight by font-weight? like….. where did you get the font from? google fonts? because you can download the different weights and usually the thin one is
font-weight: 300;
or something like that…. just a thought
I’ve tried it on a basic font that is included in my theme.
Haven’t installed google fonts yet.
Good tip on using numbers though, will try that!
well it will only work if you use a font that has those different weights and the different weights are named that way. for example, open sans (which is what i use) works like this: https://www.google.com/fonts#QuickUsePlace:quickUse/Family:
choose the weights you want to use, then when I want to use the thin font, I specify font-weight: 300; (be sure not to put ‘px’ after the number)
Reply to earlier thread:
Thanks Marianne. I thought my font has those weights, but I might have to look into it further.
I’d actually already downloaded Open Sans before I found your blog. It’s a great looking font:)
This post is super useful, ‘ve bookmarked it for later reference!
Thanks and hello from the Epic Friday Linky Party! 🙂
Thanks Giada for coming by!
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
Thanks for pinning it Jennifer! I’m really glad this is helpful for your pins. I refer to this sometimes too when I get stuck! 🙂
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
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!
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??
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
I just found out! You upload your pin, and ONCE IT IS IN YOUR BOARD you can edit the source to any link. Thanks for the inspiration!!
haha so glad you figured it out. yep, pretty easy to do! 🙂 i’m glad you found this post through that pin, means it’s working!
Hi Marianne
What fonts are you using on this site. I really like it.
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.
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!
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.
Hi CJ, can you provide a link to your blog? It’s easier for me to tell when I can see them together.
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!
Hi CJ, I did get it and replied. I think our communications crossed paths, but just making sure I didn’t miss another one 🙂
Hy, I am new to blogging, and find out that your website really helpfull, thank you. 🙂
Great to have you around Didi, thanks!
Choosing the right fonts can be very appealing to the eye. Adding colors changing the size and style can be very appealing. Sometimes the first thing that your eye sees makes the person want to read further into your ideas!
Thanks for sharing information on fonts!
very true Brandi, thanks for stopping by.
Hi Marianne,
This is an awesome guide on fonts selection. Thanks for sharing such a detailed post.
Thanks Mark, I appreciate that.
Hi Marianne!
I’m also quite new to blogging. Like many people, I use many different fonts to design my blog. I like the Discord fonts, I found it here https://fontsio.com/discord-font-free-download/ . And when installed, it does not display 100% correctly, for some reason!
Thanks for your content!
Hi Natalia, some free fonts may not be made correctly, so that could be causing the problems. Perhaps you can find something similar in Google fonts.
I have always struggled with combining two different fonts as the result would not be as expected, and have also searched tons of web pages to find a solution. But have finally found your post which has helped make and made the font picking easy for my website.
Would you like to suggest me font which I can use on my next website?
Under the types of typefaces first. It will help you a lot in selecting the right font your design.
I love reading this amazing blog and must say a big thanks!
Keep it up!
I am in the blogging field for the last 4 years. But I never cared about the font. When needed, did a Google search but I found articles like yours not somewhere, took very original and unique articles. Keep writing such articles and best of luck from my side.
Hello Marianne,
Fonts play a great role in the readability of your blog. A better reading experience encourages good conversions on a blog. I am also very choosy about fonts. Currently using raleway on my blog. Thanks for sharing this helpful post.
Regards,
Vishwajeet Kumar
Hi Dude! what a classic post. It is very beneficial for me and I will try to use it in my next projects. Keep up the great piece of work.
Thanks a lot.
I have been looking for new font for my blog. Your blog is really helpful . i will try some of the font that you mentioned.