Anatomy

Glyph

A single visual representation of a character. One character can have multiple glyphs (e.g., regular and italic 'a').

A glyph is the fundamental unit of visual representation in typography — a single specific visual form used to represent a character or combination of characters. The distinction between a character and a glyph is subtle but important: a character is an abstract concept (the letter 'a'), while a glyph is its concrete visual realization.

One character can have multiple glyphs within a single font. The lowercase 'a' is a perfect example: most fonts contain both a single-story 'a' (a simple circle with a stem, as you'd write by hand) and a double-story 'a' (with the enclosed bowl and hook above, as seen in most upright text). Regular weight Inter uses the double-story 'a' in roman text but may switch to a single-story 'a' in italic. Similarly, a numeral '1' might have multiple glyphs — oldstyle, lining, tabular, or proportional.

/* Access alternate glyphs through font-variant or font-feature-settings */
.oldstyle-numerals {
  font-family: 'EB Garamond', serif;
  font-variant-numeric: oldstyle-nums;
  /* Uses alternate numeral glyphs that sit on the baseline with descenders */
}

.tabular-numerals {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  /* All digits use the same width — essential for financial tables */
}

/* Access a font's stylistic alternate glyphs */
.stylistic-alternates {
  font-feature-settings: "ss01" 1; /* Stylistic Set 01 — font-specific */
}

A typeface's glyph coverage — how many glyphs it contains — determines which languages and scripts it can render. A font with full Latin coverage might have 256 glyphs. A comprehensive multilingual font like Noto Sans has tens of thousands, covering virtually every Unicode script. For internationalized web applications, glyph coverage is a critical selection criterion.

When working with Google Fonts, the unicode-range CSS descriptor lets browsers download only the subset of glyphs your content actually uses, keeping network payloads minimal even when using large comprehensive font files.

คำศัพท์ที่เกี่ยวข้อง

ฟอนต์ที่แสดงแนวคิดนี้

เรียนรู้เพิ่มเติม