Font metrics are the internal measurements of a typeface that define how text is positioned and spaced. They include x-height, cap height, ascender, descender, and baseline positioning. Understanding these metrics is crucial for designers and developers to achieve consistent vertical rhythm, precise alignment, and professional typography in web and print design.

The x-height is the height of lowercase letters (specifically the letter 'x') in a typeface, measured from the baseline. Fonts with larger x-heights (like Verdana or Segoe UI) tend to be more legible at small sizes, while fonts with smaller x-heights (like Garamond) often appear more elegant. The x-height significantly affects perceived font size and readability.

Cap height is the height of flat-topped capital letters (like 'H' or 'E') from the baseline. Ascender height is the height of the tallest ascenders in lowercase letters (like the stem of 'h' or 'b'). In many fonts, ascenders extend slightly above the cap height, giving lowercase letters a subtle vertical rhythm. In some modern geometric fonts, cap height and ascender height may be identical.

This tool uses a combination of the browser's Font API and canvas-based detection to identify available fonts. While browsers cannot directly enumerate all system fonts for privacy reasons, we maintain an extensive database of common fonts and test each one against your system. You can also manually type any font name to check if it's installed and inspect its metrics.

Font metrics directly impact CSS properties like line-height, vertical-align, and overall text spacing. Understanding ascender and descender ratios helps create pixel-perfect layouts, especially when mixing fonts. It's also essential for calculating precise padding, margins, and alignment in design systems where typography consistency is critical.

The baseline is the invisible line upon which most letters "sit." It's the primary reference point for all font metric measurements. In CSS, the baseline is the default vertical-align value for inline elements. Descenders (like the tail of 'g', 'y', 'p') extend below the baseline, while ascenders and capitals rise above it.

Measurements are obtained using the browser's Canvas TextMetrics API, which provides pixel-accurate data from the font rendering engine. On modern browsers (Chrome 77+, Edge 79+, Firefox 116+), we leverage extended TextMetrics properties like fontBoundingBoxAscent and actualBoundingBoxDescent for precise measurements. For x-height and cap height, we render individual glyphs and measure their bounding boxes for maximum accuracy.