skip to content

In a design system, why should a text style's visual prominence be chosen independently of the heading level the text is exposed as?

level: middleimportance: must knowfreq 45%

answer

  1. two questions, two answers
  2. the outline versus the look
  3. users navigate by headings
  4. structure shown must be exposed
  5. big is not always a heading

basics

~20 s

Heading level describes the document outline that assistive technology users navigate, while a text style describes visual prominence. A card title may need level 3 but a small style, and a large fare is not a heading at all, so each is chosen separately.

solid answer

~50 s

Heading level and text style answer different questions. The **heading level** places text in the content's outline — what section it introduces and what it sits under — and screen reader users rely on it to list and jump between sections. The **text style** sets how prominent the text looks on this particular screen. If a system welds them together, so the level 2 heading always gets the second-largest style, teams either choose the wrong level to get the right look, breaking the outline, or accept the wrong look to keep the right level. WCAG 1.3.1 Info and Relationships (Level A) requires that structure conveyed through presentation be programmatically determinable, so text that functions as a heading must be exposed as one, whatever its size. Conversely, a large earnings figure in a ride-hailing driver app uses a display style but is data, not a heading.

go deeper

for a junior

Recall that heading level describes the outline and text style describes appearance, and that one must not be picked to get the other.

for a middle

Explain how welding styles to levels forces wrong levels or wrong looks, and what WCAG 1.3.1 requires of text that looks like a heading.

for a senior

Show you can review a screen for both its visual hierarchy and its heading outline, and fix components that couple the two.

for a principal

Discuss how the system's component contracts and style naming make the right separation the easy path across web and native teams.

## Two different questions Every piece of heading-like text involves two separate decisions, made for different audiences. | | Heading level | Text style | |---|---|---| | **Question it answers** | Where does this sit in the content's outline? | How prominent should this look here? | | **Who relies on it** | Assistive technology users navigating by headings, and anything that reads the structure | Sighted readers scanning the screen | | **Decided by** | The content's structure | The visual hierarchy of this layout | | **Example in a driver app** | Help article: page title level 1, section level 2, subsection level 3 | Earnings screen: the day's total in display, section titles in a small title style | Screen readers let users list the headings on a screen and jump between them, often by level, so the level is how a non-visual user understands the shape of the content. The text style is how a visual user understands it. Both must be right; neither can be derived from the other. ## What goes wrong when they are welded together Some systems name styles after heading levels and expect the level 2 heading to always use the level-2-looking style. That causes two failures: - **Wrong level for the right look.** A designer wants a small heading on a dense trip-history card, so the team exposes it as level 5 to get the small style, leaving gaps in the outline that make users wonder what they missed. - **Wrong look for the right level.** A section heading inside a compact sheet correctly sits at level 2, but inherits a very large style, so it dominates a small surface. - **Headings made from styling alone.** Text is made large and bold to look like a heading but never exposed as one, so screen reader users cannot find the section. - **Headings used for size.** Large promotional or numeric text is exposed as a heading just to get a big style, cluttering the outline with non-headings. ## What the standards say - **WCAG 2.2 success criterion 1.3.1 Info and Relationships (Level A):** information, structure and relationships conveyed through presentation can be programmatically determined or are available in text. Text that visually acts as a heading must be exposed as a heading. - **2.4.6 Headings and Labels (Level AA):** headings and labels describe topic or purpose — about the wording of headings, not their size. - **2.4.10 Section Headings (Level AAA):** section headings are used to organize the content. - **WAI-ARIA 1.2** defines a heading role that requires a level property, so that headings form a logical outline. None of these ties a level to a size. Keeping levels sequential, without jumping from level 2 to level 5, is widely recommended practice because users navigating by level infer structure from the numbers. ## Across platforms The separation holds on every platform. The web exposes numbered heading levels; some native mobile platforms expose a heading flag without a numbered level. In both cases the design system should let teams mark text as a heading, with a level where the platform supports one, independently of the style applied. ## How a system encodes the separation 1. **Name styles by prominence or role**, such as heading-large or title-small, not by level numbers that suggest a fixed pairing. 2. **Let components take the level and the style as separate choices**, with a sensible default style for each level that can be overridden. 3. **Document the rule** on the typography page: choose the level from the outline, the style from the layout. 4. **Check both in review**: the visual hierarchy by eye, the outline with a heading list from an accessibility inspection tool or a screen reader. ## Driver-app walk-through On the earnings screen, the day's total uses the display style and is not a heading — it is data. The screen title is level 1 in a heading style. The Trips and Tips sections are level 2 in a compact title style, because the screen is dense. In the help centre, the same level 2 might use a larger heading style, because an article page has room. Same level, different styles; same style, different levels — which is exactly the independence the system has to allow.

  • Should a design system still provide a default style per heading level?
    A default is helpful, because most pages can use it without thinking. The important part is that it is only a default: a component must let teams keep the correct level while choosing a different style for dense or unusual layouts.
  • A bold label above a group of settings looks like a heading. Must it be exposed as one?
    If it introduces a section of content, yes: under WCAG 1.3.1, structure shown visually must be programmatically determinable, and a heading is the usual way. If it only labels a single control, it should be that control's label instead. The deciding factor is its function, not its weight.
  • How does this work on platforms without numbered heading levels?
    The text is still marked as a heading so assistive technology can navigate to it, even without a number. The style is chosen independently exactly as on the web; the difference is only in how much outline detail the platform exposes.

saying these in an interview costs you the question

  • The largest text on a screen should always be the level 1 heading.
  • Choosing a deeper heading level is a fine way to get a smaller heading style.
  • Large bold text is enough to show structure without marking it as a heading.
  • WCAG requires each heading level to have a specific visual size.
  • Heading styles should be named after heading level numbers.