Glyphe

What is a Glyph?

A glyph is the specific visual form that a character takes when rendered on screen or in print. While a character is an abstract concept — the letter "A" as defined by Unicode — a glyph is the concrete, drawn shape that a particular font uses to represent it. One character can have many glyphs; one glyph can represent many characters.

This distinction matters deeply in typography and software rendering. The letter "a" has two common glyph forms: a single-story form (a simple curve and stem) and a double-story form (with a closed bowl and ear). Both glyphs represent the same Unicode character U+0061, but they look entirely different depending on the font.

How Glyphs Work

A font file is essentially a database of glyphs. Each glyph is defined as a set of vector outlines (in formats like TrueType or PostScript) that a rendering engine scales, hints, and rasterizes to produce pixels on screen. The font also contains metadata about each glyph: its advance width (how much horizontal space it occupies), side bearings (padding on left and right), and positioning rules for when it appears next to other glyphs.

When you type text, the operating system's text shaping engine (such as HarfBuzz or CoreText) maps each Unicode code point to a glyph ID within the font. This process is called shaping, and it can be surprisingly complex — a single code point might map to different glyphs depending on context (initial, medial, final forms in Arabic), and a sequence of code points might collapse into a single glyph (a ligature).

Glyphs vs. Characters

A font may contain glyphs for characters it does not natively support — fallback glyphs, .notdef (the box or question mark shown for missing characters), and ornamental alternates. OpenType fonts can also include multiple glyph variants for a single character, accessible via features like ss01–ss20 (stylistic sets) or swsh (swashes).

Practical Examples

In web development, when you use font-variant: small-caps, the browser either uses dedicated small-cap glyphs from the font's OpenType tables or synthesizes them by scaling uppercase glyphs — a lesser-quality fallback. This is why the glyph distinction matters for high-quality typography.

In emoji rendering, a single code point (e.g., U+1F600 😀) maps to a color glyph in an emoji font. Different platforms provide entirely different glyph designs for the same character, which is why the same emoji looks different on iOS vs. Android.

Quick Facts