by
ReadUse
on

To stylesheets ofWorld Wide Web
on the Internet

Dear Stylesheets,

On a Smoother reading flow for web contents

Let's pause for a moment – to rethink how we style contents of a blog post, article, or document. Our goal is to improve the reading flow.

Consider, for example, an inline list turned vertical list to aid clarity. We adopt indentation of the ancestor list block as shown at the left part of the image below.

At the left part is a list block indented away from its introductory phrase. At the right is a list block that
      aligns with its introductory phrase. Thus, creating a smooth reading
      flow.

Yet, as we've seen on the right part of the image, a smooth edge creates a better sense of continuity, and togetherness; avoids eye-jumps; and aligns content of list items with that of the introductory phrase. Like we (learned to) write.

Moreover, this design style complements human perception – satisfying Gestalt's Laws of Good Continuity, Common Fate, and Past Experience.

So, why have we accommodated unnecessary eye-jumps? Why don't we use hanging punctuations to minimize ragged edges?

Here's a backstory from Mark Boulton in 2005:

The problem was these bodies of text work within a box. Every character in this box had to be within the box, Hanging Punctuation requires characters to be out of the box. This was a problem for the software [desktop publishing] and as a result was ignored.

You see – the workaround of indenting the block became the norm – and that norm was ported to the web by Browser Vendors. This became a standard for all stylesheets.

Then, this happened:

Things are now getting better with Adobe InDesign offering support for Hanging Punctuation.

But, Browser Vendors can't follow suit. If they do, they'd break a lot of websites as all stylesheets are based on the browser's default. The same may be said of existing CSS frameworks.

Interestingly, Medium.com is one of few sites that implements hanging punctuations, partially.

Comparing reading flow of Existing CSS Frameworks, Medium.com's StyleSheet, and ReadUse. Smoothness of these
      stylesheet occurs in that order.

As with all things, partial implementation has its shortcomings. Same as going full-on hanging punctuations – and indenting only where necessary.

Yet, that shouldn't deter us from designing for users. Our goal is to design contents that maintain a balance between its contrast and harmony. For anyway the writer chooses to use and format their document.

Going forward, we need a clean slate to build well-typesetted content styles for the web available to everyone. For better user experience, and hospitable web.

At your service,
ReadUse by Toheeb Ogunbiyi