Recently, we talked about how your blog’s background is an important design choice that affects how visitors perceive your site. Since font choices do a lot of talking on behalf of your blog, today, we’ll look at what they’re saying.
Did you know that your fonts “speak” for you and affect not only your brand but the readability of your content? How would you describe your brand? Serious and sophisticated? Humorous and playful? Somewhere in between? Choosing the right fonts amplifies your brand and underscores the image you’re trying to project to your readership.
Good old Gus (resident attention hound) has volunteered his blog once again for the purposes of today’s font experiments. (Don’t have a test blog? They’re a great idea — you can experiment away without fear of messing up your main site. (Free blogs for everyone!)
For today’s post we’re going to focus on font experiments in the Customizer. Another way to explore fonts is to try some new themes on for size. Your test blog is the ideal place to experiment to see if you might prefer default font combinations available in different themes.
Note, there’s no cost to experiment with fonts in the Customizer. Head on over to Appearance > Custom Design and tinker away. Applying any font changes to your blog does require a Custom Design Upgrade.
Headline Fonts
Let’s start with headline fonts and take a look at how different letter forms and weights affect the overall message that a post imparts.
First up, Chunk is what’s known as an ultra-bold slab serif. What? Hold the phone. What’s a serif, you ask? In this context a serif font is one with tiny lines attached to the ends of letters that lead the eye through a word. Times New Roman is an example of a common serif font. Contrast that with sans-serif fonts — fonts that don’t have the tiny lines. Helvetica is a common example of a sans-serif font. Getting back to Chunk — it’s a heavyweight font that commands your attention:
Now, let’s consider Herb Condensed. It’s a variation on blackletter typefaces, though the more rounded letter forms feel much less serious and aggressive than say Baroque Text, which is much more pointy.
As a stark contrast, Coquette is a script-style font with a much lighter, less serious feel:
Finally, doesn’t FF Market feel modern and playful, reminiscent of handwriting?
Body Text Fonts
Selecting a font for your blog’s body text is a very important decision. Not only do you want to choose a font that looks pleasing alongside your headline font, it’s critical that it’s easy to read. (You can click on any of the images below to examine the body text more closely.)
First up, Open Sans is a font designed specifically for the web. Doesn’t it look familiar? It’s the default text used across WordPress.com. You’ll find it in your dashboard and even at The Daily Post and WordPress.com News.
See the difference here with Chaparral Pro? The serif type, while still beautiful, feels a little more old-school textbook, and a little less modern and sophisticated than Open Sans above.
Experiment with Combinations
Combining headline and body text choices can be fun. The Customizer allows for a myriad of font combinations. While of course, the fonts you choose will reflect your sense of taste and style, try to ensure that the fonts you choose are easy to read to make certain your message gets heard.
After a few attempts, Gus seems to think that this combination of the commanding yet lovely Adelle, paired with the modern and sophisticated feel of Open Sans for body text, is the most fetching for his site. Be sure to experiment with the regular, italic, bold, and bold italic variations and the sizes of your type to fully explore the options available to you.
Have fun experimenting! It costs nothing to mix and match and preview font choices. You never know, you might find a combo that you fall in love with.
Bonus Reading
Interested in learning more? Web typography is deep and interesting subject that refers to the use of fonts on the web. It’s rooted in typography — a set of techniques combined with artistry — used to select and arrange fonts to create beautiful and readable type. To learn more about web typography, check out Richard Rutter‘s excellent and free compendium, The Elements of Typographic Style Applied to the Web.
Currently blogless? You’re a click away from sharing your story.
Create your blog at WordPress.com
TIL about ‘serif’. Didn’t know any of that before, awesome!
LikeLike
Loved this!
LikeLike
My font says “suitable for people with poor eyesight.” Since I have quite a few followers in or near that age bracket, it works.
LikeLike
I just told my optometrist yesterday, “Can’t you do an eye exam chart in Bumplepuppies’ font??”
LikeLike
Bahaha!
LikeLike
thanks…nice to know someone is alive out there. 😉
LikeLike
Good to know. I’m checking on my font styles as we speak!
LikeLike
Perfect fonts initiate the speech, you do the rest.
LikeLiked by 1 person
I can’t even dress myself in a fetching manner, nor do I ever match shoes to purse. But perhaps I can accessorize my blog easier if it’s free! Terrific post with great examples. I’ve looked how to do this in my theme, Splendio but cannot figure it out. Does that one support changing fonts for titles too? Thanks for this — very helpful!
LikeLike
Hi @LMM, yes, you can experiment different fonts if Splendio is your theme. Go to your dashboard, then Appearance > Custom Design, then select the Font tab at the top of the page.
If you click on the font titles, you can then select a new one and the preview will update itself so that you can see how your site would look with that font. You can keep previewing as many fonts as you like for free. If you decide you’d like to use the fonts on your blog, you would need a Custom Design upgrade.
LikeLiked by 1 person
Ah…..okay so to change it for real I DO need to upgrade? Is that with all the themes or just happens to be with mine?
LikeLike
Yes, to change your fonts in the customizer you do need a Custom Design upgrade — this is the same for all themes. You can switch to another free theme at no cost, of course to try out the defaults fonts for that theme.
LikeLike
Good info. But how do I change the fonts?
LikeLike
Hi @Sue, let me know if my answer to @Little Miss ^ answers your question.
LikeLike
Hi Krista: I looked at your blog and I don’t see it. Where’s @Little Miss?
LikeLike
Never mind, I found it. I don’t have that so I guess I have to stick with what I have. Thank you. At least I can stop trying to figure it out now. 🙂
LikeLike
Changing fonts is a premium feature here on WordPress.com. I have hundred of clients whom I calibrated their blog with perfect fonts and designs.
Fonts reflect our personality, it is my opinion.
LikeLike
I know this but I don’t want to pay for fonts. Any way to do this?
LikeLike
You can experiment by switching to a new free theme to see if its default fonts are more to your liking.
LikeLike
DEAR Krista ! – and I mean it !!! Your link to Rutter’s compendium is what I have been awaiting my entire blogging life (all five and a bit months of it).
I hereby award you The Most Useful Referral In The World award.
[grin]
Many, many thanks !
LikeLiked by 1 person
Huzzah! With that compliment, today I win at internet.
I think you’ll really enjoy Rutter’s compendium, M.R., — he’s so knowledgeable and expresses himself so well. It’s a resource I’ve shared and turned to many times over the years.
LikeLike
I’m absolutely sure I shall. I’m constantly trying to find fonts that keep me happy (let alone a theme, ditto – ask Rich, the poor bastard !). I was able almost instantly to find a bit of CSS that I utilised – which augurs really well. Thanks again; signing off …
LikeLike
I agree fonts are absolutely critical. Shame we can’t change it for free but I guess WP needs an income from somewhere.
But this is a good post for self-publishing authors too. I’ve read a number of ebooks recently and fonts are even more important on there (as is lay-out etc)
LikeLike
Great point, @Roughseas. I do almost all my reading on a tablet and the right font, along with comfortable line spacing and line length, really do make a difference in the reading experience, and the length of time I’m able to read before fatigue sets in.
LikeLiked by 1 person
I love this. I was briefly in the graphic design department while in college and what little I learned rubbed off on me in terms of typography, formatting, and what is pleasing to the eye. I have a long ways to go with my own blog, but I agree, typography can make or break a look for sure!
LikeLike
As far as I know, the Custom Design fonts don’t allow you to adjust kerning. Custom fonts allow you to choose a font (and variations on a font, such as medium, light, bold or ultra), a size, and a style (bold, italic). Kerning can definitely improve the attractiveness and readability of type. Am I missing a way to use kerning in Custom Fonts?
LikeLike
Hi @John — you can adjust the kerning in Custom Design fonts by adjusting the letter spacing property of the CSS declarations for the HTML elements you’re looking to change. Admittedly, this is a bit more advanced than the scope of the article. (The Custom Design upgrade allows you to write your own CSS to augment your theme’s look.)
LikeLiked by 1 person
Where can I set the body text?
LikeLike
Hi @Madison, go to Appearance > Custom Design > Fonts. On the fonts panel, you can click in the Body Text dropdown to select a new font for body text.
LikeLike
I’m in love with sans serif font types. I find them more readable than the serif ones.
LikeLike
This is a GOOD read everyone! *points to post on your computer screen* I need to make sure my fonts are in synch with my writing too.. Yikes.
LikeLiked by 1 person
Fonts are so important to the success of your blog. I wish I could afford to purchase WP so I can change the fonts. I’m disabled so I can’t purchase it but I can dream!
LikeLike
I keep thinking I don’t like my font. I need to get a better one because people are falling asleep on mine now.
LikeLike
Really useful info……. thanks it has made me think about my blog and how I might change it.
LikeLike
When it came to selecting a new theme for my photography site, I really “shopped” the Theme Showcase hard. I finally settled on Oxygen exactly because it has a lovely selection of changeable fonts built in to the theme that let me change the look and feel of my site. Loving it!
LikeLike
Thanks a lot. I’m just about to start my own blog, and this would absolutely help me to start well. =)
LikeLike
There are so many fun-looking fonts that it’s easy to fall into the trap of sacrificing legibility for whimsy. Thanks for the advice!
LikeLike
Check out my latest post!
LikeLike
thanks for the lesson, now i see how fonts are important in any successful blog!
LikeLike
true very true
LikeLike
I just started here with WP. The first snag I hit was fonts! There is no button for them on my blog composition. Two books were no help. There is something for banners, but that can’t be all. Can anyone tell me how to use fonts at all?
This article was very inspirational. Will have to work on it once I figure out how to use fonts at all.
LikeLike
This is great food for thought! It’ll make me consider my fonts again.
LikeLike
Thank you for this…would truly appreciate any conjecture you can give on my body font. I don’t love it + know there is a better one out there for me. Thanks! http://www.thepopculturerainman.com
LikeLike
This blog is really useful because fonts makes the difference in looks and design of the site. Fonts speak the personality and nature of the site. Headline font is one of the foremost and important for the site.
LikeLike