TIL: Improving µCSS readability on mobile

With µCSS on mobile, the typography can be hard to read, and media queries appear to be the right approach to fixing it. Adding this bit of CSS below makes text more easy to read on mobile devices. I'm now using this on both this site and my author site.

@media (max-width: 768px) {
  body {
    font-size: 18px;
    line-height: 1.7;
    padding: 0 14px;
  }

  h1, h2, h3 {
    line-height: 1.25;
  }

  pre, code {
    font-size: 0.9em;
    overflow-x: auto;
  }
}