Constructing Typographic Hierarchy Using Size, Weight, Spacing, and Colour

Hierarchy is not a matter of taste but of measurement. A typographic hierarchy system fails when the differences between levels are too small to perceive. It also fails when they are too large and the page breaks apart. You are building a scale where each step signals its role through measurable contrasts in size, weight, and spacing. The early-career designer who relies on intuition will produce a page that looks like a mistake. The headline is 14% larger than body text, and a subhead is merely bold. The fix is to specify the relationship, not the size in isolation.

Start with a modular type scale. It is a sequence of sizes generated by multiplying a base size by a ratio. The ratio is the only decision you make, and it is not arbitrary. A minor third (1.2) is the minimum ratio that a reader can perceive as a distinct step. A major third (1.25) is safer. A perfect fourth (1.333) or golden ratio (1.618) gives dramatic separation. Tim Brown’s Modular Scale calculator, published with his 2010 A List Apart article “More Meaningful Typography”, automated this sequence. The principle predates the web. Robert Bringhurst’s The Elements of Typographic Style (v4.0, 2012) documents the classical scale, which uses ratios like 1.2 and 1.25. He recommends a minimum of three hierarchy levels: headline, subhead, and body. The maximum is five. More than five, and the reader loses track of which level outranks which. This is a documented limit. The human perceptual system can hold about five ordinal categories in working memory before requiring a return to the source.

Your body text is the anchor. Every other level scales from it by a factor. The minimum ratio for a perceptible difference between adjacent levels is 1.2:1, a figure that Ellen Lupton states in Thinking with Type (2nd ed., 2010). If your body text is 16 pixels, your next level up must be at least 19.2 pixels. Below that, the difference is absorbed by the eye’s inability to discriminate between two sizes that are too close. This is not a guideline to fudge. A 1.15 ratio will read as a mistake, a random glitch in the typesetting. The reader sees two sizes that look nearly identical and wonders why they are different. The contrast must signal a change in function, not merely a change in appearance. When you set a headline at 1.2× body size, you are meeting a perceptual threshold documented in design literature for over a decade.

Size is only half the equation. The font weight axis, registered in OpenType as the wght tag, gives you a second lever for hierarchy. A weight jump must cross at least two OpenType weight axis values to be perceptible. Going from Regular (400) to Medium (500) is insufficient. You need to move from Regular (400) to Bold (700), or from Light (300) to SemiBold (600). This concerns the resolving power of the human visual system. It requires a difference of roughly 200 units on the 100-to-900 axis before the change registers as a category shift. In a variable font, you have finer control. The minimum contrast principle holds: a 50-unit difference is invisible. For a heading hierarchy design, you might pair a 400-weight body with a 700-weight headline and a 600-weight subhead. You are not free to invent a custom weight and call it a level. If you set a headline in bold, you cannot then use semi-bold for a subhead and expect the hierarchy to read. The subhead will appear to be a mistake. The weight axis is a discrete set of perceptible steps, not a continuous gradient of emphasis.

Spacing is what glues a heading to its text. The rule is deceptively simple: the space before a heading must be greater than the space after it. If the space after a heading exceeds the space before, the heading floats between the previous block and its own. The reader cannot tell which text it belongs to. This is how the eye groups objects. Set your heading with a margin-top of 1.5× the body line-height and a margin-bottom of 0.5×. You create a strong association with the following paragraph. A baseline grid, where all type aligns to a repeating vertical interval, ensures that this spacing remains consistent across a page. Without it, adjacent columns drift out of register. Leading, measured in points in print or as a unitless line-height multiplier in CSS, must be applied consistently. A line-height of 1.5 (unitless) is a CSS Working Group recommendation in the CSS Inline Layout Module Level 3 (W3C Candidate Recommendation, 2023). A unitless value inherits correctly and scales with the font size.

Semantic HTML and Visual Levels

A heading hierarchy design is only as robust as its mapping to HTML heading levels. WCAG 2.2, the W3C Web Content Accessibility Guidelines published on 2023-10-05, requires that heading levels be nested without skipping. An H1 for the page title. An H2 for each major section. An H3 for subsections. If your visual hierarchy has five levels but your HTML only has three, you have broken the document outline. The reverse is also true. If you use an H2 for a visual subhead that is actually a body-text note, you have misled the screen reader. A hierarchy defined in CSS must map to HTML heading levels for WCAG 2.2 compliance. This is not negotiable.

