The baseline in typography is the invisible horizontal line on which most letters rest. Letters such as a, x and H sit exactly on it, while descenders in g, p and y drop below it and round letters such as o and s slightly overshoot it. The baseline is the reference line for nearly every vertical measurement in type: x-height, cap height, ascender and descender length, and the distance between lines of text.
For designers and developers, the baseline matters because it is the point at which text from different sizes, fonts and columns visually aligns. A layout that respects the baseline looks orderly even when it combines headlines, body text and captions; one that ignores it looks subtly uneven.
How the baseline anchors letterforms
Every digital font is drawn on a coordinate grid defined in font units, commonly 1000 units per em for PostScript-flavored fonts and 2048 units per em for many TrueType fonts. The baseline is the zero line on the vertical axis of that grid. All other vertical metrics are measured as positive values above it or negative values below it.
Round and pointed letters are drawn with a small overshoot below the baseline, typically around 1 to 3 percent of the em. Without it, an o would look smaller and appear to float above an x of the same nominal height, because the eye judges curved shapes by their visual mass rather than by their extreme points.
| Metric | Position relative to baseline | What it controls |
|---|---|---|
| Baseline | Zero line | Where letters sit and lines align |
| X-height | Above, top of lowercase x | Perceived size and readability of a font |
| Cap height | Above, top of flat capitals | Height of capitals and alignment with icons |
| Ascender line | Above, top of b, d, h, k | Space needed above lowercase text |
| Descender line | Below, bottom of g, p, q, y | Space needed below lines of text |
Baseline grid and vertical rhythm
A baseline grid is a set of equally spaced horizontal lines to which the baselines of all text in a layout snap. Its interval normally equals the leading of the body text, for example a 16 px font set on a 24 px line height produces a 24 px grid. Headlines, captions and spacing values are then chosen as multiples or simple fractions of that interval.
The result is vertical rhythm: lines in adjacent columns sit at the same height, text on the front and back of a printed sheet aligns, and the page reads as a calm sequence of evenly spaced bands. In print, this alignment also reduces show-through, because lines on both sides of thin paper back each other exactly.
Strict grids require compromises. A heading that is 1.5 times the body size may need the line height of two grid units, and images must be sized or padded so that the text after them returns to the grid.
| Aspect | Print and page layout | Web and app interfaces |
|---|---|---|
| Grid support | Native baseline grid in layout applications | No native grid; emulated with spacing tokens |
| Line box model | Leading measured baseline to baseline | Line height splits extra space above and below text |
| Alignment across columns | Precise and expected | Approximate unless sizes are carefully controlled |
| Typical increment | Leading of body text, for example 12 pt | 4 px or 8 px spacing scale |
| Main risk | Rigid grid forces awkward heading spacing | Font metrics shift text off the intended line |
The baseline in CSS and interface layout
On the web, browsers do not place text on a baseline grid; they place it inside a line box whose height is set by line-height. The extra space beyond the font’s content area, called half-leading, is divided equally above and below the glyphs. Because each font has different ascender and descender metrics, the baseline position inside the line box varies from font to font, which is why the same layout can shift by a pixel or two when a web font replaces a fallback.
CSS still uses the baseline extensively. vertical-align: baseline is the default for inline content, flexbox and grid offer align-items: baseline and first baseline alignment, and the newer text-box-trim and text-box-edge properties can trim space above the cap height and below the baseline, making optical alignment with icons and containers far more predictable.
| Setting | Typical value | Effect |
|---|---|---|
| Body line height | 1.4 to 1.6 times the font size | Sets the basic baseline-to-baseline distance |
| Heading line height | 1.1 to 1.3 times the font size | Keeps multi-line headings compact |
| Spacing unit | 4 px or 8 px | Keeps margins in step with text rhythm |
| Baseline alignment in flex rows | align-items: baseline | Aligns labels and values of different sizes |
| Text box trimming | Trim to cap height and alphabetic baseline | Removes uneven space for precise alignment |
Baseline compared with related typographic terms
The baseline is closely tied to several neighboring concepts, and confusion between them causes many spacing errors. Leading is the distance between consecutive baselines, not the gap between lines of letters. X-height is measured from the baseline, so two fonts at the same point size can look very different in size. Baseline shift is a deliberate offset of individual characters, used for superscripts, subscripts and fine adjustments of symbols.
Not every writing system uses an alphabetic baseline. Devanagari and related scripts hang letters from a top line called the headline, and Chinese, Japanese and Korean fonts center glyphs within an ideographic em box. Multilingual layouts must therefore choose which baseline governs alignment, and OpenType provides a BASE table that lets fonts declare several baseline positions.
Common baseline mistakes and fixes
Most baseline problems are small individually but accumulate into a visibly untidy layout, especially in interfaces that combine many text sizes.
| Symptom | Cause | Fix |
|---|---|---|
| Label and value in a row look misaligned | Items aligned by box center, not baseline | Use baseline alignment for mixed sizes |
| Text sits too low inside buttons | Font metrics place uneven space above and below | Trim the text box or adjust padding optically |
| Columns drift out of step | Headings and images break the rhythm | Size spacing in multiples of the body leading |
| Layout jumps after the web font loads | Fallback font has different metrics | Match fallback metrics with size and ascent overrides |
| Superscripts disturb line spacing | Raised glyphs enlarge the line box | Use OpenType superior figures instead of baseline shift |
A practical recommendation is to treat baseline alignment as a priority for text that sits side by side, and to accept an approximate rhythm elsewhere. Pursuing a perfect pixel grid across an entire responsive interface usually costs more effort than it returns.
Understanding it simply
Remember the ruled lines in a school exercise book. You wrote each word so that the letters rested on the printed line, and only the tails of letters like g and y hung below it. The baseline is that line, except that in printed and digital text it is invisible.
Because all letters stand on it, the baseline is what designers use to line text up neatly, both within one sentence and across columns, captions and headings. When text looks slightly crooked next to other text, the baselines usually do not match.
Applied in practice
A product team is building a pricing card in a web application. The plan name is set in 14 px text, the price in 40 px, and the billing period in 14 px next to the price. With the flex row aligned by center, the small period text floats halfway up the large figure and the card looks unfinished.
The developer switches the row to baseline alignment, so the bottoms of the price digits and the period text sit on the same line. The team also sets body text to 16 px with a 24 px line height and spaces the card’s sections in multiples of 8 px.
The card now reads as one tidy line of information, and the price stays aligned even when the font loads late or a translated label becomes longer.