To Serif or Not To (Sans) Serif?

Usually when I'm tired of coding I look up to design.

Art is pleasing to the eyes and it helps me take my mind off development whenever I can. This time around I decided to dive into typography to understand what kind of typefaces look good on the books that we publish on Bubblin, and why?

To serif or not to (sans) serif, that is the question.

When it comes to web typography, this is a settled battle more or less. That if you're designing for web use sans serif typography but if you are designing for print go for serif typefaces that compel authority over minimalism. That adage about what works on the web and what doesn't, and vice-versa.

But the question is, again, why?

1. Why do sans serif typefaces work better on web but not the serif ones?

2. Why do the flourishes of serif fonts compel class and authority on print books?

Goes without saying here that following the design guidelines (such as to use sans serif typefaces on the web) is critical for inclusivity.

Always design for the form and function both.

Through this post we will look at some of the reasons why the guidelines in the first place and how we can typeset our website correctly for accessibility.

"The best font choices are those where readers notice the message."

Let's take a look at the anatomy of a typeface first:

[ Image credit: Designer Insights ]

Serifs are those decorative flourishes at the end of the strokes. As you can see from the anatomy above, `serif` typefaces look fancier and well-decorated, but their flourishes work only at a sufficiently large size. When the typeface is shrunk below a certain threshold, these flourishes turn into noise and lower overall legibility—meaning, they do not help our ability to recognize individual letters or words at speed, thus affecting visual accessibility. > Serifs are used to guide the horizontal “flow” of the eyes; The lack of serifs is said to contribute to a vertical stress in sans serifs, which is supposed to compete with the horizontal flow of reading. – [De Lange et al., 1993](http://cajun.cs.nott.ac.uk/compsci/epo/papers/volume6/issue3/rudi.pdf). Before we take up what _"flow" of the eyes_ is here and how _vertical stress_ helps with readability on web, let's step away from typography for a moment and take a look at animation first. --- Yes, a typical animation film from Disney or Pixar, for example. Animation is storytelling as a function of time. In other words time is the glue between storytelling and the motion of story i.e. flow. You may be surprised that this motion or flow of story can be depicted on a single shot of frame as well. Look at Lightning McQueen below, for example: It's a still picture but there is motion in it too.

[ Image credit: Cars Movie @Pixar ]

Notice the blurred alphabets 'E' and 'D' on the side of the race track that suggest McQueen is speeding through the frame. This blurring is called motion blur or pan blur depending on how the camera or the subject moved and left behind a trail as the frame was being captured. Those hazy attributes stretching E & D alphabets represent the flow of time, they hint us about movement, its direction and speed.

Below is another picture of Tibetan wild asses running amok in Ladakh.

[ Image credit: Satyendra Sharma]

On this picture you can see that the animals are running forward but their heads are bobbing up and down too. Even though the picture is hazy, and the attributes of the animals aren't very clear, but the motion is evident from a single shot due to saccadic perception.

The serifs on a typeface cue horizontal motion similarly.

They guide the horizontal “flow” of the eyes as suggested by De Lange in their study of typographical accessibility. This makes perfect sense on print because we turn the pages from left to right horizontally, and the typefaces being floored along a track motions us to move forward in the direction of flow of story—ala, line-tracking.

On web however, the story is laid out vertically and the flow is scrolled downwards. Using serif fonts with horizontal marks therefore clashes with the direction of flow on a scroll. This is why typefaces that look good and feel right on web are taller and san-serif i.e. ones that present higher vertical stress than horizontal.

That's all for a gyan post this week. I had fun analyzing typography closely. Did you?

Written by: Marvin Danig, CEO of Bubblin Superbooks. Follow me on Bubblin!