What Is The Good Line-Height?

Updated

The Good Line-Height (thegoodlineheight.com) is a browser-based tool that calculates a line height for a given combination of text and grid settings. You enter a font size, a line-height ratio, and a grid row height, and it returns a single line-height value plus a live preview of text set at that value. It is aimed at designers and developers who want type scales and baseline grids to line up without doing the arithmetic by hand. The site also references a Figma plugin, so the same calculation can be applied inside a design file.

What the tool actually does

The page describes its purpose as simplifying type scales "by automatically calculating the perfect line height for any text & grid combination." The output is a number — in the example shown on the site, the result is 48 — derived from the three inputs listed on the page:

  • Font size
  • Line~height ratio
  • Grid row height

The preview area renders sample text (the standard Lorem ipsum passage) at the calculated line height, and a grid overlay can be toggled on so you can see how the text sits against the rows. A light/dark toggle ("Turn the lights OFF") changes the preview background.

How to use it

  1. Open the site in a browser. No account or download is described on the page.
  2. Set the font size to the size your text will actually use.
  3. Set the line-height ratio — the multiplier you would normally apply to font size.
  4. Set the grid row height to match your layout's baseline or row unit.
  5. Read the result shown as "The good line~height is:" followed by the computed value.
  6. Toggle the grid on to check alignment, and adjust inputs until the text sits cleanly on the rows.

The expected outcome is a line-height value you can copy into your CSS or design tool. The common sticking point is that the result depends entirely on the grid row height you supply — if your layout uses a different baseline unit than the one you typed in, the number will not match your real grid.

Where it fits in a workflow

The tool is most useful at the point where a type scale meets a layout grid: choosing body text sizes, setting heading line heights, or checking whether a proposed font size can land on whole grid rows. Because it shows the sample text at the computed value, you can judge readability as well as alignment before committing the number to a stylesheet.

For teams working in Figma, the referenced plugin suggests the same calculation is available without leaving the design file. The page does not describe the plugin's installation, pricing, or feature set, so check the plugin listing directly if that route matters to you.

Limits to keep in mind

  • The page presents a single calculation model based on three inputs; it does not document support for multiple text styles at once or for exporting a full scale.
  • No pricing, login requirement, or licensing terms appear on the page, so treat availability as unconfirmed until you open the site.
  • The result is a starting value, not a guarantee of good typography — long measure, font choice, and language still affect readability.