I came across a blog with 147 lines of CSS today, including a couple of font-face declarations and a handful of custom properties. It looked pretty good and was perfectly readable, which is a testament to both the author’s skill and judgement, the expressiveness of CSS and the robustness of browser defaults.

This sort of thing always gets me thinking about the minimum CSS required to publish a blog. You might start by arguing the answer to that question is none at all, and, strictly speaking, that’s true. Browsers style markup without you lifting a finger by putting margins between things, bolding, italicising, colouring links and lots of other things. You can even add a single line to your website’s head and get light and dark modes thrown in.

If you take that approach you will hit on one problem, especially on a mobile. Any wide image will extend beyond the edge of the screen. You’ll still be able to see the whole image by scrolling horizontally, but that’s a pretty rubbish experience for your readers. So the bare minimum CSS is this:

img {
max-inline-size: 100% !important;
block-size: auto !important;
}

Four lines. Sort of. If you want this to work with browsers that don’t understand logical properties like block-size, you’ll need to add a few more lines to set maximum width and height, check whether the browser supports logical properties with supports and, if it does, unset the maximum width and height and finally add the above lines.

It can get verbose quite quickly.

Still, that’s cool — a few lines of CSS and you’ve got a responsive website that doesn’t bork on a mobile. Except it’s not particularly readable on a laptop, even less so on a desktop monitor, what with everything extending across the whole of the screen. A comfortable line length (or measure) is — well, that’s a matter of art and science, conjecture, and dependent on a bunch of contextual factors, such as the language we’re writing in, font metrics and the nature of the text itself — but it’s definitely less than the width of your desktop monitor.

Which means you should probably add some CSS that stops lines getting too long:

body {
max-inline-size: 60ch;
}

But as we know, not every browser will understand max-inline-size (or ch for that matter), so you might want to do the max-width and supports dance again. Or, like me, you might reach a compromise and set a few basic readability rules that work on pretty much any browser on earth, and accept that those readers using older or more obscure browsers miss out on goodies such as logical properties and the lh unit. If you’re feeling brave you’ll describe this as progressive enhancement.

And really, why stop at the text’s width if you’re looking to make your text as readable as possible? Measure is just one of several typographic elements you can tweak. For example, most browsers set line height (or leading) to 1.2 times the font size. That’s OK for headings and titles, but probably too narrow for long runs of prose. The ideal leading? It depends on… etc. etc., but probably sits somewhere between 1.35 and 1.6 times the font size.

Add margins, padding and proximity to these bare-ish necessities. A border here and there to separate page blocks. You’ll probably need more than 147 lines, and the weird thing is you may find you reach a sort of CSS critical mass where your blog suddenly looks designed. 215 lines at this precise moment in time, looking at this text. Expressive, combinational magic, CSS.