Minimum Viable CSS

As an S6 enjoyer, I often (a word which here means occasionally) find myself looking at its documentation, mostly because I forget man pages are a thing that exists.

If you clicked that link, you might've noticed the fact that page looks kinda terrible. Or at least as terrible as your browser's default stylesheet looks like, which is very. No margins, small text as wide as your screen will allow, that'll flashbang you at night.

The whole site is like that. Plain markup, with no styles whatsover. And given I'm in the middle of making a website right now, it got me wondering what would be the bare minimum necessary CSS to make a web page readable. No IDs, no classes, just as the 90's intended.

And please don't hate me! I understand wanting to go styleless.

But let's start with the font then.

html {
  font-size: calc(1em + 0.3vw);
  font-family: Charter, "Bitstream Charter", Charis, "Sitka Text",
    Cambria, serif;
  line-height: 1.5;
}

The font-size line might feel kinda cryptic, but it just makes it so the text changes size along with the screen width. It's a trick that I picked from Every Layout, a pretty neat book that you'd think contains some life-changing ancient alien wisdom, from the way some people talk about it.

Next, my choice of font is Charter, a delightful transitional typeface, which I think which I think fits with the default spirit of the web, in all of its serifed glory, without contributing to the repeated (ab)use of Times New Roman.

But now, wanna see something cool?

html {
  color-scheme: light dark;
}

That's literally everything you need to support dark mode these days. Modern web browsers all include dark alternatives for the default style sheet, so all you have to do is enable it.

And moving down the tag hierarchy, I gotta do something about that line length.

body {
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 60ch;
  padding: 1.5em;
}

Here I use the usual auto margins to center the text, add a bit of padding to make up for the lost default margins, and set its width to 60ch. If that's a unit you haven't seen before, one ch is equivalent to the width of the 0 character in the current font, so it serves as a rough proxy for the average length of a line.

Now, for the headings, all I'm gonna do is tone them down a little.

h1 {
  font-size: calc(1em * pow(1.2, 3));
}

h2 {
  font-size: calc(1em * pow(1.2, 2));
}

h3 {
  font-size: calc(1em * 1.2);
}

h4,
h5,
h6 {
  font-size: 1em;
}

Not sure why, but headings on the web are massive by default. I mean, does h1 really need to be twice as big as the body text? And not only that, but h5 and h6 are smaller than the base font size, for some unfathomable reason.

So, those tiny guys finally get to be the same size as everything else, and for the rest, I picked a size ratio of 1.2, which roughly mimics LaTeX's heading sizes. Because if I was gonna let someone else pick the size of my headings, it'd be Donald Knuth… or would it be Lamport?

On a similar note, I went for something that many web dev creatures might consider a pretty bold decision when it comes to paragraphs (and lists, I guess).

p,
ol,
ul {
  hyphens: auto;
  text-align: justify;
}

This is probably the most subjective part of this style sheet, but sorry, I just enjoy justified text. Some would say that you should never do anything other but left-aligning on the Internet, but I spent too many years of my life as an academic, and old habits die hard. I like my citations abundant, my figures numbered, and my text justified. Simple as.

a {
  text-decoration: none;
}

Links are simple, off with their underlines. It's just visual noise, and they're already a different colour from the body text.

And finally, something that might not be necessary for every site, but this is the documentation for a Unix tool, so can't really skip on styling the code examples.

code,
pre,
tt {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
  font-size: 90%;
}

pre code {
  white-space: pre-wrap;
}

This is mostly just for the font. As with the venerable Times New Roman, most current systems include better options than Courier. Oh, and I make code blocks wrap, so they don't go running off the sides of the screen.

All in all, the complete style sheet should look something like this:

html {
  font-size: calc(1em + 0.3vw);
  font-family: Charter, "Bitstream Charter", Charis, "Sitka Text",
    Cambria, serif;
  line-height: 1.5;
  color-scheme: light dark;
}

body {
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 60ch;
  padding: 1.5em;
}

h1 {
  font-size: calc(1em * pow(1.2, 3));
}

h2 {
  font-size: calc(1em * pow(1.2, 2));
}

h3 {
  font-size: calc(1em * 1.2);
}

h4,
h5,
h6 {
  font-size: 1em;
}

p,
ol,
ul {
  hyphens: auto;
  text-align: justify;
}

a {
  text-decoration: none;
}

code,
pre,
tt {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace;
  font-size: 90%;
}

pre code {
  white-space: pre-wrap;
}

Don't know you, but less that 50 lines of CSS to make even the plainest website look like a publishing-ready paper feels worth it to me.