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