Typographic ruler
See how much physical space your text takes in various fonts, on graph paper. First tell me your screen's DPI, so the centimetres and points are real, not hypothetical.
Pixel ↔ point conversion
Choose which to compare. The installed means it exists on your system; the substitute means the browser shows it with another (so the measurement is about that other one).
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 device pixels per inch, you give it) and the DPR (how many device 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. And the device pixel (= css ÷ DPR, equal to hardware only without scaling): 1 device pixel = — pt.
Four 'pixels' that often get confused, from the most abstract to the most physical:
| Name | What it is | Fixed? | Do we have it? |
|---|---|---|---|
| css pixel | the browser's logical unit for layout | No, changes with zoom | ✓1 |
| logical pixel | OS logical pixel (point / DIP) | No, changes with scaling | ✓ |
| device pixel | the surface the browser renders to (css/logical × DPR) | No, changes with scaling + zoom | ✓2 |
| hardware pixel | the hardware dot, the screen's native resolution | Yes, baked into the hardware | ✗3 |
1 css pixel: we measure it at /tools/monitor_dpi/ · 2 device pixel: computed, not the panel itself · 3 hardware pixel: no access, we don't measure it
The DPR = how many device pixels fall on one CSS pixel (it blends scaling, zoom and density together). The DPI = device pixels per inch.
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.
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:
| Font | ch | chars | ch÷char |
|---|
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) |
|---|
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.