A baseline grid is a set of evenly spaced horizontal lines, usually derived from the body text leading, on which the baselines of text are aligned across a page or screen. In layout and grids, it governs the vertical rhythm of a design, so that lines of text in neighboring columns line up and spacing between elements follows one consistent unit.
Where a column grid divides space horizontally, a baseline grid divides it vertically. Together they form the coordinate system of a modular grid. The baseline grid originated in print typography, where aligned lines across columns and back-to-back registration of pages were signs of careful craft, and it was later adapted to screen design.
How a baseline grid creates vertical rhythm
The grid increment is normally equal to the leading of the body text, the distance from one baseline to the next. With 16 point type set on 24 point leading, the baseline grid lines sit 24 points apart, and every line of body text falls on one of them.
Everything else is then sized in multiples or simple fractions of that increment. Headings receive leading of two grid units, space above a section equals one or two units, and images are sized so that their height is a whole number of units. As a result, text resumes on the grid after every interruption, and columns placed side by side stay aligned line for line.
The table below shows how a typical type scale maps onto a 24 point baseline grid.
| Text style | Font size | Leading | Grid units |
|---|---|---|---|
| Caption | 12 pt | 12 pt | 0.5 (half-line grid) |
| Body text | 16 pt | 24 pt | 1 |
| Subheading | 20 pt | 24 pt | 1 |
| Section heading | 28 pt | 48 pt | 2 |
| Display heading | 48 pt | 72 pt | 3 |
Many designers use a half-line or quarter-line subdivision, such as 12 or 6 points on a 24 point grid. Subdivisions give more flexibility for small text and tight spacing while still keeping elements in a predictable relationship to the main rhythm.
Key parameters and how to choose them
Setting up a baseline grid requires a few connected decisions. Choosing them in the right order prevents later conflicts between type sizes and the grid increment.
| Parameter | Typical range | What it affects |
|---|---|---|
| Increment | 4 to 8 px on screen, 10 to 14 pt in print | Fineness of vertical spacing choices |
| Body leading | 1.3 to 1.6 times the font size | Readability and the base rhythm |
| Starting offset | Distance from top margin to first baseline | Whether the first line aligns with column tops |
| Subdivision | Full, half or quarter line | Flexibility for small text and spacing |
| Margin alignment | Bottom margin set to whole grid units | Consistent text block depth |
A practical order is: choose the body font size, set comfortable leading for it, adopt that leading or a divisor of it as the increment, and only then define heading sizes and spacing. Choosing an increment first and forcing body text onto it often produces leading that is too tight or too loose.
Baseline grids in print and on screen
The baseline grid behaves differently in print layout software and in web or app interfaces, because the two media position text in different ways.
| Aspect | Print layout | Screen interfaces |
|---|---|---|
| Text positioning | Baselines snap to grid in layout software | Text sits in a line box centered on leading |
| Typical unit | Points, often 10 to 14 pt increments | Pixels, commonly a 4 px or 8 px base |
| Enforcement | Built-in align-to-grid feature | Manual spacing, tokens or newer CSS features |
| Content flow | Fixed page, known content | Variable content, user font scaling |
| Precision achievable | Exact baseline alignment | Approximate rhythm in most cases |
In CSS, text is placed inside a line box whose height equals the line height, with the glyphs positioned according to font metrics. The baseline therefore lands at a font-dependent offset rather than on a grid line. Interface designers usually settle for a 4 px or 8 px spacing system, sizing line heights and spacing in multiples of the unit, which approximates rhythm without exact baseline alignment. The CSS text-box-trim property, which trims space above and below text to font metrics, makes closer alignment possible where browsers support it.
Baseline grid compared with other grid types
The baseline grid is one layer of a complete grid system, not an alternative to column-based structures. Its relationship to neighboring grid types is summarized below.
| Grid type | Direction | Main purpose |
|---|---|---|
| Baseline grid | Horizontal lines, vertical rhythm | Align text lines and vertical spacing |
| Column grid | Vertical columns and gutters | Organize content width |
| Modular grid | Columns plus rows | Place content in repeatable modules |
| Responsive grid | Columns that change by breakpoint | Adapt layout to screen width |
In a well-built modular grid, row heights are whole multiples of the baseline increment, plus the gutters between rows. This connection lets images, captions and text blocks share the same horizontal edges.
Limitations and common mistakes
A baseline grid improves order, but strict adherence has costs, especially with mixed content and digital constraints.
- Forcing headings onto awkward leading, which separates a heading from its paragraph or crowds multi-line headings.
- Ignoring images and rules, whose heights break the rhythm unless they are sized in grid units.
- Choosing too coarse an increment, which leaves only large spacing steps and makes layouts feel loose.
- Expecting pixel-perfect alignment on the web, where font metrics and user zoom shift baselines.
- Treating the grid as visible decoration instead of an invisible guide that readers should feel, not see.
Experienced designers often treat the baseline grid as strict for body text and flexible for exceptions. Body copy across columns aligns exactly, while large display headings may deviate slightly when optical balance matters more than mechanical alignment.
Stripped to the essentials
A baseline grid is like the ruled lines in a school notebook. Every line of text sits on one of those invisible lines. Spaces between paragraphs and headings are measured in whole lines.
This makes a page feel calm and orderly. When text runs in two columns side by side, the lines match up across the gap. The reader may never notice the grid. They simply find the page easier and more pleasant to read.
Where it is applied
A designer laying out a three-column quarterly magazine sets body text at 9.5 point on 12 point leading and defines a 12 point baseline grid in the layout software. Section headings use 24 point leading, pull quotes use 18 point type on 24 point leading, and image heights are cropped to whole multiples of 12 points plus the gutter.
When an editor adds a caption in one column, the text below it still returns to the grid, so lines across all three columns stay aligned from top to bottom. Because the same grid applies to both sides of each sheet, lines also back up through the thin paper, which reduces show-through and visual noise and gives the printed issue a noticeably cleaner appearance.