typeset: text widths from the font file, against your browser

Lab live

Type or pick a text. Both widths update as you type.

Font Weight Script Sample

Size

Engine model

Text

Canvas measureText–px, the reference

typeset model–px, from the tables

Error–px, model minus canvas

The canvas draws the text. Each tick is the end of a glyph in the model. The bars give the two widths. The error is the gap between their ends.

Canvas words

Blink shapes the text of a canvas one word at a time, so no kerning goes across two words. Each CJK character is a word alone. Select a word to see its glyphs.

Glyphs of the first word

Char	Glyph	Advance	Kerning	px

Advance and kerning are in font units. One em has – units. The px column has no rounding.

Sweep in this browser

The sweep measures the CI corpus in your browser: 40 texts for each script and length, at 6 sizes from 10 to 48 px.

Texts Value

No sweep yet. A sweep of Noto Sans takes a few seconds.

CI platforms recorded

Model Texts Value

Select a cell to see its count of texts and its worst text.

How it works

The model reads hmtx, HVAR, GSUB and GPOS of the font file. It adds the advances and the kerning of each canvas word.
The reference is measureText of a canvas, with the same file loaded as a FontFace.
An engine model is a row of rules for one text engine: the rounding of the variable-font deltas, the metrics of composite glyphs, the rounding of each advance and the precision of the sum.
On macOS and Windows, Blink adds the widths of the words in single precision. The CoreText and DirectWrite models do the same.
Arabic needs joining forms. The model applies them by the joining type of each letter, as HarfBuzz does.
Devanagari needs the Indic shaper, with its clusters and reordering. The model does not do this yet, so its errors are large.
The fonts come from google/fonts at a pinned commit. Read docs/FONTS.md for the measurements.