Styling web prose: Minimum viable style

Welcome to part 1 of a series on styling prose on the web. "Minimum viable style" is a play on the phrase, "minimum viable product", which is sometimes used by technology people. (Confusingly, it has the same abbreviation as "most valuable player", but I think we all know who the real MVP is.)

By "minimum viable style", I mean the bare mimumum style—specifically, CSS style properties—necessary to make text readable. Everything beyond this is just cherries on top. If you like cherries, though, you can check out part 2 of this series where I add a tad more style.

TLDR: Styling prose on the web doesn't have to be complicated. In fact, you can have easily readable typography just by setting six CSS properties.

Feel free to adjust them yourself (or by clicking the gear icon above) to find a style that suits you.

Now let's dive in.

There's oceans of content on the web, much of which is like what you're reading now: text.

To me, how text is styled on the web is analogous to the clarity of the water. If it's too murky, you can't see much. But if it's perfectly clear, you won't even notice it. You'll be too busy soaking in all the amazing and weird stuff under the sea.

This is how I approach styling text on the web: styles should clarify and illuminate content, and when done right, should hardly be noticed.

Plain text

At first glance, making text readable shouldn't be too hard. It's just text. There aren't a whole lot of variables to work with...well besides the font-family, font-size, line-height, alignment, margin, font-weight, font-color, background-color, text-decoration. Okay, maybe that is a lot.

But you don't need to set all of those variables everywhere all the time. You just need to set a few of them once, in one place.

Simply add a CSS file (which stands for Cascading Style Sheets, the primary way to style content on the web) to your website consisting of these few, basic styles and you've got yourself readable prose. How do I know that it's readable? Because these are the styles used for this very article and you've been reading it this far without issue...right? 

body {
      max-width: 60ch;
      padding: 1rem 1rem;
      margin: auto;
      font-size: 1.25rem;
      line-height: 1.6;
      font-family: sans-serif;
    }

I adapted this ruleset from this post by swyx. Let's break it down line by line.

The selector: body

First is the selector.

The selector defines the HTML elements that a ruleset applies to. I chose the body element since it is a body of text after all (or a body of water if we're still swimming in the ocean metaphor). Also, text content is almost always within the body tag of the HTML.

Now let's get into the six properties of the ruleset.

Max width max-width: 60ch

First we have the max-width property, which defines the maximum width the text can be (so it only applies when the window width is greater than this value). According to this research by the Baymard Institute, the optimal "readable" range is measured in characters and should be about 50-75 characters wide.

Conveniently, CSS let's you express width in character units using the ch unit. (Meaning you don't have to worry about re-adjusting width whenever you adjust font-size). Currently, I have it set to 60ch, comfortably within the "readable" range.

Padding padding: 1rem 1rem

Next is padding (not to be confused with margin). The first value represents top/bottom and the second left/right padding.

A little top/bottom padding gives you some breathing room at the top and bottom of the page.

A small amount of left/right padding keeps the text from going to the edge—which may put readers on edge—on devices smaller than the max-width.

The padding is set using rem which stands for "root element units". These are like pixel units, except that they are relative. This means when zoomed in or out, they increase or decrease in size proportionally, as opposed to pixel units which are still a pixel no matter how much you zoom. em are similar to rem but relative to their parent instead of the :root element. This blog post does a great deep dive into the nuances of pixels vs. rem/em if you're interested.

Margin margin: auto

Next we have margin which is set to auto. This makes the text center itself automatically when the window width is greater than the max-width. That's where you want your text to be, the center of attention...screen, I mean the screen.

Font size font-size: 1.25rem

The font-size is set to 1.25rem. This can be set by feel, but the main text size should generally be between 1-1.5rem (14-24px) according to this article I found.

Line height line-height: 1.6

The line-height should be at least ~1.5 for visual clarity

. It's left unitless on purpose so it's relative to the font-size.

Font family font-family: sans-serif

Finally, there are a lot of fonts to choose from but they largely boil down to two categories: whether or not they have the little "tails" and "feet" on the letters. serif means they do have them, and sans-serif means they don't.

This is up to personal taste. Sans-serif can appear cleaner and more modern, while serif can give a more sophisticated and traditional look (a lot of traditional printed works, like newspapers and books, are in a serif font). Right now I'm team sans-serif.

Closing thoughts

That's all it takes for readable text on the web! You don't have to agree with all my opinions—everyone should try on their own style!—but hopefully this shows that styling text doesn't have to be elaborate or complicated.

To me, the best kind of style is nearly invisible. It's the content itself you want the reader thinking about.

Okay, you caught me red-handed👋🍒. There a few more styles present in this text than I described above. If you're interested in more style, then read part 2 of this series.