What ratio should a hero headline have against its body copy?

Somewhere between two and five times the body size. Below twice, the headline does not dominate and the composition reads as a paragraph with a larger first sentence; above five, the jump starts to look like two different documents stacked. The band is wide because a narrow display face can carry a smaller jump than a wide one.

Why is a display face different from a serif in the heading role?

Because it is drawn for a few words. A display face carries tightly spaced capitals and heavy forms that look confident at three words and crowded at twelve, while a serif heading scales down towards text sizes without losing its composure. That is why the classification is reported next to the size: the same headline length suits the two faces at different sizes.

How does the exported hero rule handle screen sizes?

It writes the display size as a clamp with a minimum, a viewport-relative middle value and the chosen maximum, so the headline shrinks on a narrow screen while the body copy stays fixed in rem. The middle value is set from the current display size, so a project with unusual breakpoints should adjust it rather than adopt it as written.

Why does the letter spacing depend on the classification?

Because display forms and serif forms need opposite corrections at large sizes. A condensed or heavy display face usually wants a little positive tracking to stop the caps colliding, while a serif heading at the same size usually wants slightly negative tracking because the type was designed for text sizes where the sidebearings are more generous.

Can the body copy be a serif too?

Yes, the body role accepts both sans and serif faces, and a serif body under a display heading is a common editorial arrangement. What changes is the contrast: a serif body under a serif heading leaves the hierarchy resting on size and weight alone, so the size ratio matters more than it does in a mixed pairing.

Display + Body Pairing Tool

Faces & sizes

Display face

Body faceHeadlineSupporting copy

Display sizepx

Body sizepx

Display ÷ body4.00×

Hierarchyclear and deliberate

Display classificationdisplay

Hero composition

TYPE WITH INTENT

Display type carries the first impression; body type carries the argument. Keeping them in different families gives each job the design it needs.

css output

.hero {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4.00rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1.0000rem;
  line-height: 1.6;
}

You Might Also Need

Serif + Sans Pairing Tool

Classic serif and sans combos

Heading + Caption Pairing

Find headings that match captions

Font Pairing Suggester

Get smart pairing suggestions

Type Hierarchy Planner

Plan headings and body sizes

The display and body pairing tool tests a hero line against the body copy beneath it, which is the pairing a landing page actually needs. Display faces are designed for a handful of words at large sizes, so the question is not whether the two faces suit each other but where the size relationship lands.

What is Display + Body Pairing Tool?

The display body pairing tool sets a headline in a display or serif face and supporting copy in a sans or serif face, then reports the size ratio between them and the CSS that holds the composition.

The display role draws on display and serif faces, and the body role on sans and serif faces, so a hero line cannot be set in a text-only face by accident.
Display size runs from 24px to 180px in two-pixel steps, defaulting to 64px, and body size from 10px to 40px, defaulting to 16px.
Headline and supporting copy are both editable, and the composition renders them in the relationship they will have on a page rather than separately.
The ratio of display size to body size is reported, with a verdict: below twice the size the hierarchy is called too close, above five times it is extreme, and between the two it reads as clear and deliberate.
The exported hero rule uses a clamp so the display size scales down on a narrow viewport while the body size stays fixed in rem.

The ratio is the measurement worth having, because a display and body pairing fails more often on proportion than on shape. Two faces that look wrong together are usually two faces set at the wrong sizes, and the two-to-five band is where the jump reads as intended rather than accidental. The display classification is reported alongside, which matters because a display face and a serif set at the same head size behave differently: a display face is drawn for a few words at large display sizes and starts to look crowded as the line grows, while a serif scales down in a heading role far more gracefully. The generated hero rule also handles letter spacing by classification, applying a slightly positive value to a display face and a slightly negative one to a serif, since condensed capitals and heavy display forms usually want opening up while serif headings want closing.

Only two roles are modelled, so a caption or an interface role has to be judged elsewhere.
The ratio bands are conventions rather than measurements of the specific faces, and a narrow display face can work at a smaller jump than the band suggests.
The clamp in the hero rule uses a fixed viewport-based middle value, so a project with different breakpoints should adjust it rather than adopt it.
Weight is fixed at 700 in the preview, which suits display faces and may be too heavy for a serif heading.
Nothing checks the pairing across several roles at once, so the relationship between the hero, a section heading and a caption is not shown.

Use it when a landing page or a hero section is being composed, when a headline at a very large size needs checking against the copy beneath it, or when a display face is being proposed and the size it needs to justify itself has to be known. The ratio readout answers that last question directly. Where the pairing is heading over body rather than hero over body, the serif and sans pairing tool is the closer fit, and where the shortlist is still open the pairing suggester ranks the candidates. The serif and sans pairing tool covers the editorial arrangement, the heading and caption pairing adds the third role, and the type hierarchy planner settles how many levels a page needs before sizes are fixed.

How to use Display + Body Pairing Tool

Choose the display face and the body face, then paste the real headline and supporting copy rather than placeholders.
Set the display size and the body size and read the ratio verdict, moving whichever value is easier to change until the hierarchy reads clearly.
Check the display classification readout, since a display face at a long line behaves differently from a serif at the same size.
Copy the hero rule and adjust the clamp's middle value to your own breakpoints before it goes into the layout.

When to use Display + Body Pairing Tool vs related tools

Reach for it when a hero section is being composed, when a headline at display size needs checking against the copy beneath it, or when a proposed display face needs to be justified at a size that suits it. Where the roles are heading and body rather than hero and body, the serif sans pairing tool is the closer tool, the heading caption pairing covers the third level down, and the font pairing suggester ranks candidates when the shortlist is still open.

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.