Choosing colors for your blog is easy compared to choosing fonts. And fonts are just as important in communicating what you and your blog offers.
There are almost 2000 fonts to choose from. 682 from Google Fonts alone. How do you pick?
Take a clue from my chosen title. The best font for your blog. This isn’t the “nicest” or the “best-looking.” The best font/s for your blog pair well with each other AND your overall design intent.
Design intent? Your brand. Your service. Your audience.
The Criteria for the Best Fonts For Your Blog
Legibility is king. Your fonts should look good, put your brand and blog personality forward, and make it easy for your readers to find and consume the content you want them to find and consume. So, before you hunt for fonts…
Give each of your fonts a job.
As you choose them, and as you pair them, keep in mind what each particular font will be doing. Assign them their specific places and duties.
“I need a header/banner font. I need a heading font. I need an accent font.” Now you’ll have an easier time choosing and matchmaking.
Steer clear of the bad fonts. You might not be aware of it, but some of your readers would be, and it would turn them off your blog. These fonts have tarnished names. It’s well known that designers detest them. Comic Sans, Trajan, Zapfino, Bank Gothic, Papyrus, Copperplate, Bradley Hand, Mistral, Curlz.
Some fonts are good, and they’re overused. Some fonts are associated with term papers. Some are associated with amateur birthday cards made on MS Paint. Many people still use Helvetica. It’s their fallback font. I like it myself. The trouble is these fonts can look old and tired. An uncreative choice. Lobster, Helvetica, Brush Script, Times New Roman, Courier, Arial.
What does your target audience like? What would appeal to them? Something fun? Serious? Something that would be assuring of your expertise? Or something more personal and friendly? Modern fonts? Or the classic fonts they grew up with?
Is it legible even at it’s tiniest? If your choices overwhelm you, font size is a good place to start. Many fonts are no longer readable at small scale.
Pick a font that looks good small, then move up to header size.
- The X height – The height of the lowercase letters. If they’re big, that means better readability, but they shouldn’t be so big that lowercase letters are hard to distinguish from the uppercase letters.
- Serifs make long passages easier to see and read, even moving the eyes along the lines of text. But that’s in print. Serifs are often small and thin. They usually don’t look good on pixel-based screens. All those extra curves and lines distract the eye. So unless your blog is in print, choose sans-serif fonts for body text, like many designers do.
- The I/l/1 test – The capital I, the lowercase L and the number 1. If these letters and numbers are sensitive to your name/brand, test fonts so that each is distinguishable from the other. Don’t depend on this too much, though. Most of the best fonts actually fail this test. This test works best choosing fonts for your headers and headings. They call attention. And the differentiating extras of serif fonts look good huge.
Is it still handsome across devices, operating systems and browsers? Does it look good in all-caps? In all-lowercase? In left or right alignment?
It’s not just emojis that look different in Windows and iOS. Fonts are rendered differently, too. And different browsers can render fonts with different letter spacing (kerning).
Tip: Use BrowserStack to preview your design across all browsers. Experiment with all-caps and spacing. You or your graphic designer should be able to use your chosen fonts in whichever way looks best with other images. Spacing, font size, upper/lowercase, and even alignment!
Does your font match your blog’s personality? Playful? Somber? Elegant? Expensive? Money-wise? Modern? Old-school? Feminine? Masculine?
Tip: Read content in your chosen font/s. Have others read it, too. Ask for feedback. This is how you evaluate if that font you wanted is conveying the tone and emotion you mean to convey. What you thought was playful might only look too “kiddie” to others. What you thought was “sophisticated” might only be “trying too hard” and “difficult” to others.
Font Match-making: How to Pair Fonts
I’ve mentioned before that it’s good to have only two to three fonts in your blog. This is enough for variety but not too much that you’re constantly introducing new looks to your readers. Consistency is essential to establishing your blog’s brand and personality.
To pair fonts, here are the font styles (or font families) you’d be working with:
Now you can experiment with pairing recipes. Pair fonts from different font styles, or from the same styles. You can play with what you like. But the best pairings have high contrast. Thick to thin. Serif to sans serif. Bold to regular. Serif to script. These sample pairings are all from Google Fonts.
Each pairing recipe has its dynamic and its own ideal placements– script and decorative fonts do well when used to set off Serifs/Sans Serifs in headers and banners, while Serif and Sans Serif are the best for headings and body text.
Pair fonts that share a similarity. Yes they should have high contrast, and a similarity could be so subtle but it’s there. A similar width. A similar shading. It’s called “matching” for a reason. They don’t always have to be opposites. Sometimes they look great when they match!
Pair “related” fonts. They’re not from the same family, but they share a creator. They’re siblings! Or cousins. Designers create their fonts to look good together. You’d know them because they’d have similar names. Like family names. Merriweather. Merriweather sans. Alegreya. Alegreya sans.
It all depends on your blog’s branding and personality.
You don’t even have to find another font. There’s already high contrast in size differentiation, a fool-proof choice. The same font, only different sizes. Or similar fonts, different sizes. It looks good. It’s aesthetically pleasing. It’s simple.
Resources and Tools
The following websites and font repositories have all the fonts, and all the comparisons pairing previous you need to make the best choice for your blog. Happy font hunting!
Experiment before commitment. Your eye needs to adjust to see your fonts as they truly look. Developing and honing your taste for good fonts would make your blog/s look better, more professional, even expensive. And simply and most importantly, your blog/s would be readable.
The best fonts I’ve encountered:
Proxima Nova – no nonsense, so readable, for body text.
Garamond Premier Pro Display – looks great for headings
Brandon Groteque – headers, looks great huge
And, if you want help with your blog design, check-out my blog design services.
What are YOUR favorite fonts? What are your current fonts? Any plans to change what you currently use?
Please share in the comments below!