A glyph is the visual representation of a character -- the actual drawn shape that appears on screen or in print. While a Unicode code point defines what character is meant (its identity and semantics), a glyph defines how it looks in a particular font. This distinction is fundamental to understanding how text rendering works.
Code Points vs Glyphs
A single Unicode code point can produce many different glyphs. The letter A (U+0041) looks completely different in Times New Roman versus Helvetica versus a handwriting font, yet all are glyphs for the same character. The relationship can also go the other direction: some fonts use a single glyph to represent multiple code points, as with ligatures like fi or fl.
<!-- Same character, different glyphs depending on font -->
<span style="font-family: serif">A</span>
<span style="font-family: sans-serif">A</span>
<span style="font-family: monospace">A</span>
Glyph Metrics
Every glyph has associated metrics that control how it fits into a line of text:
- Advance width -- horizontal distance before the next glyph begins
- Bearing -- offset from the cursor origin to where the glyph shape starts
- Ascender -- how far the glyph extends above the baseline
- Descender -- how far the glyph extends below the baseline
- Bounding box -- the rectangle that fully encloses the glyph shape
Glyph Variants via OpenType Features
Modern OpenType fonts often contain multiple glyphs for the same character, selectable via font features. CSS exposes this through font-feature-settings:
/* Enable small capitals (alternate glyphs for uppercase letters at x-height) */
.small-caps {
font-feature-settings: "smcp" 1;
font-variant-caps: small-caps;
}
/* Oldstyle numerals (glyphs with varying heights and descenders) */
.oldstyle-nums {
font-feature-settings: "onum" 1;
font-variant-numeric: oldstyle-nums;
}
/* Stylistic alternates -- decorative glyph variants */
.stylistic {
font-feature-settings: "salt" 1;
}
Glyph IDs in Fonts
Internally, fonts index their glyphs with Glyph IDs (GIDs) starting from 0. The first glyph (GID 0) is always the .notdef glyph -- the placeholder shown when a requested character has no glyph in the font (often rendered as a rectangle or question mark). Font tools like HarfBuzz and FreeType map code points to GIDs using the font's cmap table.
Glyph Inspection Tools
When debugging font rendering or checking glyph coverage:
// Check if a font can render a character using Canvas API
function hasGlyph(font, char) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = `16px ${font}, 'Last Resort'`;
// Compare metrics with a known-missing glyph
const test = ctx.measureText(char);
const fallback = ctx.measureText('\uFFFD');
return test.width !== fallback.width;
}
Understanding glyphs helps explain why the same Unicode text can look very different depending on font choice, why some characters appear as boxes (missing glyphs), and how advanced typographic features like ligatures and alternate forms work at a technical level.