CSS Reset

CSS, Visual · Oct 16, 2022

Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, default browser styles are not particularly great in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule.

html {
  max-width: 70ch;
  margin: auto;
  padding: 3em 1em;
  font-family: system-ui, 'Segoe UI', Roboto, Cantarell,
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25em;
  line-height: 1.75;

body {
  margin: 0;

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

p, ul, ol {
  margin-bottom: 2em;
  color: #1d1d1d;

small {
  font-size: 80%;

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;

sub {
  bottom: -0.25em;

sup {
  top: -0.5em;

pre, code, kbd {
  font-family: monospace, monospace;
  font-size: 1em;
  • html:
    • max-width - Use ch units to set the maximum width in the middle of the optimal readable range (60-80 characters).
    • margin - Center content on the page.
    • padding - Prevent edge-to-edge text on smaller viewports.
    • font-family - Use the system font stack to ensure the best possible font rendering. system-ui is a new generic font family that replacesĀ -apple-system andĀ BlinkMacSystemFont.
    • font-size - Use a larger font size for better readability and to keep up with recent design trends.
    • line-height - Use a larger line height to increase visual clarity.
  • body: margin - Remove the default margin in all browsers.
  • h1-h6:
    • margin - Use larger margins for headers to improve visual hierarchy.
  • p, ul, ol:
    • margin-bottom - Add spacing between textual elements.
    • color - Soften text color to improve readability.
  • small:
    • font-size - Correct font size discrepancies between browsers.
  • sub, sup:
    • font-size - Correct font size discrepancies between browsers.
    • line-height - Prevent elements from affecting line height.
    • position - Position elements relative to parent.
    • vertical-align - Align elements to the baseline.
    • bottom, top - Correctly position elements.
  • pre, code, kbd:
    • font-family - Use monospace fonts for code elements.
    • font-size - Correct font size discrepancies between browsers.

More like this

  • CSS Print Stylesheet

    A short opinionated print stylesheet to make your websites look great on paper.

    CSS, Visual · Jun 11, 2023

  • Drop cap

    Makes the first letter of the first paragraph bigger than the rest of the text.

    CSS, Visual · Dec 30, 2020

  • Style links without a class

    A short summary of your story up to 180 characters long.

    CSS, Visual · Nov 23, 2022