Font Metrics Visualizer

How It Works

Browsers don't expose font metrics directly via CSS or the DOM. While the Canvas API provides TextMetrics with properties like actualBoundingBoxAscent, these values can be inconsistent across browsers and don't always match the rendered output. This tool takes a different approach: it measures the actual rendered pixels.

Pixel-Scanning Approach

For each metric, we render a specific reference character to an offscreen canvas, then scan the pixel data to find the topmost and bottommost non-transparent pixels. This gives us the true visual bounds of the glyph as the browser actually renders it.

Reference characters used:

• Baseline & x-height: lowercase x — its bottom edge defines the baseline, top edge defines x-height
• Cap height: uppercase H — a flat-topped capital with no overshoot
• Ascent: Å — captures the highest point including diacritics
• Descent: lowercase p — captures the descender depth

The Measurement Code

function getVerticalBounds(ctx, width, height) {
  const imageData = ctx.getImageData(0, 0, width, height);
  let top = height, bottom = 0;
  
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const alpha = imageData.data[(y * width + x) * 4 + 3];
      if (alpha >= 128) {  // threshold for anti-aliased edges
        top = Math.min(top, y);
        bottom = Math.max(bottom, y);
      }
    }
  }
  return { top, bottom };
}

Why Not Use TextMetrics?

The Canvas TextMetrics API does provide ascent/descent values, but they represent the font's declared metrics from the font file, not the actual rendered bounds. These can differ due to font hinting, rendering engine differences, or glyphs that extend beyond the declared metrics. Pixel-scanning shows what you actually see.

Font Selection

The dropdown includes common web-safe fonts. You can also type any font name in the custom input field — if the font is installed on your system, it will be used. In Chrome and Edge, the "Load System Fonts" button uses the Local Font Access API to enumerate all installed fonts (requires permission).