Text Width Calculator

The rendered width of a string is the sum of the advance widths of its glyphs plus any tracking added between them. Advance width is the horizontal distance the drawing position moves after a glyph is set, and it includes the glyph outline plus its left and right sidebearings, which is why it is always slightly wider than the visible ink. In a monospaced face every glyph shares one advance, so width is exactly character count times that value, typically about 0.60 of the font size for faces such as Courier or Menlo. Proportional faces vary per glyph from roughly 0.28 of the em for i and l up to about 0.85 for m and W, so this estimate uses a distribution-weighted average of around 0.50 for serif and 0.48 for sans-serif faces, with the space character taken at roughly half the average advance. Three factors make the estimate approximate. Kerning applies per-pair adjustments, usually negative, to combinations such as AV, To and Wa, and a heavily kerned display string can measure several percent narrower than the sum of its advances. The letter distribution of the specific string matters: a word like illicit is far narrower than a word like mammoth at the same character count. And CSS letter-spacing is specified as applying after every character including the last, so a string of n characters with tracking t gains n times t rather than n minus one times t, a discrepancy that grows with long strings and wide tracking. For exact results the browser Canvas API measureText method returns a TextMetrics object using the real font tables, and the CSS ch and ex units give access to the zero and x-height advances directly.

Character widths became a formal numeric system with mechanical composition. The Monotype caster, developed by Tolbert Lanston and refined in the first decade of the twentieth century, encoded each character on an 18-unit em so that the machine could compute line fill and justify automatically, forcing every typeface cut for Monotype to be fitted to a fixed grid of unit widths. Linotype solved the same problem differently by casting whole lines, but both systems established that a font is a set of measured widths and not merely a set of shapes. Digital type carried the metric tables forward explicitly. Adobe distributed Adobe Font Metrics files alongside Type 1 fonts from the mid-1980s, listing the advance width and bounding box of every glyph plus a table of kerning pairs. TrueType, introduced by Apple in 1991 and adopted by Microsoft, stored the same information in binary tables, the hmtx table for horizontal advances and the kern table for pair adjustments. The OpenType format, announced by Adobe and Microsoft in 1996, moved positioning into the GPOS table so that kerning, contextual adjustment and script-specific shaping could all be expressed together. On the web the ability to measure text at runtime arrived with the HTML5 canvas element, whose measureText method exposes the shaped width of a string as the browser would actually render it, and the CSS Text Module Level 3 defined how letter-spacing and word-spacing modify those widths.