Mastering Typography and Grid Systems
Typographic Hierarchy Systems
Building a Typographic System
A well-designed page doesn't happen by accident. The relationship between a headline, a sub-headline, and the body text is governed by a system. This system, or typographic hierarchy, tells the reader what's important and where to look first. Instead of picking font sizes that simply 'feel right,' we can use mathematical relationships to create harmony and consistency.
This is where modular scales come in. A modular scale is a sequence of numbers that relate to one another through a common ratio. By choosing a base font size and a ratio, you can generate a set of perfectly proportional font sizes for your entire design. Common ratios include the (1.618), the Perfect Fourth (1.333), and the Major Third (1.250).
Using a modular scale ensures that the visual relationships between your text elements are consistent, predictable, and pleasing to the eye.
Let’s build a simple scale. If our base body text is 16px and we use the Major Third ratio (1.250), we can generate sizes for headings by multiplying, and sizes for smaller text (like captions) by dividing.
| Element | Calculation | Result (rounded) |
|---|---|---|
| H1 (Step +3) | 16px * 1.250³ | 31px |
| H2 (Step +2) | 16px * 1.250² | 25px |
| H3 (Step +1) | 16px * 1.250¹ | 20px |
| Body (Base) | 16px | 16px |
| Caption (Step -1) | 16px / 1.250¹ | 13px |
Establishing Vertical Rhythm
Hierarchy isn't just about font size. The vertical space between lines of text is just as important for creating a clean, readable layout. This is called vertical rhythm. The key to achieving it is the baseline grid.
A baseline grid is an invisible set of horizontal lines that dictates where text should sit. Think of it like the lines on a piece of notebook paper. By aligning the baseline of every line of text to this grid, you create a consistent vertical flow, no matter the font size or column. This brings a sense of order and professionalism to the page, especially in layouts with dense information.
The primary tool for aligning text to the grid is line height, or as it was called in the days of metal type. To establish a baseline grid, you typically choose a base line-height value—say, 24px. Then, all other line heights, margins, and paddings should be multiples of this value (e.g., 24px, 48px, 72px). This ensures everything locks into the same underlying rhythm.
/* A simple CSS example for a baseline grid */
body {
font-size: 16px;
line-height: 24px; /* Our baseline grid unit */
}
h1 {
font-size: 32px;
line-height: 48px; /* Multiple of 24px */
margin-bottom: 24px; /* Multiple of 24px */
}
Contrast Beyond Size
In dense information environments, relying solely on size for contrast can lead to clunky, oversized headings. A sophisticated hierarchy also uses other properties to guide the reader's eye. Weight (bold, regular, light), style (italic), and colour can create clear distinctions without dramatically altering the scale.
For example, a sub-headline might be the same size as the body text but set in a bold weight or a different colour. This creates a clear separation of information while maintaining a subtle, clean aesthetic.
By combining a mathematical modular scale for font sizes with a strict baseline grid for vertical rhythm, you can create complex, information-rich layouts that are clear, organized, and easy for anyone to read.
Time to check what you've learned.
What is the primary purpose of a typographic hierarchy?
If your base font size for body text is 16px and you use the Major Third (1.250) ratio, what would be the font size for the next level of heading?
These principles form the foundation of professional layout design, allowing for both creative expression and clear communication.