How does the tool measure a glyph's width?

It asks the browser's own text engine, through the canvas measurement API, at the size you set. That means the number includes whatever the renderer applies to a single glyph, such as kerning contexts and the font's default features, rather than being read from a separate metrics table.

What does the fallback label on a cell mean?

It means the face does not contain that code point, so the browser would substitute another font at render time. The label comes from the platform's font-matching check, which is the same machinery that decides at paint time, so it reflects what the visitor will actually see on this machine.

Why is the advance width given in em units as well as pixels?

Because pixels alone do not travel. An em value is the width relative to the font size, so it can be compared with another face measured at a different size, and it converts into any size the design later uses. The pixel figure is there so the current setting can be read at a glance.

Can I browse the whole font?

The walk covers up to 480 consecutive code points from wherever you start, clamped to the printable range, so a large CJK font is covered in several passes rather than one. That is deliberate: measuring hundreds of glyphs in one go is slower and the grid becomes unreadable long before it runs out of code points.

Why do two faces show different widths for the same letter?

Because advance width is a design decision, not a constant. A condensed face fits more characters into the same line precisely because its advances are narrower, and the average advance readout is the quickest way to see the difference between two candidates before reading a single paragraph.

Glyph Browser

Face & range

FaceStart code point

Glyphs shown

Cell sizepx

Glyphs shown144

Drawn by this face0 / 144

Average advance—

RangeU+0020 – U+00AF

Glyph grid

Selected glyph

Code pointU+0041

Advance width—

In em units—

Drawn bya fallback face

Advance widths are measured by the browser's text engine at 34px, which already includes kerning and any font-feature defaults the face applies. A glyph marked “fallback” is not in this face and will be substituted at render time.

You Might Also Need

Unicode Character Explorer

Explore Unicode characters

Glyph Comparison Tool

Compare glyphs across fonts

Missing Glyph Detector

Detect missing glyphs

Font Glyph PNG Exporter

Export glyphs as PNG

The glyph browser walks the printable code points of a chosen face and measures each one with the browser's own text engine, so the widths it reports are the rendered metrics rather than a table copied from elsewhere. Cells that a fallback face draws are marked.

What is Glyph Browser?

The glyph browser pages through a face's printable code points, draws each one in a grid and measures its advance width in the canvas api at the size you choose. The measurement is the part that makes it useful: the browser's shaping engine reports what the font does when it is rendered, including the kerning and default feature behaviour that apply to a single glyph.

Four controls set the walk, and one of them accepts two input formats.

Face, chosen from the catalogue, which decides both the grid and the measurements.
Start code point, entered either as a hexadecimal value with a leading 0x or as a plain decimal number, clamped to the printable range.
Glyph count, from 16 to 480, which is how far past the start the grid runs.
Cell size, from 12 to 96 pixels, which changes both the rendering and the units the advance widths are measured in.

The readouts turn the grid into an assessment, and the average advance is the quickest figure for comparing two candidates' economy of space before a paragraph is set in either of them. The shown and native counts answer whether the face really covers the range or is borrowing glyphs from a fallback, the average advance is given in pixels and as a fraction of the em, and the range line names the first and last code point displayed. Every cell carries its hexadecimal code, and a cell the face does not draw is labelled as a fallback, using the browser's own font-matching check rather than a guess. Selecting a glyph opens a detail panel with its code point, its advance width in pixels and in em units, and buttons that copy the character, the code point and an HTML entity, which is the sequence a designer actually needs when a symbol has to be documented for a developer, along with the face and size the measurement was taken at.

Four limits follow from measuring in the browser rather than reading a table.

A width taken at 12 pixels is rounded by the renderer, so comparisons of similar faces are more reliable at the larger sizes the slider allows.
The measurement describes the glyph as the browser shapes it, with default features on, so a width that changes under a stylistic set will not match what a different rule produces.
The fallback check depends on the font actually being loaded, which means a face that has not finished loading can look less complete than it is.
The walk is clamped to the printable range, so control characters and the private use area are out of scope by design.

Use it when a face's coverage is being assessed before it is chosen, when a symbol seen in a design has to be identified by code point, or when the real advance widths of a face matter — for example alongside a monospace companion, in a table of figures, or where a display setting has to fit a fixed width.

How to use Glyph Browser

Pick the face and confirm the native count, since a low figure on a wide range means the grid is showing fallback glyphs rather than the font's own.
Enter the start code point in whichever form you have it, hexadecimal or decimal, and set a count that covers the ranges you care about.
Raise the cell size before comparing widths between faces, because small sizes round the measurements.
Select the glyph you need and copy the character, the code point or the HTML entity, checking the detail panel's drawn-by row first.

When to use Glyph Browser vs related tools

Reach for it when a face's coverage has to be judged before it is adopted, when a symbol in a design has to be identified and handed to a developer, or when real advance widths matter for aligning figures. The measured-width column is the honest part. For a symbol that is not covered at all the missing glyph detector names the fallbacks, the Unicode character explorer gives the block and encoding context, and the font glyph PNG exporter turns individual glyphs into images.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.