swyx

Posted on Oct 16, 2021 • Edited on Oct 25, 2021 • Originally published at swyx.io

100 Bytes of CSS to look great everywhere

#css

TL;DR

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

I previously tweeted out an old version of this and accidentally got a line by line code review from 100k people:

This article is the most up to date version with everyone's feedback.

Context

Dan Luu always writes fascinating posts, but the design makes it very painful to read:

A couple years ago, this post on HN was fairly popular, and I saved it on my spark-joy repo, which is a swipe file of design tips I've collected over the past few years.

However, I noticed that the original website link is dead. So I thought I would refresh it with what I have now implemented for Dan's site:

100 bytes of css to look great nearly everywhere

This should be simple drop-in css to look good on most displays:

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

Let's break this down. I've adapted the original text with my own commentary.

max-width: 70ch: the "readable range" is usually 60-80 character widths, and CSS lets you express that directly with the ch unit. I blogged more on line lengths last year.
padding: 3em 1em: If the display's width goes under the max-width set above, then this padding prevents edge-to-edge text on mobile. We use 3em to provide top/bottom whitespace.
margin: auto: This is really all that is needed to center the page - applied on html, because Dan's site doesnt have a semantic <main> tag and <html> is more likely to exist in most sites (no judgment pls, i've heard enough semantic HTML preaching). That the top tag centers itself relative to nothing is unintuitive, but thats how browsers do.
line-height: 1.75: Spacing between the lines to help increase visual clarity. Always leave line height unitless because reasons.
font-size: 1.5em: I've noticed that recent design trends and screen sizes have tended toward bigger font sizes. Or maybe I'm getting old. Prefer em or rem over px if you want to let users scale it.

Tushar points out that you can use :root instead of <html> to guarantee that there is some selector present, but its a touch too fancy for me and uses an extra character :)

Optional 100 more bytes

If you can spare a few extra bytes of CSS, I'd also recommend margins for headers, paragraphs, and lists, and softening body text:

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}

Applying Styles on Pages You Don't Control

You can auto apply these styles on to pages with https://github.com/ankit/stylebot. I can't vouch for their security as I only just started using it.
WaterCSS is a bookmarklet or extension or script with some nice presets: https://watercss.kognise.dev/
SakuraCSS is a bookmarklet that does the same https://oxal.org/projects/sakura/bookmark/

Top comments (14)

BrandonKMLee • Oct 17 '21

A major criticism of the "limited width" design (Medium, Substack etc.) are that some people are annoyed that it is a waste of space. A more innovative idea would be to have two parallel columns that allows one to waste less space whilst scrolling, similar to old newspapers. However it seemed that nobody has executed the ideas yet.

swyx • Oct 17 '21

if you can find simple pure css solutions for two-column layouts that dont suck i'd be happy to help you publicize it

trailrun80 • Oct 20 '21 • Edited

Would this be good enough for you?
developer.mozilla.org/en-US/docs/W...

And, if you require more control over layout, Grid is always an option

swyx • Dec 21 '21

yeah i think that looks good statically but is not a good experience for arbitrarily long documents

GrahamTheDev • Oct 17 '21 • Edited

If you don’t mind swearing (a lot of it) there is a series of websites people have built with minimal styling and design to highlight how people overcomplicate websites and how minimal styling is all that is needed to make a website usable (exactly the point of this article, so I am bound to ❤️🦄 it!)

My entry is within this article, along with the previous ones that other people have built.

Perhaps you could see if you can make any improvements and join the fight! 🤣

Tushar Sadhwani • Oct 18 '21

This is clean and simple, I like it a lot.

Have you considered using :root instead of html ? It can cover more edge cases.

swyx • Oct 18 '21

you know ive never used :root before! sounds cool. what kind of edge cases?

Tushar Sadhwani • Oct 18 '21 • Edited

Such as a document that doesn't have an <html>, for example.

Tushar Sadhwani • Oct 25 '21

lol. dev.to commented out my html

Josh Collinsworth • Oct 17 '21

This version varies from the version on swyx.io, for what it's worth. (The top and bottom margins on the headings are reversed on swyx.io, which I came here to protest to find that they'd been flipped here.) :)

swyx • Oct 17 '21 • Edited

thanks yeah the swyx.io is a static site that builds once a day... the changes will be reflected soon. i use devto as a headless cms. thanks for caring enough to complain!