Why do the x-heights have to match?

Because the x-height is what the eye registers as the size of lowercase text. Two faces set at the same nominal size with different x-heights look like different sizes, so the smaller-bodied face has to be set larger to sit optically level. The rule reported here is a difference of more than one point on the scale, beyond which the sizes have to be adjusted by eye.

Why is no divergence a problem?

Because two faces that agree on everything give the reader no signal about which is which. Harmony comes from a shared framework with one or two deliberate differences, such as identical x-heights and warmth but contrasting stroke contrast. When nothing diverges, the roles have to be separated by weight or size alone, which the verdict reports as too alike.

Where do the metric values come from?

They are reference profiles recorded per family on a ten-point scale, not values read out of the font files. That makes them comparable across faces and consistent between sessions, at the cost of precision. Where a real figure is needed rather than a comparison, the font file itself has to be inspected.

What does the total divergence figure mean?

It sums the differences across all five axes, so it expresses how far apart the two faces are overall. A low total with matching x-heights and one clear divergence is the harmonious case; a high total means the faces differ on most axes, which can still work as a deliberate contrast but has to be held together by tone.

Why is the body sample scaled from the heading size?

Because that is the correction the x-height mismatch calls for. Setting the body text at a size derived from the heading demonstrates what the two faces look like once they sit on the same optical line, so the adjustment can be checked visually instead of calculated. It is a demonstration of one correction rather than a calculation of the best one.

Font Harmony Visualizer

Faces

Face A

Face BHeading sample

Heading sizepx

x-height agreementidentical

Shared axesx-height, width, apparent weight, warmth

Diverging axesstroke contrast

Harmonyharmonious — aligned metrics with deliberate contrast

Metric profiles

Metric	A · Lora	B · DM Sans	Δ	Consequence
x-height	▮▮▮▮▮▮▮	▮▮▮▮▮▮▮	0	identical — no separation on this axis
width	▮▮▮▮▮	▮▮▮▮▮	0	identical — no separation on this axis
stroke contrast	▮▮▮▮▮	▮▮	3	deliberate contrast
apparent weight	▮▮▮▮▮▮	▮▮▮▮▮▮▮	1	close enough to read as a system
warmth	▮▮▮▮▮▮▮▮	▮▮▮▮▮▮▮	1	close enough to read as a system

Total divergence 5 / 50 across 5 axes.

Rendered pairing

Harmony is alignment plus contrast

Two faces harmonise when they share a metric framework and differ deliberately on one or two axes; the visualiser states which of those conditions hold.

When the x-heights differ, the body size is nudged until the lowercase bodies look equal — the visualiser gives the scaled size so the correction can be checked directly.

You Might Also Need

Font Pairing Suggester

Get smart pairing suggestions

Serif + Sans Pairing Tool

Classic serif and sans combos

Multi-Font Comparison

Compare several fonts side by side

Contrast Pairing Checker

Check contrast between two fonts

The font harmony visualizer plots two families against five shared metrics and shows where they align and where they diverge. Harmony is not sameness: a pairing usually needs the x-heights close so the text sits on the same optical line, plus one or two deliberate divergences elsewhere.

What is Font Harmony Visualizer?

The font harmony visualizer compares two faces across five metrics and reports which axes they share, which diverge, and whether the resulting pairing reads as harmonious.

Five axes are compared on a reference scale of zero to ten: x-height, width, stroke contrast, apparent weight and warmth.
Each catalogue face carries a metric profile, so the comparison works from recorded values rather than from an assumption about the classification.
A pair is harmonious when the x-height agreement is close and exactly one or two other axes diverge deliberately.
If the x-heights differ by more than one point the verdict tells you to set the sizes by eye rather than by number.
No divergence at all is reported as too alike, since a pairing with no axis of separation has no hierarchy.

The x-height rule is the one that matters most in practice. Two faces at the same nominal size look unequal when their lowercase bodies are different heights, so a pairing with mismatched x-heights has to be corrected by nudging one of the sizes rather than by trusting the numbers in the stylesheet. The visualizer responds to that directly: the rendered pairing sets the body sample at a scaled size derived from the heading size, so the correction can be seen rather than calculated. The metric table then explains each axis in terms of its consequence, from an identical score described as no separation on that axis, through a difference of up to two points described as close enough to read as a system, to a difference of four or more warned about as a strong divergence that the pairing has to hold together some other way. The total divergence across all five axes is reported as a figure out of fifty, which gives a sense of how far apart the two faces are overall rather than axis by axis.

The metric profiles are reference values on a ten-point scale rather than measurements taken from the font files.
Only five axes are covered, so details such as serif shape, terminal angle and the contrast of the figures are outside the model.
Warmth is a subjective axis that has been given a number for comparison, not a measurable property.
The rendered pairing scales the body sample from the heading size using a fixed ratio, so it demonstrates a correction rather than reporting the optimal one.
Two faces are compared at a time, so a three-face system is checked as three pairs.

Use it when a pairing looks slightly wrong and the reason needs identifying, when two faces with different x-heights have to be reconciled, or when a design team wants a shared vocabulary for why a pairing works. The consequence column is the part that turns numbers into decisions. Where the pairing has to come from a shortlist, the font pairing suggester scores every combination, and where the two faces are being judged on measured width, the multi font comparison reports it. The font pairing suggester generates candidates, the multi font comparison measures their widths, and the contrast pairing checker covers whether the two roles can be told apart at all.

How to use Font Harmony Visualizer

Choose the two faces, then enter a heading sample and a body sample so the pairing is judged on real text as well as on metrics.
Read the x-height agreement first, since a difference greater than one point is what forces sizes to be set by eye.
Check the shared and diverging axis readouts, aiming for exactly one or two deliberate divergences.
Compare the rendered pairing against the scaled sizes, then set the two sizes in the design to match what the correction shows.

When to use Font Harmony Visualizer vs related tools

Reach for it when a pairing looks subtly wrong and the cause needs naming, when a project has two faces with different x-heights and the body size needs correcting, or when a team wants a shared reason for why one pairing works and another does not. The consequence column is what makes the vocabulary stick. For generating the shortlist the font pairing suggester is the starting point, the multi font comparison measures candidate widths, and the serif sans pairing tool covers the heading and body arrangement directly.

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.