Baseline Grid Calculator

Calculate and preview perfect vertical rhythm for your typography using baseline grids.

Live Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

How to Use the Baseline Grid Calculator

This tool helps designers and developers maintain perfect vertical rhythm by aligning text to a consistent grid.

  • Base Font Size: Enter the font size (e.g., 16px, 18px).
  • Line Height: Set the line height (usually 1.4–1.6).
  • Grid Step: Optional—this is usually Font Size × Line Height.
  • Live Preview: Adjust the inputs and see the visual spacing update in real time.
  • Copy: Click “Copy Settings” to use values elsewhere.