How to Use the Controls on The Good Line-Height

The Good Line-Height is a small browser tool (also offered as a Figma plugin) that calculates a line height for a given font size, line-height ratio, and grid row height. To use it, set the three numeric controls, optionally toggle the grid and the light/dark display, then read the resulting value shown as "The good line~height is" and judge it against the sample text. The tool is for previewing and picking typography values; it does not appear to export or save settings based on the page content.

The three controls and what each one changes

The page presents the controls as a numbered sequence, which matches the order you'd normally work in:

The output line reads "The good line~height is: 48 32 32 32 32 32 32" in the page's example state. The first number is the recommended line height; the repeated values after it illustrate how that height repeats across successive grid rows. When you change any of the three inputs, that output updates.

A practical reading of the mechanism: the ratio gives you a comfortable line height for the font size, and the grid row height then constrains it so lines land on your baseline grid. If the ratio produces a value that doesn't sit on the grid, the tool's answer is the grid-aligned height you should actually use.

Step by step

1. Set the font size (control 1). Enter the size of the text you're styling. This anchors everything else.
2. Set the line-height ratio (control 2). Start with a typical body-text ratio and adjust until the previewed text looks right to you. The ratio is your design intent; the grid is the constraint.
3. Set the grid row height (control 3). Enter the row height from your layout or baseline grid. The output value will now reflect a line height that fits that grid.
4. Read the result. Look at the "The good line~height is" line. The first number is the line height to use in your CSS or design file.
5. Toggle the grid on to see how the text sits against the rows. This is the check that matters: the number is only "good" if the text visually aligns with the grid.
6. Toggle the lights off if you want to evaluate the type on a dark background, or to reduce glare while comparing values.
7. Judge with the sample text. The page fills the preview with Lorem ipsum (drawn from Cicero's De finibus, as the page explains). Read a few lines at the calculated height and check for crowding or loose spacing before committing the value.

Verifying the result

The tool gives you a number, but the decision is visual. After setting the three controls:

• Turn the grid on and confirm the text baselines sit on the rows rather than drifting between them.
• Compare the calculated value with the ratio-only value (the font size times the ratio). If they differ noticeably, your grid row height is doing real work, and you should decide whether that compromise is acceptable for the text size in question.
• Check the sample paragraph at the chosen height for the usual problems: lines that feel cramped at small sizes, or gaps that look disconnected at large sizes.

Common sticking points

• Changing the grid row height after the ratio. The output is grid-dependent, so a row height that suited one font size may produce an awkward value at another. Re-check the preview after any change to control 1 or 3.
• Treating the ratio as the answer. The ratio is an input, not the output. The number to use is the one on the "The good line~height is" line.
• Ignoring the grid toggle. Without the grid on, you're only seeing the ratio applied; the grid alignment is the part the tool exists to solve.
• Expecting saved presets. The page shows controls, a preview, and a Figma plugin link; there's no indication of saved projects or exported settings, so note the value you land on before navigating away.

If you work in Figma, the plugin route lets you apply the same calculation inside your design file rather than copying numbers between the browser and your document.