How does The Good Line-Height calculate the ideal line height?

Updated

The Good Line-Height takes three inputs — font size, a line-height ratio, and grid row height — and returns a single line-height value that keeps text aligned to a consistent grid. You enter your type and grid settings, and the tool reports "The good line~height is" a specific number, shown alongside sample text so you can judge the result visually.

The three inputs and what each one does

Input Role
Font size The base size of your text; sets the scale the line height must serve
Line~height ratio Your preferred proportional spacing (e.g., a multiplier applied to font size)
Grid row height The fixed vertical unit your layout is built on

The page presents these as a numbered sequence — 1 Font size, 2 Line~height ratio, 3 Grid row height — followed by the computed result.

How the calculation works

The tool's job is to reconcile two things that often conflict: a typographically comfortable line height (driven by font size and ratio) and the rigid rhythm of a grid (driven by row height). Rather than leaving you to round by hand, it computes a line-height value that lands on the grid while staying close to your intended ratio.

The output is a single number. On the page's default example, the result reads 48, with the surrounding scale showing values like 32 repeated down the column — the sample text then renders at that computed line height so you can see the spacing in context.

What you see on the page

  • A heading reading "The good line ∼ height"
  • The three numbered inputs
  • The computed line-height value displayed as "The good line~height is: 48"
  • A column of scale values (32, 32, 32…) illustrating the grid rhythm
  • Sample Lorem ipsum text rendered at the calculated spacing
  • A "Toggle Grid" control and a light/dark switch ("Turn the lights OFF")
  • A reference to a Figma Plugin and a typeface sample (Playfair Display)

The grid toggle matters: turning the grid on lets you confirm visually that the text baselines sit on the rows, which is the whole point of the calculation.

When to use it

Use this tool when you are setting up a type scale and want line heights that respect a baseline grid without manual arithmetic — for example, when a design system specifies a 32px row height and you need body text at a given size to occupy a whole number of rows. It is a calculation aid, not a full layout editor: it gives you the number, and you apply it in your design tool or CSS.

The page does not state pricing or login requirements, so treat access terms as unconfirmed and check the site directly before relying on the Figma Plugin or other features.