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 engineering sometimes. 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 the 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 the 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 your app to remain inclusive.

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.

Before we take up what "flow" of the eyes means here and how vertical stress helps with readability on the 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 motion 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:

[ Image credit: Cars Movie @Pixar ]

It's a still picture but it has motion in it too.

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, their motion can still be inferred from a single shot due to saccadic perception. This quality of our brain to associate blurred vision with motion on a timeline can be associated to our evolutionary animal instincts for safety from moving objects or even predators.  

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. Serifs make a 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 that direction of flow—ala, horizontal line-tracking.

On the web however, the story flows vertically. Since the story is scrolled downwards, serif fonts with horizontal cues clash with the direction of flow—and doesn't work. This is why typefaces that look good and feel right on web are usually taller and san-serif i.e. ones that push higher vertical stress than along horizontal lines.

That's all for a gyan post this week.

I had fun analyzing typography this way. Did you?

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