The Carpenter's First Square Stroke: On the Unswerving Line of a Baseline Grid
We talk a lot about keeping things stable—CLS, layout shifts, the jarring jump of a late-loading banner. But so much of that reactive work is spent shoring up walls after the foundation has already settled unevenly. There’s a quieter, more fundamental craft that precedes it all: the act of establishing a vertical rhythm so consistent that every element you place, from the first line of a paragraph to the last icon in a footer, finds its place without a fight. This is the baseline grid. It is not a browser feature or a performance API. It is a discipline, a self-imposed constraint that yields a profound, almost physical, sense of calm.
Implementing it is simple, but it requires a shift in perspective. You begin not with components, but with a single, foundational measurement. Decide on your base line-height—say, 1.5rem or 24px. This is your unit of vertical space, your grid’s increment. Every piece of typography in your design must then respect this rhythm. Set your body text’s line-height to that unit. For a heading, if the font’s natural size would force a line-height of, say, 1.2, you don’t use it. Instead, you adjust the heading’s margin-top and margin-bottom—and potentially its line-height—so that its total vertical footprint is a multiple of that base unit. A heading might sit on three grid lines, followed by a paragraph that sits on the next five.
The technique’s power emerges in the cascade. When every element—margins, padding, the height of a button or a card—snaps to this same underlying rhythm, the entire page begins to move as one. There is no longer a 17px margin here and a 1.2em line-height there, creating fractional, dissonant gaps. The visual noise of misaligned text blocks evaporates. More crucially for performance, this rigor eliminates a primary source of layout instability during the initial render: the browser no longer needs to constantly re-flow content as it discovers disparate, competing spacing values. It paints lines of text and the spaces between them that are mathematically harmonious.
This isn’t about pixel-perfection for its own sake. It’s about creating a predictable scaffold. When you later add a dynamic component—a banner that loads in, a notification that appears—you know exactly how many grid units it should occupy. You can reserve the space, or animate its entrance, without breaking the established flow. The baseline grid becomes your page’s true north, a constant you can design against. It is the carpenter’s first chalk line, snapped across the framing lumber. Every subsequent cut and nail finds its reference in that single, unswearing stroke. The result is a page that doesn’t just feel fast because it loads quickly, but because it reads smoothly, scans effortlessly, and stands utterly still from the first painted pixel.
Notes & further reading
A few pages I came back to while writing this: