This is a typography-first layout system where everything aligns to a baseline grid. Each line of text defines the fundamental rhythm of the page.
The canonical line height is set to 1.5rem, and all spacing—margins, padding, and even element heights—are multiples of this base unit. This creates a harmonious vertical rhythm that’s both aesthetically pleasing and functionally elegant.
How It Works
Every element on the page respects the grid. Paragraphs, headings, lists, and even images align to these invisible lines. The blue horizontal lines you see are a visual overlay for development—they show exactly where each baseline sits.
Notice how this paragraph sits perfectly on the grid lines. The spacing between paragraphs is exactly one line unit, maintaining the rhythm throughout the entire page.
Typography at Scale
Larger text requires more vertical space. A heading might occupy two or three line units while still maintaining grid alignment. This ensures that no matter the font size, everything stays locked to the same underlying structure.
- List items align to the grid
- Each item takes up exactly one line unit
- The spacing feels natural and consistent
This system makes it trivial to calculate reading metrics. Since we know exactly how many lines exist and can measure words per line, we can accurately estimate page counts, reading time, and progress through the document.
“Good typography is invisible. Great typography creates a rhythm so natural that readers don’t notice it—they just feel it.”
The Foundation
This baseline grid is the foundation for more complex features: dynamic word counting, live progress tracking, and viewport-aware page estimation. Everything builds from these simple, aligned lines.
Try resizing your browser window. The grid adapts, but the rhythm remains. That’s the power of constraint-based design.