Baseline
The baseline is the invisible line on which most letters in a typeface sit. Descenders (like the tail of 'g' or 'p') extend below the baseline. Most typographic measurements reference the baseline.
In Practice
The baseline is the invisible line on which most letters sit. In CSS, the baseline is the default alignment point for inline elements. When laying out a heading and body text side by side, aligning their baselines produces a cleaner result than centering them by their bounding boxes, which is how most design tools align by default. The type scale calculator shows the baseline grid for the generated scale.
Common Mistakes
The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.
The invisible line behind everything
The baseline is the imaginary line most letters sit on, and it is the reference point for every vertical metric in a font: cap height, x-height, ascenders, and descenders are all measured from it. In a layout, the baseline is also the seam where type and non-type meet. Inline images, icons, and form elements align to it by default, which is why a loose implementation can make a button sit higher or lower than the text next to it.
CSS keeps the concept alive through vertical-align: baseline, the default for inline content. When you mix two fonts on one line, the baseline is what stays fixed, so both families feel aligned even when their cap heights differ. Design tools show baselines when rulers are on; the quickest way to diagnose a misaligned footer or headline is to turn them on and look for the letters sitting on one common line.