{"uid":"cap_e0Pu4kFpLo8iUiEvZsoND","slug":"css-design-calc-vertical-rhythm-baseline-grid-snapper-ede4aaaf","name":"CSS Design Calc – Vertical Rhythm / Baseline Grid Snapper","description":"Snap line-heights for font sizes to a baseline grid: baseline unit, lines per element, unitless line-height and margins.","url":"https://css-design-calc.x402tookit.com/vertical-rhythm?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["baseFontPx"],"properties":{"sizes":{"type":"string","description":"Comma separated font sizes in px to snap (default 12,14,16,20,24,32,40,48,64)"},"baseFontPx":{"type":"number","description":"Body font size in px"},"minLineHeight":{"type":"number","description":"Smallest allowed line-height multiple for any size (default 1.2)"},"baseLineHeight":{"type":"number","description":"Body line-height as a multiple (default 1.5); baseline = fontsize x this"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"css":{"type":["null","string"]},"asOf":{"type":["null","string"]},"rows":{"type":["array","null"],"items":{"type":"object","properties":{"rem":{"type":["null","number"]},"fontSizePx":{"type":["null","number"]},"lineHeightPx":{"type":["null","number"]},"baselineLines":{"type":["null","number"]},"marginBottomPx":{"type":["null","number"]},"lineHeightUnitless":{"type":["null","number"]}}}},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"degraded":{"type":["boolean","null"]},"baseFontPx":{"type":["null","number"]},"baselinePx":{"type":["null","number"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"minLineHeight":{"type":["null","number"]},"baseLineHeight":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_o_TaMSviYenHSiTr9JX5b","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Snaps multiple font sizes to a baseline grid, returning unitless line-heights, baseline lines, and margins for each size in both px and rem.","exampleAgentPrompt":"Snap font sizes 12, 14, 16, 20, 24, 32, and 48px to a baseline grid based on a 16px body font with a 1.5 line-height, and give me the unitless line-height and margin-bottom for each size.","exampleUseCases":[{"title":"Design system vertical rhythm setup","prompt":"I'm building a design system with a 16px base font and 1.5 line-height. Can you snap the sizes 12, 14, 16, 20, 24, 32, 40, and 48px to a baseline grid and give me the unitless line-height and margin-bottom in px for each one?"},{"title":"Custom type scale baseline alignment","prompt":"I have a base font of 18px and a line-height of 1.4. Snap font sizes 18, 22, 28, 36, and 60px to my baseline grid — I want the baseline lines, line-height px, and a ready-to-use CSS snippet."},{"title":"Enforce minimum readable line-heights","prompt":"Snap my heading sizes 24, 32, 48, and 64px to a 16px baseline grid with line-height 1.5, but make sure no size ever gets a line-height smaller than 1.3 — show me the rem values and margin-bottoms too."}],"resultDescription":"Returns a table of rows — one per font size — each with fontSizePx, rem, baselineLines, lineHeightPx, lineHeightUnitless, and marginBottomPx. Also includes the computed baselinePx, a summary, a ready-to-copy CSS block, and optionally reasons or warnings if any size could not be snapped cleanly.","failureModes":["Missing required baseFontPx parameter returns an error","Non-numeric or zero baseFontPx may cause division errors or unexpected output","Extremely large font sizes or very small baselines may produce degenerate line counts","minLineHeight greater than the computed optimal may cause overrides and warnings in reasons array","Malformed comma-separated sizes string may be ignored or produce partial results"],"whenToPreferThis":"Use this endpoint when you need to align a set of font sizes to a consistent vertical baseline grid — especially when building or auditing a CSS design system or component library. It is purpose-built for snapping multiple sizes simultaneously to a shared baseline, returning both the calculated CSS values and a ready-to-use CSS snippet. Prefer it over manual calculation or generic typography tools when you need precise unitless line-heights and baseline-consistent margins in one call.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-29T13:11:18.234Z","isFirstParty":false,"canonicalSlug":"css-design-calc-vertical-rhythm-baseline-grid-snapper-ede4aaaf"}