Introducing ReadUse: A CSS Framework for Smooth Reading Flow
If you write on the web, you'll want to format your well-writen content the best way possible.
I've been working on improving the reading flow by consolidating best practices from sites like Medium, Dribbble, and many more.
The goal is to minimize ragged edges and ensure the smooth reading flow of blog posts, articles, and web documents.
On Medium, blockquotes are aligned with paragraphs to ease eye movements. But those of lists aren't. Funny enough, it's the other way around on Dribbble – lists are aligned but not blockquotes.
Below is what it'll look like if both are aligned – Smooth flow!
As nice that is, if you implement it, there'll be more bugs than what partial implementations these sites already have.
Why is that?
The short answer is – the way we currently style content blocks with CSS needs improvement or a change at some point.
In fact, there's a reason why you may have noticed some sites with little to no margin separating paragraphs. Jessica Hische and Dan Mall used none while Zell Liew reduced his. These are attempts to make content more readable on the web.
If you feel like, “these are odd, things are already fine”. That's okay, it has been ingrained in us. Matej Latin wrote on the disruption of body text:
We, as a web design community, have been making mistakes like this for so long that these things need to be re-hardwired
And if you go down memory lane, in 2005, Mark Boulton lamented about lack of hanging punctuation on the web in his five simple steps to better typography. He says:
...An important aspect of typesetting just swept under the carpet like that. It's a great shame.
So, can we have these best practices in a CSS Framework that we can progressively integrate on our
And wouldn't break no matter how creative a writer decides to format a document?
Yes, I'll be releasing this as an Open Source Stylesheet early next year.
And if you're curious how we end up styling things as we do now, I shared my findings in this letter to css stylesheets of the web.