one day of code

CSS-only vertical rhythm

January 04, 2021

Want bare-bone snippet for vertical rhythm using only css ([r]em units)?

:root {
  --base-line-height: 30px;
  --base-font-size: 24px;
}
html {
  font-size: var(--base-line-height);
}
body {
  font-size: var(--base-font-size);
  line-height: 1rem;
}

Example:

p {
  margin: 1rem; /* 30px */
}

Written by Milan Miljkovic — a tech enthusiast and design system practitioner.

• ← Filter static list using css
• Find and rename multiple files recursively →