Why does leading fall as the font size rises?

Because the x-height grows with the size while the line box grows faster, so a display setting already has generous vertical space relative to its letters. The formula reflects that: the size term contributes 1.6 at 12px and 1.35 at 32px, which is the same optical correction a designer makes by hand at each end.

How does the measure change the recommendation?

Longer lines need more leading. The term adds one hundredth of a line-height for every character over 65 and subtracts the same for every character under it, so a 90-character measure gains a quarter of a line-height over the default while a 40-character measure tightens.

What counts as large text for the relaxed guidance?

Above 24 pixels, or above 18.66 pixels at a bold weight, where the accessibility guidance allows a lower contrast ratio and a tighter leading. That is the case where 1.1 to 1.3 becomes acceptable, and the exported CSS notes it beside the value so the tighter setting is a decision rather than an accident.

Why is the result a unitless line-height?

So it keeps its proportion when the font size changes. A pixel value is useful as a comment for checking the box height, but shipping it as the declaration means the leading breaks the moment the size is overridden by a responsive rule. The unitless form is inherited and recomputed against the current size.

Can I trust the number without looking at the page?

No, and the panel says so. The formula cannot see x-height, vertical metrics, or the width of the actual face, so two families at the same size and measure can want different leading. It is a start value with a stated derivation — the preview is there so the final judgement is made on running text.

Line Height Optimizer

Text parameters

Font sizepxMeasurecharacters per lineFamilyWeight

Recommended line-height1.5 (24px)

Ideal measure band45–75 characters

Your measurein range

Formula shown in the code output is: 1.2 + 4.8/size + (measure − 65)/100 ± family/weight adjustment, clamped to 1.05–2.0.

Preview at recommended leading

Type is a sequence of decisions about spacing: the size sets the tone, the line length sets the pace, and the leading decides how comfortably the eye travels from the end of one line to the start of the next.

16px / 1.5 · measure ≈ 65ch

CSS

font-size: 16px;
line-height: 1.5; /* 24px */

/* Large text (>24px or >18.66px bold) may drop to 1.1–1.3 */

Starting points

Compact UI / large headings1.4

Recommended1.5

Airy editorial1.65

You Might Also Need

Baseline Grid Calculator

Lock text to a baseline grid

Paragraph Width Optimizer

Optimize characters per line

Vertical Rhythm Builder

Compose a vertical rhythm

Type Scale Generator

Generate a modular type scale

The line height optimizer returns a leading value derived from four inputs — size, measure, family and weight — using a formula it prints in full. The point is not the number but that the number is inspectable and can be argued with.

What is Line Height Optimizer?

The line height optimizer takes the four properties that actually move leading and returns a single value with the arithmetic shown. The formula is 1.2 plus 4.8 divided by the font size, plus the measure in characters minus 65 divided by 100, plus 0.03 for a serif and minus 0.03 for a weight of 600 or heavier, all clamped between 1.05 and 2.0.

Three readings of that formula show how it behaves.

At 16px on a 65-character measure the size term gives 1.5, which is the familiar default for body text.
At 12px the same term rises to 1.6, because small text needs proportionally more air between lines to keep the eye from skipping.
At 32px it falls to 1.35, which is why display sizes tighten as they grow rather than holding the body value.

The measure term does the rest. A long line needs more leading because the return sweep is longer and a misread line is easier to lose; a short line needs less. The family and weight adjustments are small nudges: serifs sit fractionally airier because their stroke contrast breaks up at small sizes, and heavy weights can close up because their counters are already large in the reader's eye. Every value is clamped at both ends, so an extreme input returns the nearest sensible value rather than an unusable number.

The panel also states the band the measure should be in. Below 45 characters the line rhythm breaks and the reader stumbles at every wrap; from 45 to 75 is the comfortable reading band; past 75 the return sweep becomes a search and the text needs either more leading or a shorter column. Its own preview uses the recommended value at a maximum width derived from the character count, so the number can be judged in running text rather than as a figure.

Three starting points are offered beside the recommendation: a compact setting one tenth below the result for dense interfaces and large headings, the recommended value itself, and an airy editorial setting up to 0.15 above, capped at the top of the clamp. The exported CSS carries the size and the leading with the pixel value in a comment, and a note that large text — above 24px, or above 18.66px at a bold weight — may drop to between 1.1 and 1.3, since those thresholds are where the accessibility guidance relaxes.

What the model does not do is measure the face, which is the honest limit of any leading formula.

Line-height recommendations depend on x-height and vertical metrics as well as on size, so two faces set at 16px on the same measure can want different leading while the formula returns one value for both.
The measure is entered in characters rather than measured from the face, so a condensed font's real line length is not what the arithmetic is working with.
The clamps at 1.05 and 2.0 mean an extreme input returns the nearest usable value rather than a warning.
The preview is a single paragraph at a single width, so a value that reads well there still has to be checked against a narrow column and a wide one.

It is a starting point with a printed derivation, which is more useful than a table of defaults and less authoritative than the type designer's own specification.

How to use Line Height Optimizer

Enter the font size and the measure in characters, since those two terms carry most of the result.
Choose the family and the weight so the two small adjustments are applied, and read the measure verdict at the same time.
Compare the recommendation with the compact and airy starting points, and pick the one the layout needs rather than the middle by default.
Copy the CSS and keep the pixel value in the comment, because a unitless line-height in a different font size will change behind your back.

When to use Line Height Optimizer vs related tools

Reach for it when body text feels crowded or floaty and the leading has been inherited rather than chosen, when a long measure has to be justified before the column width is changed, or when a design system needs a first value for every size in its scale. The formula is the deliverable. For the ladder those sizes come from, the type scale generator builds the steps, the paragraph width optimizer settles the measure in characters, and the baseline grid calculator snaps the result to a vertical grid.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.