Don’t Shoot the Serif

There are so many different typefaces to choose from, so why do we keep hearing about two troublemakers, serif and sans-serif? Why can’t they get along, and why should we care? We need to care because we spend so much time crafting quality content. The font we choose and how it’s laid out determines how closely our content is read, or even if it’s read at all.

So what’s the difference?

You know Georgia and Verdana, two of the most common fonts available. One looks old-school and the other makes you feel like you’re strolling the aisles of IKEA. Why is that?

One major difference is those nifty little things that stick out on the edge of letters referred to as “serifs.” They’ve been around for a long time, arguably to clean up the edges of Roman stone carver’s chisel work.

The sans-serif font Caslon was introduced in 1816 and quickly grew in popularity for its “modern” appearance. From there we have staples such as Futura and Helvetica for use in clean, modern designs.

So when you go to write something, how do you choose? Most importantly, keep your audience in mind, the kind of content they are reading and where it will be read.

If your site is responsive, where it will be read it is already accounted for. Otherwise, the challenge is choosing a size that is legible on a mobile device without having to pinch and zoom. This is incredibly frustrating for more than a paragraph and many users will refuse to read the post at all. However, a size that is legible on a mobile device could be too large on a desktop and interrupt the flow of reading. Readers will scan down the left side of the column and start to skip over those carefully-chosen words.

The kind of content you provide determines how it’s read. On a home page, viewers are scanning casually yet purposefully for particular content depending on what led them to your page. If they don’t find what they’re looking for, the viewer will move on.

For longer content such as a blog post, make it easier for your reader to engage. People are becoming more and more comfortable with reading long form content on their phones, just so long as the piece provides valuable information. Line length is essential to longer bodies of text regardless of the platform. According to James Craig in Designing with Type “Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.…Too short a line breaks up words or phrases that are generally read as a unit.” Choosing a line length somewhere between 45-75 characters, including spaces and punctuation will make your content easier to read and help your viewer stick it out through the whole piece.

But don’t fret, serifs do have a place in the digital landscape. With constantly evolving technology, HD displays are becoming the norm. And with such high quality, we’re able to use fonts with more detail in more scale and color. Tools such as Adobe Typekit and Google Fonts also broaden the web safe palette. Our most favorite places for serif fonts still remain big dramatic headlines creating contrast for better readability across the page. Fonts with ears & tails (fancy terminology for certain serif letter parts) can add personality and set the tone for the rest of the website as well as appeal to the site’s main target audience.

But back to the main quandary: who’s better, serif or younger sibling sans-serif? Like all designs, it depends where you put them. Serif is great for print and directs the reader’s eye from one line to the next. If you’re putting something on the Internet, sans-serif is more legible for body copy. Though these two don’t always have to be at odds; using one consistently for headers and the other for body copy is a fantastic design trick to establish hierarchy and clarity. Just don’t leave them in the same room for too long.

Roundpeg is an Indianapolis graphic design firm.