Baseline

The baseline is typography's most fundamental reference point — the invisible horizontal line on which the majority of letters rest. Think of it as the floor of your text. Every measurement in type, from x-height to cap-height to descender depth, is calculated relative to this line.

In CSS, you interact with the baseline constantly through properties like vertical-align, line-height, and baseline-shift. The baseline value of vertical-align aligns an element's baseline with its parent's baseline, which is the default behavior for inline elements.

/* Aligning inline elements to the baseline */
span {
  vertical-align: baseline; /* default */
}

/* Raising text above the baseline (superscript) */
sup {
  vertical-align: super;
  font-size: 0.75em;
}

/* Lowering text below the baseline (subscript) */
sub {
  vertical-align: sub;
  font-size: 0.75em;
}

In multi-line text, the space between baselines is controlled by line-height. A line-height of 1.5 on a 16px font means baselines are spaced 24px apart — this is what typographers historically called leading.

The baseline also matters in font pairing: when combining two fonts at different sizes, ensuring their baselines align produces a visually cohesive result rather than a jumbled mix. Tools like CSS Grid's align-items: baseline make this alignment automatic across flex or grid children.

Fonts with tall descenders — like some italic variants of EB Garamond — push content further below the baseline, which can affect line-height calculations in body text. Understanding the baseline helps you predict and control exactly how much vertical space your chosen font will actually consume in practice.

For precise baseline-aligned layouts, CSS now offers leading-trim (part of the CSS Inline Layout specification) to remove the extra space above and below text blocks — a feature that has long frustrated designers trying to achieve pixel-perfect spacing from the baseline up.

The concept of a baseline grid — a consistent vertical rhythm built from repeating baseline units — is foundational to disciplined typographic layout. When all text elements on a page align to a shared baseline grid, the result feels organized and intentional even when the reader cannot articulate why. It's the invisible structure behind professionally composed editorial and UI design.