How is text width measured?

Text width refers to the horizontal pixel space a string of characters occupies when rendered with a specific font, size, and weight. Unlike character count, pixel width depends on the proportional spacing of each glyph — the letter "W" is far wider than "i" in most fonts. Accurately measuring text width matters for UI layout, label truncation, dynamic canvas rendering, and fitting strings into fixed-width containers.

Browsers expose the HTML5 Canvas API's measureText() method, which calculates rendered text width without displaying it on screen. By drawing to an offscreen canvas context, a precise sub-pixel measurement can be obtained for any combination of font family, size, and weight.

Tool description

This tool calculates the pixel width of one or two text strings using the Canvas API. Select a font family, set the font size and weight, and instantly see the rendered pixel width. When two strings are entered, a comparison view shows the absolute difference and the width ratio between them.

Features

  • Supports all web-safe system fonts and custom uploaded font files (TTF, OTF, WOFF, WOFF2)
  • Compare two strings at once with difference and ratio statistics
  • Adjustable font size from 1 to 256 px and all nine standard font weight values

How it works

Width is measured using the browser's CanvasRenderingContext2D.measureText() API. An offscreen <canvas> element is created, its 2D context font property is set to match the selected family, size, and weight, and measureText() returns the bounding box width in pixels. Custom fonts are loaded into the browser's FontFace registry before measurement so results reflect the actual typeface.