Baseline

The invisible line letters sit on. Align things to it and mixed sizes look deliberate instead of accidentally floating.

line the text sits onalign the bottomsinvisible line under the lettersbase linethe icon sits lower than the text next to ithow do I line up text of two different sizestext ruler linemake the numbers and the label line up

See it

Live demo coming soon

What it is

The baseline is the invisible line every letter stands on. Lowercase bodies and capitals rest on it, descenders hang below it, and round letters like o and e dip a hair under it on purpose (that is overshoot, so they look the same height as flat-bottomed letters).

It matters the moment you mix type sizes on one line. A big currency figure and a small '/month' label look glued together when they share a baseline and look broken when they are centered against each other instead. CSS gives you 'align-items: baseline' in flex and grid, which is the fix people reinvent with magic pixel offsets.

Icons are the exception. An SVG or image has no useful typographic baseline of its own, so 'align-items: baseline' on an icon-and-label row gives you whatever the replaced element's box happens to produce. Size and align icons against the label's cap-height box or its optical center instead, and keep baseline alignment for the cases where both sides are actually text.

Gotcha: the browser does not put the baseline in the middle of the line box. A line box is the font's ascent plus descent plus leading, split half above and half below, so a big font-size in a small line box drifts off any grid you drew. Repeating the baseline down a page at a fixed interval is a separate discipline (vertical rhythm), and getting it exact usually needs leading trim or font metrics math.

Ask AI for it

Align this price row on the shared text baseline, not on box centers: use display: flex with align-items: baseline so the large currency figure, the small decimal, and the '/month' label all sit on one line, and remove any hand-tuned margin-top nudges that were faking it. Handle the icon-plus-label pairs in the feature list separately, since an icon has no meaningful baseline: size each icon's visual body to the label's cap height and position it against the cap-height box or the optical center of the label. Show the result at 100 and 200 percent zoom with the baseline and cap line drawn as guides.

You might have meant

ascender descendercap heightx heightvertical rhythmovershoot

Go deeper