thegoodlineheight.com

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.

Yes—the page for The Good Line-Height references a Figma Plugin. The site presents itself as a line-height calculator that simplifies type scales by automatically calculating the perfect line height for any text and grid combination, and the page lists “Figma Plugin” alongside its web calculator interface. That is the extent of what the page confirms: it names the plugin but does not describe installation, features, pricing, or where to get it.

What the page confirms

The Good Line-Height (thegoodlineheight.com) is built around a single promise: “Simplify type scales by automatically calculating the perfect line height for any text & grid combination.” The page shows a working calculator with these visible elements:

• A sample typeface, Playfair Display
• A Toggle Grid control
• Numbered inputs: 1 Font size, 2 Line~height ratio, 3 Grid row height
• A result line reading “The good line~height is:” followed by a column of values (48, 32, 32, 32, 32, 32, 32)
• A Turn the lights OFF toggle
• A Figma Plugin label

So the page itself is a web-based calculator, and the Figma Plugin is referenced as part of the same tool family. Nothing on the page states how the plugin is installed, what it costs, or whether it mirrors the web calculator exactly.

What the plugin is intended to do

Based on the page’s stated purpose, the plugin’s job is to bring the same line-height calculation into a Figma workflow: given a font size, a line-height ratio, and a grid row height, it produces a line height that fits both the text and the grid. The web calculator demonstrates the logic with three inputs and one output, and the plugin label suggests that logic is meant to be applied inside design files rather than only in the browser.

A concrete example of the calculation

Suppose you are setting body text at 16px with a line-height ratio of 1.5 and a grid row height of 8px. The raw line height would be 24px, which already lands on an 8px grid multiple. If your ratio produced 22px instead, the tool’s purpose is to reconcile the text scale with the grid so the result aligns to the row height—the page’s output column of repeated values (32 appearing six times) illustrates this snapping behavior.

What is not confirmed

The page does not provide:

• A link or button that installs or opens the plugin
• Plugin-specific features beyond the calculator concept
• Pricing or licensing information for either the web tool or the plugin
• Whether the plugin requires a Figma account or paid plan

Treat the plugin as referenced but not documented. If you need it, search the Figma Community for the tool’s name and verify the publisher before installing; if you only need the calculation, the web calculator on the site covers the same three inputs.

Practical takeaway

Use the web calculator at thegoodlineheight.com when you want a quick line-height value for a font size, ratio, and grid row height. Look for the Figma Plugin in Figma’s plugin directory if you want that calculation inside your design files—but confirm availability and terms there, since the site itself only names the plugin without further detail.

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.

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

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.

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.