To Serif or Not To (Sans) Serif? 🔮

•


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 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 design guidelines and accessibility principles is both important and critical for your app to remain inclusive. Always design for the form and function both. Through this post we look at some of the reasons why we have these guidelines in the first place and how we can typeset correctly according to the medium of our writings.



❦

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




Serifs are those decorative flourishes at the end of the strokes—see the anatomy below.




As you can tell from above, the serif typefaces look more fancy and decorated, but the flourishes work only at a sufficiently large size. When the same typeface is shrunk below a certain threshold, these flourishes turn into noise somewhat and are no longer legible—or at least do not help with our ability to recognise individual letters or words quickly.

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.

Before we take up what flow is here and how vertical stress helps with readability on web, let’s take a step back and look at animation first. Yes, a typical cartoon animation from Disney or Pixar for example.

Animation is storytelling as a function of time.

Meaning, time is the glue between storytelling and the motion of story i.e. flow. You may be surprised that this glue or motion or flow is achievable on a single still picture as well. Take a look at Lightning McQueen, example:


[ Image credit: Cars Movie @Pixar ]


Notice the alphabets ‘E’ and ‘D’ on the side of the race track that show McQueen is speeding through the frame.

This is called motion blur or pan blur depending on how the camera or the subject moves leaving a trail behind as the frame is being captured. The hazy attributes depict flow of time on a still. They hint us about some kind of movement that is taking place, its direction and even speed. Below is another picture of wildlife running amock in Ladakh by my friend Satie:


[ Image credit: Satyendra Sharma]


On this picture you can tell that the Tibetan wild asses are running forward but their heads are bobbing up and down too. The attributes of the animals isn’t very clear but their 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 decribed by De Lange in his study of typographical accessibility. Whereas on web, since the story is lain vertically (told with scrolling), the serif fonts with horizontal markings clash with the direction of flow of the story. Therefore, generally on web the typefaces that look good are taller and san-serif i.e. with higher vertical stress.

On the contrary, on print and in particular with codex style books, it is usually the serif fonts that fair better. The flow of the story is horizontal, and towards the right, and the typefaces being floored along a track (line-tracking) motions us forward in the direction of flow of story correctly. It is as simple as that.

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. Track me on Bubblin!

P.S.: It’s likely that you are reading this post on your desktop. Great! But I recommend the iPad for our books, for they use serif typography on web for exactly the same reasons as described on this post.