Calculate line-heights and margins to maintain consistent vertical rhythm across all text elements.
Typographers keep text on a baseline grid: every line of every size of type lands on the same horizontal lines, so the page reads as one measured system. This tool does that arithmetic. You enter a base unit - the line-height one line of body text occupies, typically 24px - and the font sizes you plan to use, and it returns a line-height and vertical margin for each size, every value a multiple of the base. The surprise is the rounding: a heading can end up with a line-height twice or three times its font size.
A concrete input and expected output from the current implementation.
Input
Base line-height: 24px | Body font: 16px | Heading font: 24px | Minimum ratio: 1.5
Expected output
Body (16px): line-height 24px (ratio 1.50), margin-bottom 24px Heading (24px): line-height 48px (ratio 2.00), margin-bottom 24px
16 x 1.5 = 24px is already a multiple of the base, so body text keeps the base line-height, while 24 x 1.5 = 36px is not, so the heading rounds up to the next multiple of 24 - 48px - giving a 2.0 ratio. Every line and margin stays on the 24px grid.
Every line-height must be a whole multiple of the base unit. For each font size the tool computes the minimum comfortable line-height - the font size times a minimum ratio you set, with 1.5 a common starting point - then rounds it up to the next multiple of the base. The result is the shortest line box that still lands on the grid.
Vertical margins use the same base, so the space between elements stays a whole number of grid steps: one unit after a paragraph, two or more before a new section. The returned margins are meant to be applied to one side per element, usually margin-bottom; spacing then stays a whole grid step between any two stacked elements.
Because 24 x 1.5 = 36px, and 36px is not on the 24px grid. The next multiple is 48px, so the heading spans two grid lines - the airy line is the price of the baseline staying aligned. To soften it, pick heading sizes so size x ratio lands just under a grid multiple, or raise the base to 28px or 30px.
Only where the math lands on the grid. Unitless values multiply each element's own font size, so they work only if every size x 1.5 is a multiple of your base - true for 16px on a 24px grid, false for 17px (25.5px). The reliable route is setting the tool's pixel or rem value on every text element; unitless values are recommended for inheritance, which is why they are a common point of failure.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.