Vertical Rhythm Tool

Create a consistent vertical rhythm for your web design.

The tool does the maths for margin-top, margin-bottom and line-height and creates CSS rules for a consistent Vertical Rhythm

Font-size with px unit can disable zoom for some browsers. If you use rem unit, this tool gives you an em fallback.

Base Settings

px

Vertical Gutter calculation method

margin-top = 2 x line-height
margin-bottom = line-height

Preview

margin-top = line-height
margin-bottom = 0

Preview

margin-top = 0
margin-bottom = line-height

Preview

Target Font Size

  • You can change the "modifiers" for scaling your font-sizes
  • If you don't need a class, let the modifier empty

Smaller text classes

- px

- px

Bigger text classes

+ px

+ px

+ px

Headings

+ px

+ px

+ px

+ px

+ px

+ px