Vertical Rhythm Calculator

Create consistent vertical spacing based on your base typography.

24px
Base Rhythm Unit (16 x 1.5)
0.25x6.0px
0.38rem
0.5x12.0px
0.75rem
1x24.0px
1.50rem
1.5x36.0px
2.25rem
2x48.0px
3.00rem
3x72.0px
4.50rem
4x96.0px
6.00rem
CSS Custom Properties:
:root {
  --rhythm-unit: 24px;
  --space-0-25: 6.0px;
  --space-0-5: 12.0px;
  --space-1: 24.0px;
  --space-1-5: 36.0px;
  --space-2: 48.0px;
  --space-3: 72.0px;
  --space-4: 96.0px;
}

What is Vertical Rhythm?

Vertical rhythm is the concept of keeping vertical spaces between elements consistent. By using multiples of a base unit (typically your base line height), you create a harmonious visual flow that makes content easier to scan and read.