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 thech
unit. I blogged more on line lengths last year. -
padding: 3em 1em
: If the display's width goes under themax-width
set above, then this padding prevents edge-to-edge text on mobile. We use3em
to provide top/bottom whitespace. -
margin: auto
: This is really all that is needed to center the page - applied onhtml
, 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. Preferem
orrem
overpx
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)
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.
if you can find simple pure css solutions for two-column layouts that dont suck i'd be happy to help you publicize it
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
yeah i think that looks good statically but is not a good experience for arbitrarily long documents
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! π€£
This is clean and simple, I like it a lot.
Have you considered using
:root
instead ofhtml
? It can cover more edge cases.you know ive never used :root before! sounds cool. what kind of edge cases?
Such as a document that doesn't have an <html>, for example.
lol. dev.to commented out my html
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.) :)
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!
Might actually use this in my redesign π
Great one. It would help me save some time
You may check this one: This Website Uses Only 109 Bytes Of CSS & Looks Great On All Devices