v141 · canvas

Font Comparison

The new bounding-box and baseline metrics from measureText() reveal exactly how different typefaces handle ascent, descent, cap height, and advance width for the same string. Side-by-side canvases make the differences visually obvious.

Feature detection: checking…
actualBoundingBox top
actualBoundingBox bottom
alphabeticBaseline
emHeightAscent
ideographicBaseline

metrics comparison

All values are in canvas pixels. Hover a row to highlight it across all canvases.

const ctx = canvas.getContext('2d');
ctx.font = '36px serif';
const m = ctx.measureText('Hello');

// Chrome 141 enhanced metrics
m.actualBoundingBoxAscent;   // pixels above baseline to top of glyph
m.actualBoundingBoxDescent;  // pixels below baseline to bottom of glyph
m.actualBoundingBoxLeft;     // pixels left of alignment point
m.actualBoundingBoxRight;    // pixels right of alignment point
m.fontBoundingBoxAscent;     // ascent of the font (not glyph-specific)
m.fontBoundingBoxDescent;    // descent of the font
m.emHeightAscent;            // distance above baseline to top of em square
m.emHeightDescent;           // distance below baseline to bottom of em square
m.alphabeticBaseline;        // offset from textBaseline to alphabetic baseline
m.ideographicBaseline;       // offset to ideographic baseline (for CJK)

see also