100 Bytes of CSS to look great everywhere
Tags: css
Published: 2021-10-16 21:05:53

---
title: 100 Bytes of CSS to look great everywhere
published: true
description: Simple grab and go upgrade to the base user agent stylesheet to make for readable sites
tags: css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ar002arl80e64kfoxpz.png
slug: css-100-bytes
canonical_url: https://www.swyx.io/css-100-bytes
---

## TL;DR

```css
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:

{% tweet 1449472712720601088 %}

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

## Context

Dan Luu always writes fascinating posts, but [the design](https://danluu.com/) makes it very painful to read:

![https://pbs.twimg.com/media/FB2PmLXVEAYu7GN?format=jpg&name=large](https://pbs.twimg.com/media/FB2PmLXVEAYu7GN?format=jpg&name=large)

A couple years ago, [this post on HN](https://news.ycombinator.com/item?id=19607169) was fairly popular, and I saved it on my [spark-joy repo](https://github.com/sw-yx/spark-joy/blob/master/README.md#drop-in-css-frameworks), which is a [swipe file](https://twitter.com/swyx/status/1434206569881694210) 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](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:

```css
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](https://twitter.com/swyx/status/1223025553986347009).
- `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](https://twitter.com/JayGilmore/status/1449731397585879040).
- `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](https://dev.to/tusharsadhwani/comment/1j1a0) 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:

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eyghddgt0v5hu0i6f9n.png)

## 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/