Menu

Your Fonts are Talking — What are they Saying?

Recently, we talked about how your blog’s background is an important design choice that affects how visitors perceive your site.…

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:

Chunk matches its moniker as a heavyweight typeface.

Chunk matches its moniker as a heavyweight typeface.

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.

Herb Condensed heavy weight, combined with tight kerning, feels substantial.

Herb Condensed’s heavy weight, combined with tight kerning, feels substantial.

As a stark contrast, Coquette is a script-style font with a much lighter, less serious feel:

Coquette's lighter touch lends a feminine feel.

Coquette’s lighter weight and rounded lines lend a feminine touch.

Finally, doesn’t FF Market feel modern and playful, reminiscent of handwriting?

FF Market's curvy lines are fun, informal, and playful.

FF Market’s curvy lines are fun, informal, and playful.

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.

Open Sans has an airy, modern feel and offers great readability.

Open Sans has an airy, modern feel and offers great readability.

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.

The serif type Chaparral Pro conveys a more formal feel.

The serif type Chaparral Pro conveys a more formal feel.

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.

Adelle and Open Sans pair well -- they offer a nice pleasing type hierarchy that's easy to read.

Adelle and Open Sans pair well — they offer a nice pleasing type hierarchy that’s easy to read.

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.

Show Comments

44 Comments

Comments are closed.

Close Comments

Comments

  1. 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!

    Like

    1. 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.

      Like

      1. 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.

        Like

      1. 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. :-)

        Like

  2. 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.

    Like

  3. 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 !

    Liked by 1 person

    1. 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.

      Like

      1. 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 …

        Like

  4. 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)

    Like

    1. 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.

      Liked by 1 person

  5. 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!

    Like

  6. 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?

    Like

    1. 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.)

      Like

    1. 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.

      Like

  7. 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!

    Like

  8. 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.

    Like