Default text on the web is just so… so… so blah. I love that Alvaro agrees that 16px is way too small to be the web’s default font-size for text. I would take that one step further and wipe out the Times New Roman default font as well. I’m sure there are sites out there leveraging it (I did on my own personal site for years as an act of brutal minimalism), but a personal preference these days is defaulting to whatever the OS default font is.
Oh gosh, I never ever make this mistake. 😝
- Limit the content width within the viewport
- Increase the body text size
- Increase the line between rows of text
- Limit the width of images
- Limit the width of text within the content
- Wrap headings in a more balanced way
- Form control colors to match page styles
- Easy-to-follow table rows
- Spacing in table cells and headings
- Reduce animations and movement
No explanation needed here. It’s often the very first thing declared in any given stylesheet on the web.
Global border-box sizing
Alvaro was kind enough to share the trustiest of his trusty CSS:
But hypothetically, if I did — and that’s a BIG if — I like preventing it from messing with a visitor’s scrolling experience. Once the <body>‘s intrinsic width is forced outside the viewport, we get horizontal scrolling that might be a very cool thing if it’s intentional but is not-so-bueno when it’s not.
System fonts
These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people decorate, Feng Shui, or what have you. That’s her little dip into Voyeur-Land. Mine? It could easily be scrolling through CSS snippets that devs keep within arm’s reach.
*, *::before, *::after {
box-sizing: border-box;
}
body {
padding-block: 15px;
}
Not too much, not too little, but the baby bear porridge just the right amount of space to keep content from hugging right up to the edges.
body {
font-family: system-ui, sans-serif;
}
body {
overflow-x: hidden;
}
Not dropping the snippets in here (it’s worth reading the full post for that). But I do have a couple of my own that I’d tack on. And like Alvaro says up-front about his list, not all of these will be 100% applicable to every project.
body {
font-family: system-ui;
}
We can be a little more opinionated than that by falling back to either a default serif or sans-serif font.
