DEV Community

Cover image for 100 Bytes of CSS to look great everywhere
swyx
swyx

Posted on • Updated on • Originally published at swyx.io

100 Bytes of CSS to look great everywhere

TL;DR

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

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:

https://pbs.twimg.com/media/FB2PmLXVEAYu7GN?format=jpg&name=large

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:

https://pbs.twimg.com/media/FB2Po1tVIAA-i3O?format=jpg&name=large

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Applying Styles on Pages You Don't Control

Discussion (12)

Collapse
brad profile image
BrandonKMLee

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.

Collapse
swyx profile image
swyx Author

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

Collapse
trailrun80 profile image
trailrun80 • Edited on

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

Collapse
tusharsadhwani profile image
Tushar Sadhwani

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

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

Collapse
swyx profile image
swyx Author

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

Collapse
tusharsadhwani profile image
Tushar Sadhwani • Edited on

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

Thread Thread
tusharsadhwani profile image
Tushar Sadhwani

lol. dev.to commented out my html

Collapse
inhuofficial profile image
InHuOfficial • Edited on

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! 🀣

Collapse
joshcollinsworth profile image
Josh Collinsworth

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.) :)

Collapse
swyx profile image
swyx Author • Edited on

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!

Collapse
endymion1818 profile image
Ben Read

Might actually use this in my redesign πŸ˜€

Collapse
hieultimate profile image
hieultimate

Great one. It would help me save some time