Pixels, points and DPI
The point (pt) is a physical unit: 1 pt = 1/72 of an inch, fixed on the glass. The CSS pixel is not, its size depends on the screen. The bridge needs two things: the DPI (the panel's physical pixels per inch, you give it) and the DPR (how many physical pixels map to 1 CSS pixel, the browser reads it).
The formula: 1 CSS px = (72 × DPR) / DPI points. On your screen: DPI —, DPR —, so CSS ppi — (= DPI/DPR, how many CSS px fit in one physical inch). From there: 1 px = — pt, 1 pt = — px. The «pure» physical: 1 pixel of the panel itself = — pt.
The graph paper (cm / pt)
The background behind each text is real graph paper, drawn from the DPI you gave. In cm: small square = 1 mm, thick line = 1 cm. In pt: small square = 1 pt, thick line = 12 pt (one pica). The numbered ruler on top gives the scale. If the DPI is wrong, the squares won't be real cm/pt, which is why it's worth calibrating it first.
ch, and the ch ÷ characters ratio
The ch is the width of the character «0» in that specific font and size. «The text is ≈ N ch» means it spans as much room as N zeros. Useful for columns/widths in ch in CSS.
The ratio ch ÷ character count = the average character width, measured in ch. In monospace it is exactly 1.00 (each character = one «0»). In proportional fonts it is < 1 when characters are on average narrower than the «0» (denser text), or > 1 if they are wider. Live, for the selected ones:
Height: em, cap-height, x-height
The «size» you set (e.g. — px = — pt = — mm) is the height of the em (the font's notional square), not the height of the letters themselves. The actual black letters are shorter: cap-height = height of the capitals (e.g. «H»), x-height = height of the lowercase without tails (e.g. «x»). Two fonts at the same px size can look very different, precisely because of a different x-height. Live (in points):
| Font | em (pt) | cap (pt) | x (pt) |
|---|
«Installed» vs «substitute»
The browser shows a font only if it exists on the system; otherwise it puts another in its place. «Installed» here means it renders as a distinct font, «substitute» that it falls back to another (so the measurements are about that other). Note on Linux: fontconfig does aliasing (e.g. «Arial» → Liberation Sans), so «installed» can mean «renders as a distinct design», not necessarily that a file with exactly that name exists.