Documenting the Visual Treatment

The style guide’s job is to describe the visual treatment of each level. It does not invent new levels that have no semantic counterpart. The visual hierarchy typography on the page is the reader’s first clue to the content structure. The HTML heading structure is the machine-readable version of that same scheme.

Colour can support a typographic hierarchy, but it cannot carry one. WCAG 2.2, Success Criterion 1.4.1 (Use of Color), is explicit. Colour alone is insufficient to convey meaning. A colour-blind reader cannot distinguish red from green if that is the only difference. If a subhead is a lighter grey than the body text, it must also be smaller or lighter in weight. Otherwise the hierarchy collapses for a user with a colour deficiency. This is not an edge case. Approximately 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. When you pair a colour change with a size change of 1.2× or a weight change of at least two axis steps, you meet the criterion. The contrast ratio matters more than the hue. Body text must be at least 4.5:1 against its background, and 3:1 for large text at 18pt or 14pt bold. Enhanced AAA compliance requires 7:1 for body and 4.5:1 for large. These are numeric thresholds published by the W3C.

Computing the Scale with Custom Properties

In CSS, specify the modular type scale with a custom property, for example --ratio: 1.25;. Then compute each level: --h1: calc(var(--h3) * var(--ratio) * var(--ratio)); --h2: calc(var(--h3) * var(--ratio)); --h3: 1rem;. This gives you a documented system where changing the ratio in one place updates every heading. The line-height for headings should be tighter than body text, typically 1.1 to 1.3. Display type does not need the generous leading of a paragraph.

Measure and Reflow Constraints

The measure for body text on screen should be 50 to 75 characters. For print, Bringhurst recommends 45 to 75 (The Elements of Typographic Style, v4.0, 2012). When you set a paragraph to a width beyond 75 characters, the eye cannot track the line back to the beginning. Reading speed drops. For WCAG 2.2 reflow compliance at a 320-pixel viewport, the maximum is 40 characters per line. This forces you to reflow content on small screens. This is legibility research that predates the web.

Here is the failure case. A designer sets H1 at 28px, H2 at 24px, H3 at 20px, and body at 16px. The ratios are 1.17, 1.2, and 1.25. The first step is below the perceptible threshold of 1.2. The H2 looks like a mistake, not a level. The headings have a margin-bottom of 24px and no margin-top. They float equidistant from the text above and below. The reader cannot tell which paragraph they introduce. Now apply the documented system. Choose a ratio of 1.25 (major third). Base body at 16px. H3 is 16 × 1.25 = 20px. H2 is 20 × 1.25 = 25px, but you cannot use 25 because it is not on the scale; use 25.6px or round to 26. H1 is 26 × 1.25 = 32.5, round to 32. Set line-height at 1.5 for body, 1.2 for H1 and H2. Margin: H1 has 2× line-height above, 0.5× below; H2 has 1.5× above, 0.5× below. The result is a page where each level is a distinct category. The spacing creates a clear association between a heading and its following text. This is the difference between typography as decoration and typography as a system.

The modular type scale ratio is the single most important number on the page. It is the ratio by which your type sizes increase. Choose it before you start designing. Tim Brown’s Modular Scale calculator (2010) will generate the sequence for you. It cannot tell you which ratio to pick. The golden ratio (1.618) gives a dramatic, editorial feel. A perfect fourth (1.333) is more restrained. A major third (1.25) is the workhorse of web design. For a hierarchy to be perceptible, the ratio cannot be below 1.2. The step between headline and body should be at least 2× for clear separation, a figure noted in Kimberly Elam’s Typographic Systems of Design (2007). In practice, your H1 is at least double your body size. Your H2 is at least 1.25× your body size. If you set body at 16px, your H1 is at least 32px. Your H2 is at least 20px. Document the ratio in your design tokens: --type-scale: 1.25;. Refer to it in the style guide. A reader should be able to reconstruct your entire hierarchy from that one number.

No typographic hierarchy is complete without reference to Robert Bringhurst. The Elements of Typographic Style (v4.0, 2012) is the canonical source for the classical scale. It recommends a leading range of 120% to 145% for body text in print, and 140% to 160% on screen. It also states that a maximum of five hierarchy levels is sufficient. Bringhurst addresses the measure: 45 to 75 characters per line for print. That number has not changed in the digital era. His book is not a style guide but a set of principles. It is the source for the minimum ratio of 1.2, which he notes is the smallest difference the eye can reliably detect. The book’s longevity comes from its insistence on measurement over opinion. Every rule is accompanied by a reason. Every reason is grounded in perception, not fashion. For the early-career designer, Bringhurst is the difference between guessing and knowing. He is also the source for the term “widow” (a single word on its own line at the end of a paragraph) and “orphan” (a line stranded at the top or bottom of a column). Both are failures of spacing that a well-crafted hierarchy eliminates.

