Skip to content

Text and typography / line-height

What line height should a PDF document use

Line height sets the distance between baselines. Print conventions differ from screen conventions, and copying the screen value produces a document that looks loose and runs long.

What it is for

Screen body text commonly sits at 1.6 or higher because screens are read at a distance and at lower resolution. Print sits closer to 1.35 to 1.5, and the difference across a forty-page report is several pages.

Support: Works everywhere

Supported. This is a design decision rather than a technical one.

The syntax

Written the way it would appear in a document stylesheet, using line-height as intended.

css

.document {
  font-size: 10.5pt;
  line-height: 1.45;
}

/* Tables want less: the rows already provide the separation. */
.document td,
.document th {
  line-height: 1.25;
}

/* Headings want less again: large type needs proportionally less leading. */
.document h1,
.document h2 {
  line-height: 1.15;
}

The mistake people make

A unitless value inherited into a heading, where it multiplies the heading's own font size and produces enormous gaps. That is the correct behaviour and the reason to set heading line-height explicitly.

Frequently asked

Does line-height work when generating a PDF?

Works everywhere. Supported. This is a design decision rather than a technical one.

How would I know if it were not working?

You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.

Related properties

Things that come up in the same part of a document stylesheet.

How to embed a custom font in a PDF@font-face. Works everywhere.Which font-display value should a PDF usefont-display. Works everywhere.How to use different fonts for different scripts in a PDFunicode-range. Works everywhere.How to align numbers in a PDF table columnfont-variant-numeric. Works everywhere.How to enable hyphenation in a PDFhyphens. Works everywhere.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground