Web Design Debate: Do I Really Need to Use Sans Serif Fonts?

There’s long been a theory that serif typefaces are for printed projects and sans serifs are for website design. But with more high definition screens and great type options available, that rule just isn’t so much a rule anymore.

Whether you prefer serifs or sans serifs (or a combination of the two), the main objectives when choosing typefaces for digital design projects should be readability and legibility. Simple, you need to pick fonts that are sharp and easy to read on the screen. Part of this is related to usage, such as size and placement of text, and then to the style of typeface you choose.

The Case for Sans Serif

There are probably a lot of you who are already unhappy with the premise here. You are quite certain that sans serifs are the best for website design. And that may have been true a few years ago.

There are still a few times and places where sans serifs are generally preferred:

  • For low-resolution displays
  • For new readers, such as children
  • With lots of color or in low-contrast patterns
  • Text that is exceptionally small or narrow

Enter HD Displays

web fonts

One of the biggest myth busters when it comes to “you must use sans serif typefaces for website design” is the emergence of high definition screens. More dots per screen inch correlates to richer detail for everything, including typography.

Think of it this way. Books on many e-readers and tablets are set in serif typefaces. And they are perfectly easy to understand. This is because the screen resolution is sharp enough to handle the lines and strokes in the typeface.

Even as early as 2012, Jakob Nielsen of the Nielsen Norman Group, which focuses on user experience, research and training, noted that better screens are changing the landscape of typography guidelines for website design. Here is the conclusion from that study:

“The old usability guideline for online typography was simple: stick to sans-serif typefaces. Because computer screens were too lousy to render serifs properly, attempting serif type at body-text sizes resulted in blurry letter shapes. …

“Unfortunately, the new guideline is not as clear-cut as the old one. Legibility research is inconclusive as to whether serif fonts are truly better than sans serif.

“Almost all mainstream printed newspapers, magazines, and books use serif type, and thus people are more accustomed to reading long texts in this style. However, given the research data, the difference in reading speed between serif and sans serif is apparently quite small. Thus, there’s no strong usability guideline in favor of using one or the other, so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style.”

But we are really just now starting to see more designers embrace this idea.

Readability

web fonts

Readability is the ability to be read easily. There are a number of factors that contribute to readability including how interesting (or not) the content is and how it actually looks when pulled together as a block of text. The latter is what we really care about when it comes to typography.

Generally, you can eyeball it when it comes to aesthetics and readability. Can you tell what the website is trying to communicate with just a glance? If so, it’s readable.

There are a number of readability tools that you can use to help determine how readable your text is. While there is no exact science behind readability, these tools are a good baseline to help you get started.

Legibility

web fonts

Legibility refers to the quality of lettering and if it is clear and distinct enough to be read. Good typography should be easy to read without effort. Typeface selection directly relates to legibility. (Think of handwriting and how it is called legible or not; it’s the exact same thing with digital lettering.)

When it comes to legibility, each letter needs to be clearly distinguishable from other letters. Contributing factors include everything from the actual shape of lettering thick versus thin, tall versus short, spacing and the use of serifs or other ornamentation.

As a general rule the most legible typefaces have more round, distinct characters; larger x-heights; adequate and consistent letter spacing; and a simple nature.

Typeface Selection Tips

web fonts

web fonts

Are you sold on trying a sans serif typeface for your next website design project yet? Here are a few tips for selecting the best sans serif option.

  • Select distinct letterforms: Step back from the monitor and look at the typeface you have selected. Can you make out individual letters with ease? Choosing a typeface with distinct letterforms makes it easier to read on any screen size, especially small or very large screens.
  • Opt for middle weights: Typefaces with regular stroke widths. Typefaces that are too thick or too thin – remember the controversy with Apple’s iOS 7? – can be tough to read. For body text, stay somewhere in the middle with a medium and universal stroke weight. Alternating thick and thin strokes can also cause some issues.
  • Look for quality typefaces: ownloading any old font for the web, might not result in the sharpness you need for projects. Stick to a typeface from a reputable provider. And look at it closely on the screen. Can you blow it up to 200 or 500 times the actual size and still get a good render? With tools such as Adobe Typekit and Google Fonts, there are a large number of typefaces available for the web that will look great and help create a distinct feel for your project. While you can’t always match typefaces exactly for printed and digital projects, look for style that have the same look and feel to emphasize consistency in your branding.
  • Ornate fonts should be used sparingly: Ornate typefaces can be a great addition to projects, but use them intentionally and with purpose. (They often lack some readability or legibility.)
  • Look for distinct type options: Choose a typeface that is not so boring. Choose a typeface from a strong family with plenty of weights and options such as bold, italic or condensed options.
  • Set the right mood: Regardless of the style of typeface you choose, make sure it matches the mood of your project. There are plenty of factors. Learn more about them in a previous Design Shack article.
  • Mix and match: Use a combination of serif and sans serif typefaces in the same design, with one style for the header and the other for the body. But experiment with doing the opposite of what you might expect. Use the sans serif for bigger text such as headlines, and use the serif for body text.

Conclusion

How do you feel about using sans serif typefaces on the web? Are you ready to give it a try? The examples throughout this article show that great web typography does not have to be sans serif.

Make sure to click the examples and links to really get a good feel for how designers are using serif typefaces in a variety of ways and with great success.