In a design system, what is a baseline grid, and why do many product interfaces choose not to enforce one strictly?

## What a baseline grid is Every line of text sits on an invisible line called the **baseline**: the bottom of letters such as x and n, above the descenders of g and p. A **baseline grid** is a set of horizontal lines spaced at a fixed interval, commonly 4 or 8 units, and the rule is that **every baseline of every text block lands on one of them**. When it holds, text in neighbouring columns aligns line for line, even when the columns use different text sizes, and every vertical space on the page is a multiple of the interval. ## Where it comes from and where it shines Baseline grids are a print and editorial technique. They suit: - **Multi-column reading layouts**, where a reader's eye crosses between columns. - **Long-form content**, such as a detailed job description or a hiring guide, read top to bottom for minutes at a time. - **Fixed compositions** designed once and viewed as designed. ## Why product interfaces often do not enforce it | Cost | Why it hurts in a product interface | |---|---| | Font metrics | the distance from a text box's top to its baseline differs per font and size, so every style needs its own offset | | Mixed components | a row with an avatar, a name and a status chip mixes heights that do not naturally sit on baselines | | Scalable text | when a user raises their text size, line heights change and baselines leave the grid | | Dynamic content | a recruiter's note of any length, or a table row that wraps, shifts everything below it | | Tooling | design editors and most layout systems measure boxes, not baselines, so enforcement is manual | | Multiple scripts | fonts for other writing systems have different metrics, so one set of offsets does not fit all | The result is a technique that is expensive to hold and fragile once content is real. ## The softer alternative most systems use Instead of aligning baselines, many systems keep a **soft vertical rhythm**: 1. Line heights sit on the base unit, so every text block is a whole number of units tall. 2. Component heights are line height plus inset, so they land on the unit too. 3. Spacing between elements comes from the spacing scale. That keeps vertical measurements predictable without depending on font metrics. Text in adjacent columns will not always align line for line, but the page still feels ordered. ## When to keep a strict baseline grid - **Editorial or marketing pages** built from a small set of text styles, where the payoff is visible. - **Documents** such as printable offer letters, where the layout is fixed and print conventions apply. - **Side-by-side reading**, such as comparing two candidates' written answers, where line-for-line alignment genuinely helps. Even there, the system should decide and document what happens when a user raises the text size, because strict alignment cannot survive arbitrary scaling. ## How to decide - Ask whether users read across columns line by line. If not, baseline alignment adds cost with little benefit. - Count the text styles and fonts that would need offsets. Each one adds maintenance. - Check whether the platform and design tools can hold the alignment automatically, or whether every screen will need manual adjustment. - Prefer the soft rhythm by default, and treat strict baselines as an opt-in for surfaces that earn it. ## Relationship to the column grid A column grid organises the page horizontally; a baseline grid organises text vertically. They are independent choices. Most product systems enforce the column grid firmly and treat the baseline grid as optional, because horizontal alignment across components is visible everywhere, while baseline alignment across columns matters mainly on reading surfaces. ## An example from an applicant-tracking tool The candidate comparison view shows two candidates' written answers side by side. Here a baseline grid earns its keep: when both columns use the body style on the same baselines, a recruiter can read across and compare answers line by line. The rest of the product, including the pipeline board, the candidate table and the scheduling screens, uses only the soft rhythm, because their rows mix avatars, chips and text of different sizes, and their content changes with every candidate. The system documents the comparison view as the one opt-in surface, and states that at larger user text sizes the columns simply stop aligning line for line.