BaselineGrid

Baseline grid is a vertical rhythm framework used in typography and page layout to align the baselines of text and other horizontal elements on a common set of horizontal lines. By standardizing vertical spacing, it creates visual coherence, improves readability, and helps maintain consistency across pages and screens. The grid is built from a baseline unit, the distance between successive baselines, which typically equals a fixed multiple of the body text’s line-height. Paragraphs, captions, headings, and images are positioned so that their baselines or edges align with grid lines, producing a regular flow of vertical space.

In practice, designers choose a baseline unit appropriate to the type scale and set line-height and margins to align with the grid. The result is a predictable vertical rhythm that persists across pages and components. The baseline grid can be applied across print and digital projects, from editorial layouts to user interfaces, to ensure that typographic blocks and graphic elements sit on coherent horizontal anchors.

On the web, achieving a baseline grid requires deliberate typographic choices and layout constraints. Techniques include fixing the line-height to a consistent multiple, using margins and paddings that are multiples of the grid unit, and employing CSS layout systems to keep elements aligned. Many design systems formalize a typographic scale and vertical rhythm to preserve the grid across responsive breakpoints.

Limitations include rigidity when accommodating fluid typography, variable fonts, or multilingual text with different baselines. In some projects, strict adherence to a baseline grid can hinder flexibility, so designers may relax constraints for certain sections while preserving overall visual rhythm.