Sep 24, 2015 / Layout & Design

The Principles of Design: Font Choices

Make educated decisions about typography.

Image by <a href="https://www.flickr.com/photos/tompagenet/8579274101">Tom Page on Flickr</a>

Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. This is part six in my monthly series on “The Principles of Design.” In this series, I share some of the basic tenets of design, and we explore how to apply them to your blog.
Previous installments:

Clarity
Visual Hierarchy
Color Harmony
Design Iteration & Feedback
Accessibility

There are millions of beautiful typefaces out in the world. They’re easy to appreciate but sometimes it can be daunting to actually choose one. On WordPress.com, we’ve recently added a number of new typeface options for everyone, so I thought I’d share a few pieces of advice on selecting fonts for your blog.

Context is key

When choosing a font, the most important thing to consider is the sort of text it’ll be applied to. This will help determine whether you’re looking for a display face or a text face.

Display faces are meant to grab your attention and convey a feeling. They tend to be very stylized and look great when used for short bits of text. On your blog, display faces are generally best suited for headers.

Display

Six display typefaces available on WordPress.com.

Text faces on the other hand, are meant for reading. They’re usually more modest than display faces, and their lines and curves are fine-tuned to lead your eyes through a paragraph. Text faces often work well for both headers and paragraph text.

If you’re using the Customizer on WordPress.com, we take some of the guesswork out of this for you: the display faces we offer are only available for use in your blog headers.

Text

Two text typefaces available on WordPress.com.

Serif vs. sans-serif… does it matter?

The difference between a “font” and a “typeface” is actually pretty simple- a typeface refers to an entire family of fonts (Helvetica, for instance), while a font traditionally refers to a specific size and style variant (like 12pt Helvetica Bold).

When people describe typefaces, they’ll often start by identifying it as either a serif or a sans-serif typeface. You may already be aware of the differences between the two: serif fonts have little shapes hanging off the ends of the letters, while sans-serifs do not.

Serifs

Examples of a sans-serif letter (left) and a serif letter (right).

When it comes to choosing one or the other, the question is largely one of opinion at this point. It’s been argued that serifs helped guide your eyes through words, but in practice, the difference is mostly negligible and depends on the reader. A more useful distinction is that sans-serif fonts tend to feel more modern, and serif fonts tend to feel more traditional. Depending on the feeling you’re trying to evoke on your blog, one style may feel more appropriate than the other.

A part of your story

The key to a great font choice often comes down to a thematic similarity between the context and the typeface. For instance, if your blog is about 18th-century literature, maybe a font with roots in the 18th-century makes sense. If you write about early computing, a fixed-width font might invoke the perfect amount of nostalgia. Sometimes the link will be clear, but other times it may be purely emotional. Some typefaces are bouncy and fun, while others are rigid and serious. Think about the tone and voice of your blog, and look through a bunch of fonts for one that appears to be speaking a similar language.

SeriousFun

The best thing you can do is try things out! When I start a brand new project, I’ll regularly try anywhere from 10-50 different typefaces before I land on the right one. On WordPress.com, our Customizer is a great way to test all the different fonts available and preview the changes directly on your blog.

Iteration and feedback is essential to the design process, so don’t be afraid to experiment! As always, the Community Pool is a great place to ask for feedback from other Bloggers.

Show Comments

35 Comments

Comments are closed.

Close Comments

Comments

  1. As an apprentice hot metal compositor, a few years ago now, I worked with these on a daily basis, the fond memories those wooden blocks bring back, wonderful, incidentally, the height of them should be, 23.317mm or -918 inches, certain things you never forget

    Liked by 2 people

  2. I have not worked with fonts from a design viewpoint but I am very interested in experimenting with them on my blog until I find a proper balance. Right now I am using Merriweather and I feel it looks good.

    I have shared this post on my blog, FB and twitter and commented:

    This is a wonderful article! I have always loved to tweak with fonts. Though I am happy with my current fonts I would like to learn more about finding a great balance from the design viewpoint. I hope you will enjoy reading this article too 🙂
    Anand 🙂

    Liked by 2 people

  7. This is a great blog. Full of really good information and you describe it so well that I understand all of the technical terms better because of your concise explanations. I will be checking out the rest of the articles listed in the top portion of your article. Thanks again!

    Liked by 3 people

  10. Love love love the fact that I have some fonts to choose from. I’m definitely a font fan and love the style choices. Currently Open Sans is a favorite of mine. Thanks for the freebie!

    Liked by 4 people

  14. My theme, Book Lite, makes the title of posts and pages capitals automatically. I chose the font Fondamento for them, to be something both serious and fun, something rich and strange. Little bits of Fondamento, for example “please comment” or the occasional heading, spice up the posts. And Quattrocento sans is both modern and timeless for the text, though I don’t like its !s. Come and have a look.

    Liked by 4 people

  15. As a small note since we might have many people who are no longer much exposed to handwritten calligraphy nowadays: fonts with serifs, if you look at old manuscripts in museums, the scribes wrote those wonderful scripts in calligraphy with “feet” or serifs at the end of each stroke.

    I personally tend to choose a font without feet, sans-serifs for easier reading…especially when people nowadays are reading blogs on their tiny iPhone screens.

    I took several courses in steel nib ink-dipped calligraphy. (Western)

    Liked by 3 people

  26. Just went through this the other day when I discovered the new font options available. Took a while to find two fonts that both married and were site-appropriate, but I got there. Very happy with them!

    Liked by 3 people