Why is a leading below 1.3 tagged as tight?

Because at that multiplier the line box is shorter than the space a line of text needs once ascenders and descenders are counted, so the tails of one line sit close to the tops of the next. It is a legitimate choice for display type, where lines are short and the tightness is part of the look, and a poor one for a paragraph.

What is the body range based on?

It is the 1.3 to 1.7 band, which is where most text settings land in practice. The guidance notes that a long measure pushes toward the upper end because the eye has further to travel back to the start of the line, while a short measure tolerates the lower end. The band is a marker rather than a rule.

Does the face matter?

Considerably. A face with a large x-height and long ascenders needs more leading at the same size than a small-bodied face does, which is why the sweep runs in the actual face rather than in a default. Running the same sweep in two candidate faces is a quick way to see that the leading you know works is specific to one of them.

Why do headings want a tighter multiplier?

Because a heading's own line box is already tall relative to its apparent size: at 72px, a multiplier of 1.5 puts 108 pixels between baselines, which reads as three separate lines rather than one statement. Display settings usually want between 1.05 and 1.2, and short headings of one line are unaffected either way.

How do I use the box height figure?

It is the leading in pixels at the chosen size, so it is the figure a vertical rhythm or baseline grid is built from. Taking the box height at the last step and dividing a container height by it gives a whole number of lines, which is what keeps text aligned to a grid as it flows down a page.

Font Line Height Tester

Settings

Font family

Type sizepx

Starting line height×

Step×

Steps rendered

Paragraph

Line box at ×116px

Sweep range1× – 1.6×

Box height at last step25.6px

Line height sweep

line-height: 1tight

Readable setting is a balance: too tight and ascenders collide with descenders on the next line; too loose and the eye loses the thread back to the start of the line. The right value depends on type size, measure and the face's x-height.

line-height: 1.1tight

line-height: 1.2tight

line-height: 1.3body range

line-height: 1.4body range

line-height: 1.5body range

line-height: 1.6body range

Typical body text sits between 1.4 and 1.6; long measures push toward the upper end, short measures toward the lower. Headings are a separate decision — display sizes often want 1.05–1.2.

You Might Also Need

Line Height Optimizer

Optimize leading for readability

CSS Line Height Tool

Generate line-height CSS

Vertical Rhythm Builder

Compose a vertical rhythm

Paragraph Width Optimizer

Optimize characters per line

The font line height tester repeats one paragraph at a sweep of leading values so the choice can be made by reading rather than by guessing. The sweep is defined by a start value, a step and a count, and each step is labelled according to the band it falls in.

What is Font Line Height Tester?

The font line height tester renders the same paragraph once per leading value across a leading sweep you define, then reports the range and the line box height at the last step.

The sweep starts from a value between 0.9 and 2, advances by a step between 0.05 and 0.4, and renders between two and twelve steps.
Each rendered step is labelled with its exact multiplier and tagged as tight below 1.3, in the body range between 1.3 and 1.7, or airy above 1.7.
Type size runs from 10px to 40px, and the same size applies to every step in the sweep.
The paragraph is editable, so the sweep can run on a real passage rather than a specimen sentence.
The readouts report the line box at a multiplier of one, the range of the sweep, and the box height at the final step in pixels.

The bands are what make the output readable at a glance. A leading below about 1.3 puts ascenders and descenders from adjacent lines into each other's space, which is what the tight tag marks, and it is a deliberate choice for display type and a poor one for a paragraph. The body range from 1.3 to 1.7 covers the settings that read comfortably, and the guidance below the sweep notes that long measures push toward the upper end of it while short measures tolerate the lower. Headings are called out as a separate decision, since display sizes often want a multiplier between 1.05 and 1.2 because their own line boxes are already tall. The box-height readout converts the multiplier into pixels at the chosen size, which is the figure a vertical rhythm or a baseline grid needs.

The bands are conventional markers rather than the tool's verdict on your setting, and a face with a large x-height can read well slightly outside them.
Every step shares one type size, so the interaction between size and leading has to be explored in more than one pass.
The sweep advances in equal increments, so a range that needs finer sampling near one end has to be run as two sweeps.
Only the leading varies; measure, justification and paragraph spacing are all fixed, and each of them affects how a given leading reads.
Nothing checks the result against a baseline grid or a vertical rhythm, so the pixel figure has to be carried to another tool for that.

Use it when a body leading is being decided for a specific face and measure, when an existing paragraph reads cramped but the reason is unclear, or when a display setting needs its leading loosened. The tagged bands turn a sweep into a decision quickly. Where the leading has to serve a whole vertical rhythm, the vertical rhythm builder and the line height optimizer take the pixel box figure onwards. The line height optimizer derives a leading from the measure, the CSS line height tool writes the declaration, and the vertical rhythm builder turns the resulting box height into a grid.

How to use Font Line Height Tester

Choose the face and set the type size to the value the paragraph will actually be set at, since leading is judged relative to size.
Set the starting multiplier, the step and the number of steps so the sweep brackets the range you expect to choose from.
Paste a real paragraph, ideally one long enough to run to several lines, since leading problems appear on the third line rather than the first.
Read down the sweep and pick the step where the paragraph holds together, then note the box height in pixels for the vertical rhythm.

When to use Font Line Height Tester vs related tools

Reach for it when a paragraph's leading is being decided, when text reads cramped and the cause needs isolating from size and measure, or when a display setting needs the leading loosened without losing the hierarchy. Reading four or five candidates in one screen is much faster than adjusting one paragraph repeatedly. Where the leading has to follow from the measure instead of being chosen by eye, the line height optimizer derives it, the CSS line height tool turns the chosen value into a declaration, and the paragraph width optimizer settles the other half of the same problem.

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.