Setting Leading for Readability

Leading and measure are the two variables that determine whether a paragraph is readable. Both must be set relative to the type size. For body text, set leading at 1.5× the point size, a unitless multiplier of 1.5 in CSS. This falls within the 120% to 145% range for print and the 140% to 160% range for screen recommended by Bringhurst.

Constructing the Baseline Grid

The baseline grid ensures that all lines of text align across columns. It prevents the rag from becoming distracting. To set a baseline grid in CSS, use a line-height that divides evenly into the grid unit. For example, a 24px grid with a body line-height of 24px and a heading line-height of 24px or 48px. The measure, at 50 to 75 characters per line for screen, is a function of the font size and the column width. It cannot be left to chance. If the measure is too long, the eye loses the line. Too short, and the text becomes choppy. The CSS Working Group’s recommendation of a unitless line-height (CSS Inline Layout Module Level 3, 2023) exists so that the multiplier scales when the font size changes.

Kerning and tracking are not interchangeable. Kerning adjusts space between a specific pair of characters, such as ‘AV’. Tracking adjusts space uniformly across a range of characters. In a heading, kerning is often set to optical, which ignores the font’s built-in pair tables and adjusts based on character outlines. In body text, metrics kerning uses the type designer’s original pair tables. The wrong choice causes uneven spacing in display type, particularly in large sizes. Tracking is best used sparingly. Never apply it to body text. It destroys the colour of the paragraph. Small caps, used for abbreviations or a run of acronyms, should be true small caps drawn by the font designer. Scaled-down capitals are thinner and have the wrong colour. Figure style matters too. Old-style figures, with ascenders and descenders, are for body text. Lining figures, all on the baseline, are for tables and headings. These details are the difference between a hierarchy that reads as intentional and one that reads as amateur.

Two design systems are often cited as the authority on type hierarchy: Material Design 3 and the Apple Human Interface Guidelines (HIG). They are not the source of the principle. They are implementations of it. The Material Design 3 type scale defines 15 levels, from Display (large) to Label (small). Each has a specific font size, line-height, and weight. The underlying ratios are the same as a modular scale derived from a base of 12 or 14 pixels. The Apple HIG similarly specifies a set of text styles. It explicitly warns against using font size alone to convey hierarchy, echoing Bringhurst and Lupton. Neither system invents a new principle. They operationalize a documented one for their respective platforms. When you encounter a question about whether to use an H2 or an H3 for a particular text style, the answer comes from the content’s semantic importance. It does not come from the platform’s defaults. The CSS heading levels are the structure. The design system is the visual skin. A designer who copies Material’s scale verbatim without regard for the content’s hierarchy is missing the point.

The Web Content Accessibility Guidelines (WCAG) 2.2, published by the W3C on 2023-10-05, do not mandate a specific visual hierarchy. They do require that heading levels convey structure. Success Criterion 1.3.1 (Info and Relationships) requires that the heading level reflect the content’s nesting. An H2 is a major section. An H3 is a subsection. Skipping from H2 to H4 is a failure. Using a visual style that looks like a heading but is marked up as a paragraph is also a failure. This is not a theoretical concern. Screen reader users navigate by heading levels. A page with a flat heading structure is effectively unnavigable. The visual hierarchy typography on the page must match the HTML heading levels. If it does not, you have failed the sighted reader, who sees one thing and reads another. You have also failed the assistive technology user, who gets a nonsensical outline. WCAG 2.2 also specifies contrast ratios: 4.5:1 for body text, 3:1 for large text at 18pt or 14pt bold. Higher ratios apply for AAA compliance. These are checkpoints for conformance.

