To Serif or (Not to) Sans Serif? 🔮
- 4 minutes
- April 8, 2019
Whenever I am tired of code I look up to design. Art is pleasing to the eyes, and it helps me unwind from the stressful days of development.
Last week, I decided to dive into typography and typesetting to understand what kind of typefaces look good on books. I mean dead-tree books.
My goal was to explore the possibility of using
serif typefaces on Superbooks that we publish online using the metaphor of a real book and determine which default types would work best on our books.
The outcome of this research is quite interesting and in the post below I explain the steps and reasoning I theorized from this experiment.
To serif or not to (sans) serif, that is the question.
When it comes to web typography, the battle has long been settled, that if you are designing for the web, one must use sans-serif typography unless a God-level designer comes and says otherwise. Period.
But if you were designing for print, then there is a broader range of typefaces that one could use, including the serif-type, known to 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?
Why do sans serif typefaces work better on web but not the serif ones?
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.
Let’s take a look at the anatomy of a typeface first:
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.
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.
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. 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.