Baseline grid

A baselineBaselinetypographyThe invisible line that letters sit on. gridGridlayoutAn invisible structure of columns and rows that aligns content. is a set of equally-spaced horizontal lines running down the page. Every text line, image, and component aligns to one of these lines. The page feels neat and predictable.

Most teams pick an 8-pixel baselineBaselinetypographyThe invisible line that letters sit on. (sometimes 4 or 16). Spacing, padding, and component heights all become multiples of that number — 8, 16, 24, 32. The math stays simple, and pixel-perfect alignment becomes automatic.

A baselineBaselinetypographyThe invisible line that letters sit on. gridGridlayoutAn invisible structure of columns and rows that aligns content. pairs naturally with vertical rhythmRhythmlayoutA repeating pattern of spacing that gives a layout flow.. Once your text and components share the same rhythm, scrolling through the page feels calm instead of chaotic.