Multi-Font Comparison
Comparison settings
| Slot | Family | Kind | Sample width | Relative |
|---|---|---|---|---|
| A | Inter | sans | 0px | 0% |
| B | Fraunces | serif | 0px | 0% |
| C | Space Grotesk | sans | 0px | 0% |
| D | JetBrains Mono | mono | 0px | 0% |
Widths are measured with the Canvas API at the settings above, so the comparison uses the browser's real shaping rather than an approximation.
Slots
Side by side
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
You Might Also Need
The multi font comparison sets one sample in four faces under identical size and weight, then reports what actually differs. Alongside the visual comparison it measures each family's rendering of the sample with the canvas API, so the judgement is made on width as well as on impression.
What is Multi-Font Comparison?
The multi font comparison gives four slots to four faces, renders one shared sample in all of them at the same size and weight, and tables the measured result.
- Four slots labelled A to D each take a family from the catalogue, and the default set pairs a sans, a serif, a grotesque and a monospace to show the comparison at its most useful.
- The sample is a single shared paragraph, so every slot renders the same words and no slot gets an easier line than the others.
- Size runs from 12px to 96px and weight from 300 to 700 in hundred-unit steps, both applied to all four slots at once.
- The table reports each slot's family, its classification, the measured width of the sample in pixels, and that width as a percentage of the widest slot.
- The side-by-side preview stacks the four renderings at a shared line height, each labelled with its slot letter and family name.
The measurement is the part that turns a preference into a comparison. The sample width column is a canvas measurement: each slot's sample is laid out through the canvas text API at the size and weight in force, so the browser's own shaping engine produces the figure rather than an average character width. A face that measures 88 percent of the widest at the same nominal size is either narrower in design or smaller in x-height, and that is exactly the difference a table of numbers reveals and a pair of screenshots hides. The practical consequence is space: on a fixed width a narrower face fits more characters and therefore reads at a longer measure, which changes whether the copy falls inside a comfortable line length. Setting all four at one size and weight is deliberate for the same reason, since varying either would make the widths incomparable.
- Four slots are the limit, so a shortlist longer than that has to be run in two passes.
- The measurement is of the sample string only, so a family that is narrow on the sample may still be wide on other text.
- Every slot shares one size and weight, which is what makes the comparison fair and what prevents testing how each face behaves at its own best size.
- The numbers are widths in pixels at the current setting, not ratios that hold across sizes.
- Nothing reports the loaded font's own metrics, so a width difference cannot be attributed to x-height or character width specifically.
Use it when a shortlist has to be narrowed on evidence rather than on taste, when a client asks why two faces at the same size look different, or when a face change is being proposed and the effect on line length needs checking first. The relative width column settles that argument in one reading. Where a pairing rather than a single face is the question, the font pairing suggester works on the relationship between two families, and where a stack has to be assembled for production, the brand font stack builder orders the fallbacks. The font previewer is the place to tune one face, the font pairing suggester covers pairing two of them, and the font specimen sheet gives any single face its own printed page.
How to use Multi-Font Comparison
- Paste the sample copy that matters, ideally a real sentence rather than a pangram, so the comparison reflects the words you will set.
- Set the size and weight, which apply to every slot, then assign a family to each of the four slots.
- Read the measured widths and the relative percentages in the table before looking at the renderings, so the numbers are not coloured by the visual.
- Judge the four renderings against each other, then swap one slot at a time to work through a longer shortlist.
When to use Multi-Font Comparison vs related tools
Reach for it when a shortlist of faces has to be reduced on measured differences, when someone asks why two faces at the same size occupy different widths, or when a proposed face change has to be checked against the layout it will sit in. The relative column is the evidence. For a pair that has to work together rather than in competition, the font pairing suggester is the closer tool, the pangram font tester checks alphabet coverage before a face is adopted, and the font-specimen sheet produces the printed page once the choice is made.
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.