Variable fonts introduce the font weight axis, registered in OpenType as wght. A single file contains a range of weights, from 100 (Thin) to 900 (Black). This gives you finer control than a static family. It also creates a trap. With 800 possible weights, the temptation is to fine-tune a headline from 700 to 780. That change is imperceptible. The minimum difference for a perceptible weight change is two axis steps, for example 400 to 600. This applies to variable and static fonts alike. The OpenType specification also includes wdth (width), opsz (optical size), and ital (italic). For hierarchy, wght is the most useful. When you load a variable font, declare the axis in CSS using font-variation-settings. Provide a fallback for browsers that do not support the syntax. The risk is that all text renders at the default weight. That flattens the hierarchy into a single block. Test on an old browser. If the hierarchy collapses, the variable font has failed the page.

A widow is a single word on its own line at the end of a paragraph. An orphan is a line stranded at the top of a new page or column. The rag is the uneven right edge of a left-aligned block. All three are failures of spacing that a well-crafted hierarchy eliminates. A widow is a visual accident that draws the eye away from the content and towards the white space. Fix it by rephrasing a line, adjusting the measure, or adding a soft hyphen. An orphan is a structural failure that occurs when a page or column breaks. Fix it by inserting a page break or adjusting the leading. The rag is controlled by the measure and the font’s metrics. A rag that is too even looks like justified text that has failed. A rag that is too jagged looks arbitrary. The solution is to set the measure to 50 to 75 characters per line. This brings the rag under control. Use hyphenation sparingly. These are legibility requirements documented since the metal-type era.

When you design a heading hierarchy, you will be tempted to use a Unicode character that visually resembles a heading style. Examples include the section sign (§) for a subhead or a right-pointing arrow (→) for a callout. Do not do this. Unicode code points are stable, but their glyphs vary by font. A character that looks like a heading mark in one typeface may be an obscure mathematical symbol in another. Worse, a screen reader will not announce a heading that is not marked up as a heading. A section sign inside a paragraph is invisible to assistive technology. If you need a marker, use a CSS pseudo-element (::before) with a text-indent. This allows you to style the marker separately from the content. The principle that a logo must exist in a vector format (SVG, EPS, or AI) applies here as well. Never rely on a glyph that is not part of the font’s Unicode range. The font may not be loaded, and the character will render as a box. The heading structure must be semantic, not ornamental.

You have set the scale, the weight, and the spacing. The page still looks wrong. The cause is almost always a single violation. A line-height that is too tight for a heading, so the descender collides with the next line. Or a margin that is symmetrical when it should be asymmetric, so the heading floats. The fix is to go back to the documented system and check every value. Is the H1 at least 1.2× the H2? Is the H2 at least 1.2× the body? Is the space before the heading at least 1.5× the space after? If any answer is no, you have found the culprit. The most common mistake is to reduce a margin to save vertical space. That is the wrong instinct. The space is not wasted. It is the glue that holds the hierarchy together. The other failure is to use a weight that is too close to the body. For example, 500 for a heading when the body is 400. A 100-unit difference is imperceptible. The heading will not read as a heading. The solution is to tear down the hierarchy. Start with the body text. Apply the ratio, the weight jump, and the spacing rule from scratch.

• What is the minimum size ratio between heading levels? The minimum ratio is 1.2:1, which is the smallest difference the eye can perceive as a distinct step. This is documented by Ellen Lupton in Thinking with Type (2010).
• How many hierarchy levels should I use? A minimum of three (headline, subhead, body) and a maximum of five. More than five levels create confusion, as documented by Robert Bringhurst in The Elements of Typographic Style (2012).
• What is the required contrast ratio for body text? WCAG 2.2 requires 4.5:1 for body text under 18pt, and 3:1 for large text (18pt or 14pt bold). For AAA, the ratio increases to 7:1 and 4.5:1 respectively.
• How do I choose a modular scale ratio? Pick a ratio between 1.2 and 1.333 for a pragmatic web scale, or 1.618 for a more dramatic editorial feel. Tim Brown’s Modular Scale calculator (2010) will generate the sequence for you.
• Should I use colour to differentiate heading levels? No. Colour alone is insufficient for hierarchy, per WCAG 2.2 Success Criterion 1.4.1. Always pair colour with a size or weight difference.
• What is the correct line-height for body text? Use a unitless multiplier between 1.4 and 1.6 for screen, with 1.5 as a safe default. This is recommended by the CSS Inline Layout Module Level 3 (W3C, 2023) for inheritance reasons.
• How long should a line of text be? For screen, 50 to 75 characters per line, with a maximum of 40 characters for WCAG 2.2 reflow compliance at a 320-pixel viewport. This comes from Robert Bringhurst’s work, and is not a matter of taste.