Baseline Grid: Aligning Text for Vertical Rhythm

WHY IT EXISTS: Without a system, vertical spacing in a design becomes arbitrary. Elements can feel disconnected, and text can be hard to read. A baseline grid was created to impose a consistent vertical structure, ensuring a harmonious and readable layout by improving the design's hierarchy and consistency.

THE MENTAL MODEL: A baseline grid is like the lines on a sheet of ruled paper, but for your digital design. It's an underlying set of evenly spaced horizontal lines, or rows. The primary goal is to align the baseline—the invisible line upon which text rests—of different text elements to these grid lines. This creates a pleasing vertical rhythm, making the entire composition feel more orderly and professional.

HOW IT WORKS: In a tool like Figma, you set up a layout grid of rows with a specific height (the "grid unit," often 4px or 8px) and zero gutter. Then, you adjust the line-height of your text styles and the vertical margins between elements to be multiples of this grid unit. For example, with an 8px grid, your body text might have a 24px line-height (3 * 8), and the space above a heading might be 32px (4 * 8). This forces every element's baseline to land squarely on a grid line.

WHEN TO USE IT: Use a baseline grid for any interface where typography is critical and readability is paramount. It's especially valuable in long-form content like articles, documentation, or marketing sites. It provides structure and consistency, which helps users navigate dense information more easily and makes the design more adaptable.

WHEN NOT TO USE IT: For highly artistic, component-sparse, or collage-style layouts, a strict baseline grid might be too restrictive. It can also be overkill for simple dashboards or tool UIs where horizontal density is more important than vertical typographic rhythm. The focus there is often on component alignment within a container, not on a page-wide text flow.

ONE CANONICAL EXAMPLE: In a blog post layout, you have a main heading (H1), subheadings (H3), body paragraphs, and image captions. Using an 8px baseline grid, you'd set the body text line-height to 24px, the H3 line-height to 32px, and the caption line-height to 16px. The space between the paragraph and the next H3 might be 48px. All these values are multiples of 8, ensuring every line of text across the entire page aligns to the invisible 8px grid, creating a clean, readable flow.