Why is a caption below 11px risky?

Because small text is where legibility fails first, and a phone held at reading distance makes an 9px caption genuinely hard to read even at high contrast. The panel flags anything under 11px rather than blocking it, since a print-oriented design can legitimately go smaller. The safer pattern is to keep the caption at 12px or above and separate it from the heading by weight and colour instead.

What does the two-step-below convention mean numerically?

It means the caption sits roughly two steps down a type scale from its heading, which the ratio readout expresses as a multiple. With a heading at 36px and a caption at 13px the ratio is about 2.8 times. When the ratio drops below about two, the caption starts to compete with the heading; when it climbs above four, the caption reads as a detached footnote rather than part of the figure.

Can the caption use the same face as the heading?

Yes, and the same-face readout tells you what that costs. The roles then have to separate by weight and colour, which the composition demonstrates with a 600-weight heading and a muted caption. A single-family system is common and reads as disciplined rather than lazy, provided the weight difference is real rather than nominal.

Why is the caption a muted colour by default?

Because a caption is supporting information, and colour is the cheapest way to say so without dropping the size further. The muted token is applied in the exported rule, which means the caption's contrast is inherited from the design system rather than measured here. A caption that has to remain legible at small size should be checked against its real background elsewhere.

Should the heading inside a figure be a real heading element?

It should be marked up so the structure survives: a figure with a caption belongs together, and the text above it is usually a heading level appropriate to the document rather than a decorative line. The exported CSS styles the two roles, and the markup decision is left to the implementation. The pair of rules is written separately for exactly that reason.

Heading + Caption Pairing

Faces & sizes

Heading face

Caption faceHeading textCaption text

Heading sizepx

Caption sizepx

Heading ÷ caption2.77×

Caption floorsafe size

Same face?different faces

Figure composition

Figure 1 — Pairing a heading with a caption

image / chart

Caption sits two steps below the heading in size and usually lighter in weight.

css output

figure h2 {
  font-family: 'Fraunces', serif;
  font-size: 2.2500rem;
  line-height: 1.2;
}
figure figcaption {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

You Might Also Need

Display + Body Pairing Tool

Pair display with readable body

Serif + Sans Pairing Tool

Classic serif and sans combos

Type Hierarchy Planner

Plan headings and body sizes

Caption & Footnote Scale

Scale captions and footnotes

The heading and caption pairing renders the classic figure unit as one composition: a heading, an image slot and a caption beneath it. Captions are the smallest type a design uses, so the face that pairs with a heading is rarely the same one used for body copy.

What is Heading + Caption Pairing?

The heading caption pairing takes a heading face and a caption face, with a size for each, and renders them together in the figure unit a document actually uses.

Both slots draw on the whole catalogue, so a display face can be paired with a serif caption or a sans heading with a monospace caption.
Heading size runs from 16px to 96px and the caption from 8px to 24px, defaulting to 36px and 13px.
The composition renders the heading, a dashed image slot and the caption in that order, so the vertical relationship is judged rather than just the two faces.
The ratio of heading to caption size is reported, which is the figure that decides whether the caption reads as a caption.
A caption floor check flags anything below 11px as risky on mobile, and a same-face check reports when both slots hold the same family.

The two-step rule behind the tool is what the size ratio measures. A caption conventionally sits about two steps below its heading on the scale, and when the gap is too small the caption competes with the heading for attention while a gap that is too large makes the caption read as a footnote. Because the heading is set at weight 600 and the caption is drawn in a muted colour with a looser leading, the composition also shows the two other levers that separate the roles when the faces happen to be the same: weight and colour. That is what the same-face check exists for. A single-family system is entirely workable, and the panel states the alternative explicitly rather than leaving the user to guess: vary the weight or the colour, or accept that the caption will read as part of the heading. The exported CSS writes the two rules separately, so the figure element and its caption can be styled without touching the prose.

The image slot is a placeholder rectangle, so nothing checks how a real photograph or chart interacts with the heading's weight.
Only two roles are modelled, so the body copy between the heading and the caption is not shown even though a figure usually sits inside a paragraph flow.
The caption colour is a muted foreground token rather than a value you set, so a caption's contrast against the real background is not measured.
The suggested sizes are defaults rather than derived from a scale, so a project with its own ladder should enter its own values.
Nothing reports the two faces' x-heights, so a caption whose lowercase is disproportionately small or large is not flagged.

Use it when a figure, a chart or a table needs a caption styled against the heading above it, when a caption has drifted to a size that competes with the heading, or when the same family is being used for both roles and the separation has to come from weight and colour. Where the display and body relationship is the question rather than heading and caption, the display body pairing tool reports the size ratio for a hero composition. The display and body pairing tool covers the hero case, the serif and sans pairing tool covers heading over body, and the caption and footnote scale derives the sizes from a scale rather than from defaults.

How to use Heading + Caption Pairing

Choose the heading face and the caption face, watching the same-face readout since that determines whether weight and colour must do the work.
Paste a real heading and a real caption, because the ratio reads differently on a long caption than on a short one.
Set the heading size and caption size and read the ratio, keeping the caption above the 11px floor for mobile.
Adjust weight and colour if both slots share a family, then copy the two CSS rules into the figure styles.

When to use Heading + Caption Pairing vs related tools

Reach for it when a figure, chart or table needs a caption styled against the heading above it, when a caption has grown to a size that competes with its heading, or when one family is doing both jobs and the separation needs checking. It is the third role most designs forget to pair deliberately. For the hero and body relationship the display body pairing tool is the closer tool, the serif sans pairing tool covers heading over body copy, and the caption and footnote scale derives caption sizes from a type scale rather than leaving them to be chosen.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.