Why Line Height Matters for Type Scales and Grids

Line height matters because it controls both readability and vertical rhythm: the space between lines determines how comfortably text reads, and whether that space lands on your grid determines whether a layout feels aligned or subtly off. The Good Line-Height addresses this by calculating a line height that fits a given font size and grid row height, rather than leaving designers to guess a ratio.

What the tool actually does

The Good Line-Height is a browser-based calculator (with a Figma plugin) built around one idea: simplify type scales by automatically calculating the perfect line height for any text and grid combination.

Its interface exposes three inputs, shown alongside a live text sample set in Playfair Display:

• Font size — the size of the text you are setting.
• Line~height ratio — the multiplier applied to font size.
• Grid row height — the baseline grid your layout is built on.

The page also includes a Toggle Grid control and a light/dark switch ("Turn the lights OFF"), so you can see the text sample against the grid while you adjust values. The output is stated directly: "The good line~height is:" followed by a number.

How the calculation works

The tool's purpose is to reconcile two numbers that rarely agree on their own: the line height produced by a font-size × ratio pairing, and the row height of your grid.

A line height that is a clean multiple of the grid row height keeps every line of text sitting on the grid. When it isn't, text drifts across rows and the vertical rhythm breaks — headings, body copy, and spacing stop lining up even though each element looks fine in isolation.

The calculator takes your font size and ratio, compares the resulting line height against the grid row height, and returns a line height value that fits the grid. In the page's sample state, the output reads 48 against a set of 32 values, reflecting a font size and ratio combination being resolved to a grid-compatible result.

The practical effect: instead of manually testing ratios until lines land on the grid, you enter your font size and grid row height and read off the answer.

Why this matters for type scales

A type scale is a set of font sizes used consistently across a design. Each size needs its own line height, and each line height needs to relate to the grid. Doing this by hand for five or six sizes means repeated trial and error, and small errors compound: a heading that is two pixels off the grid pushes everything below it.

Matching line height to the grid keeps layouts consistent across sections and pages, because the same vertical unit governs all text. It also protects readability — line height that is too tight crowds lines together, and one that is too loose makes paragraphs feel disconnected. The tool's contribution is to remove the manual calculation from that decision, so the ratio becomes a starting point rather than a final answer.

Using the controls

1. Set the font size for the text style you are defining.
2. Adjust the line~height ratio to your preferred reading density.
3. Enter the grid row height your layout uses.
4. Read the result next to "The good line~height is:" and apply that value as the line height for that text style.
5. Toggle the grid on to confirm the text sample sits on your rows before committing the value.

The common sticking point is treating the returned number as a universal constant. It is specific to the font size, ratio, and grid row height you entered — change any one of them and the result changes. Recalculate per text style rather than reusing one value across a scale.

Figma plugin

The page references a Figma Plugin, so the same calculation can be applied inside a design file rather than in a separate browser tab. The page does not document the plugin's installation steps or its exact in-Figma controls, so check the plugin listing for setup details before relying on it in a team workflow.

When it's the right tool

Use The Good Line-Height when you are building a type scale on a fixed baseline grid and want line heights that land on it without manual arithmetic. It suits design-system work, editorial layouts, and any project where vertical rhythm is a stated requirement.

It is less useful if your layout has no grid, if you are working with fluid type where font size changes continuously, or if you need line heights tuned to a specific typeface's metrics rather than a ratio — the tool works from the numbers you supply, not from font files.