Designers
ToolsDocsProAll the Possibles

All 141 tools / Typography

Snap a set of type sizes to a baseline grid with line-heights and margins in whole baseline units

Vertical rhythmFreeFor designers and developers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You type in numbers or values.

baseline: 8
sizes: ["small:14","body:16","h3:20","h2:31","h1:49"]
bodySize: 16

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

Vertical rhythm: 8px baseline, body 16px on 24px lines
small: 14px, line-height 24px (1.714, 3 units), margin 0px above, 24px below
body: 16px, line-height 24px (1.5, 3 units), margin 0px above, 24px below
h3: 20px, line-height 24px (1.2, 3 units), margin 24px above, 16px below
h2: 31px, line-height 40px (1.29, 5 units), margin 24px above, 16px below
h1: 49px, line-height 56px (1.143, 7 units), margin 48px above, 16px below

:root { --baseline: 0.5rem; /* 8px at a 16px root */ }
small {
  font-size: 0.875rem;
  line-height: calc(var(--baseline) * 3); /* 24px, ratio 1.714 */
  margin-block: calc(var(--baseline) * 0) calc(var(--baseline) * 3);
}
body, p {
... full output on the tool page

What you get

Per size: a line-height and start and end margins in baseline multiples, plus calc() CSS

What it cannot do

Aligns line boxes and margins only; it does not read font metrics, and the ratio curve is a convention.

Who it is for

  • Designers
  • Developers

Free and Pro

Free25 runs a day per IP address.
ProNo daily limit, 300 requests a minute.

What each plan includes

Use it from your assistant

The tool is called vertical_rhythm. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/vertical-rhythm -H 'content-type: application/json' -d '{"baseline":8,"sizes":["small:14","body:16","h3:20","h2:31","h1:49"],"bodySize":16}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in typography

All typography tools