I like posts like this: quick, actionable CSS that will improve both the visual appearance and the overall user experience.
Here’s my favourites from the collection:
- Increase the body text size
- Increase the line between rows of text
- Wrap headings in a more balanced way
They’re all super quick and easy to apply. I’d also recommend this article on making content look good for those sort of tips too.
My only raised eyebrow is the reducing animation and movement one. I have applied this almost exact block to the old version of my CSS reset, but it felt a bit heavy-handed over time. Alvaro rightly notes, though:
This approach is somewhat radical because it removes all movement, which may not necessarily be the user's intent-it is "reduced motion" and not "no motion.”
That was my argument for adding it at the time: it’s better to eradicate the risk of movement than let it through. I’ve softened over the years though and favoured wrapping animations in a no-preference media query instead.
All-in-all, a very useful article!