Baseline and Leading Body

Font size, baseline and leading in body copy

The baseline is that invisible line your letters sit on. Descenders, like the tail of “g” or “p”, hang below it. Leading measures the vertical gap from one baseline to the next. When you're setting a long stretch of body copy, a rule that works in practice is anywhere from leading = 1.4 × size up to leading = 1.6 × size, which maps straight onto line-height: 1.4–1.6 in CSS.

Two other measurements push the number around. There's the cap-height (how tall the capitals are, say an “H”) and the x-height (how tall the lowercase letters run, like an “x”). When a face has a generous x-height, as Inter, Source Sans and Roboto do, you can get away with the bottom of the range. Faces with a small x-height, such as Garamond or Caslon, want their lines spread further apart. Robert Bringhurst worked all of this out in The Elements of Typographic Style, where these proportions anchor his account of readable body text.

Applications

Web designers reach for this when they're dialing in line-height across a design system. Editorial designers use it to set up books and magazines in InDesign. It shows up in accessibility audits checking WCAG 1.4.12 (Text Spacing), and developers lean on it to pick reasonable defaults for their typography tokens.

FAQ

Why 1.4 to 1.6 specifically? Go below 1.4 and the descenders of one line start bumping into the ascenders of the line beneath. Go above 1.6 and the eye loses track of where the next line begins, so you end up re-reading or skipping. The range in between keeps the gaze moving smoothly.

Is leading the same as line-height? In CSS, close enough. line-height sets the height of the whole line slot, which is the font size plus the leading, split half above and half below. Back in print, “leading” referred only to the extra strip of lead a compositor wedged between baselines.

Do headings need the same range? No. Big display sizes, 32 px and up, want something tighter like line-height: 1.1–1.25. By that point the line is so long horizontally that it already has plenty of vertical breathing room.