SymbolFYI

Glyph

Typography
定義

The visual representation of a character as rendered by a specific font. One character can have multiple glyphs across different fonts.

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.

関連記号

関連用語

関連ツール

関連ガイド

How to Use the SymbolFYI Fancy Text Generator
A guide to SymbolFYI's Fancy Text Generator — convert text to Unicode bold, italic, script, fraktur, and monospace styles for social media.
How to Use the SymbolFYI Symbol Table Tool
A complete guide to SymbolFYI's Symbol Table — browse characters by Unicode block, filter by category, copy characters, and explore encoding details.
How to Use the SymbolFYI Unicode Lookup Tool
A guide to SymbolFYI's Unicode Lookup — enter a U+ codepoint to see the character's name, block, script, and full encoding details.
How to Use the SymbolFYI Symbol Search Tool
A complete guide to SymbolFYI's Symbol Search — find Unicode characters by name, keyword, HTML entity, or pasted character, with one-click copy in any format.
Font Fallback and Tofu: Why Characters Display as Empty Boxes
Understand font fallback — why characters render as empty boxes (tofu), how to build robust font stacks, unicode-range subsetting, and more.
Box Drawing Characters: Building Text-Based UI with Unicode
Use Unicode box drawing characters to build tables, borders, and text-based interfaces — the complete reference with copy-paste examples and CSS tips.
CJK Web Typography: Chinese, Japanese, and Korean Text on the Web
Master CJK web typography — font stacks, line breaking rules, ruby annotation, vertical writing, CSS text-spacing, and mixed-script layout techniques.
Ligatures in Web Typography: From fi to Modern OpenType Features
Master web ligatures — standard ligatures (fi, fl), discretionary ligatures, CSS font-feature-settings, OpenType features, and accessibility implications.
Tofu: Why Characters Show as Empty Rectangles and How to Fix It
Understand tofu — the empty rectangle that appears when your font can't display a character. Learn causes, diagnosis, and font fallback solutions.
The Private Use Area: Custom Characters in Unicode
Explore Unicode's Private Use Areas — how they work, why icon fonts use them, PUA in corporate fonts, and the risks of PUA characters in data exchange.