Why disable ligatures in code?

Because a ligature replaces a sequence of characters with a single glyph, so the source shown on screen no longer matches the characters in the file. Copying that code into another editor produces the original sequence, which means what is read is not what is copied. Coding ligatures are a deliberate preference for some readers, and the CSS here takes the safe default.

What makes a zero ambiguous?

Being too close in shape to the capital O. In a code context the difference matters because an identifier containing a zero and one containing an O are different identifiers. The conventional fixes are a slashed zero, a dotted zero, or a narrower capital O, and the check renders both characters so the distinction can be judged directly.

How is the advance width calculated?

The code size is multiplied by 0.6, which is the typical advance width of one character in a monospace face. It is an estimate rather than a measurement, which is why the figure is labelled as such: real faces range a little either side of that ratio, and a face with a wider set will fit fewer characters on the same line.

Why does the pipe character matter?

Because it is commonly used to draw table rules and boundaries in plain text, and a pipe that does not reach its neighbours leaves visible gaps in the line. In a monospace face the character is designed to touch, which is what makes an ASCII table read as a table. The check renders a run of them for exactly that reason.

Should inline code be the same size as block code?

Often not. Inline code sits within a line of prose, so it usually needs to be slightly smaller than the surrounding text to keep the line spacing steady, while a code block is read on its own and can be larger. The tool sets one size, so the two cases are checked in separate passes.

Monospace Pairing Tool

Pair

Monospace face

Proportional partnerCode sample

Code sizepx

Estimated advance width7.80px / char

Characters in 640px82

PairJetBrains Mono + Inter

Mixed preview

Prose and code share almost every technical document. The partner face carries description, while inline_code() carries the literals.

function pair(mono, sans) {
  return `${mono} + ${sans}`;
}

Alignment & ambiguity checks

1ii

0OO

()

()[]{}

table

||||

Check that 0/O and 1/l/I are distinguishable and that `|||` characters touch — a slashed zero or a dotted zero is the usual fix. Disable ligatures in code contexts so `!=` never renders as a single glyph.

css output

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  font-variant-ligatures: none; /* keep code characters unambiguous */
}

p, li, td {
  font-family: 'Inter', sans-serif;
}

You Might Also Need

Google Fonts Pairing Picker

Pick pairs from Google Fonts

Kerning Pair Inspector

Inspect kerning pairs

Font Rendering Preview

See anti-aliasing and rendering

Brand Font Stack Builder

Build a complete brand stack

The monospace pairing tool pairs a fixed-width face with a proportional partner and previews the two together as code and prose. Monospace is used for code, tabular data and metadata, where character alignment matters more than reading rhythm.

What is Monospace Pairing Tool?

The monospace pairing tool takes a monospace face, a proportional partner and a code sample, then renders the pair in the two contexts they share and runs the checks that decide whether the combination is viable.

The monospace slot draws only on monospace faces and the partner slot only on proportional ones, so the roles cannot be filled wrongly.
The estimated advance width is reported as the code size multiplied by 0.6, which is the typical width of one character in a monospace face.
That figure converts into the number of characters that fit a 640 pixel line, which is the count a code block or a terminal actually depends on.
Code size runs from 9px to 28px, defaulting to 13px, and is the only size control since the partner face follows the document's own setting.
Alignment checks render the classic ambiguous pairs: figure one against lowercase l, zero against uppercase O, the bracket set, and a run of pipe characters.

The checks are what separate a usable monospace face from an unusable one in an editor or a table. A face without a distinguishable zero and capital O makes a code block ambiguous, and the usual fix is a slashed or dotted zero, which the panel names. The pipe character is the other common failure: in a proportional face it is narrow, and in a monospace face it should touch its neighbours so that a table rule drawn with pipes reads as continuous. Ligatures get their own line in the exported CSS, and it disables them deliberately, because a ligature that renders a not-equal or arrow operator as a single glyph makes the source ambiguous the moment someone copies it into another editor. The advance width figure is the practical counterpart to those checks: it says how wide a line of code will be at the chosen size, which is what determines whether a block needs horizontal scrolling in the layout it sits in.

The advance width is an estimate from a typical ratio rather than a measurement of the selected face.
The partner face is previewed at the document's own size, so the relationship between the two sizes is not adjustable here.
Only one code size is set, so a design with separate sizes for inline code and block code is checked in two passes.
The ambiguity checks are rendered rather than scored, so whether a given zero is distinguishable is a judgement the panel does not make.
Nothing evaluates the two faces' figures against each other, which matters when a monospace face appears inside a table set in the proportional one.

Use it when a documentation site or a product interface needs a code face chosen, when an existing monospace face produces ambiguous characters in an editor, or when the width of a code block has to be estimated before a layout is built. Where the pairing has to be discovered rather than tested, the Google Fonts pairing picker offers a broader sweep. The Google Fonts pairing picker covers a wider set of candidates, the kerning pair inspector examines the spacing of individual pairs, and the font rendering preview shows how the code face rasterises at small sizes.

How to use Monospace Pairing Tool

Choose the monospace face and the proportional partner, then paste a representative code sample rather than a single line.
Set the code size and read the estimated advance width and the characters-per-line figure for a 640 pixel block.
Read the ambiguity checks, particularly the zero against the capital O and the run of pipes.
Copy the CSS, which keeps ligatures disabled for code and leaves the partner face to the document's own rules.

When to use Monospace Pairing Tool vs related tools

Reach for it when a documentation site, a developer tool or a product interface needs its code face chosen, when an existing monospace face makes characters ambiguous in an editor, or when the width of a code block has to be known before a layout is committed. The pipe and zero checks catch most real problems. For a wider sweep of candidate pairings, the Google Fonts pairing picker covers more faces, while the kerning pair inspector examines individual pairs and the font rendering preview shows the rasterised result at small sizes.

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.