100 Bytes of CSS to look great everywhere

Interesting little CSS snippet by Shawn Wang.

This should be simple drop-in css to look good on most displays

It’s an enhancement that builds on top of the User-Agent provided styles to make your content more easily consumable by limiting line-length, centring the content column, adding some whitespace, bumping up the font-size, etc.

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

I have used (a slightly tweaked version of) this snippet in the test included in the post on Media Query Range Contexts and it works wonderfully well I must say, especially when the page is fullscreen. On larger screens I even tend to go for a a font-size of 1.5em.

100 Bytes of CSS to look great everywhere →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.