タイポグラフィ

グリフ

フォントによってレンダリングされる文字の視覚的表現。1つの文字が複数のグリフを持つ場合があり(合字・文脈形態)、1つのグリフが複数の文字を表す場合もあります。

· Updated

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

Concept Example Unicode
Character Latin letter A U+0041
Glyph (serif) A rendered in Times New Roman font-internal ID
Glyph (sans) A rendered in Helvetica font-internal ID
Ligature glyph fi as a single shape maps to U+0066 + U+0069

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 ss01ss20 (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

Property Value
Formal definition Visual representation of a character as rendered by a font
Unicode term Defined in Unicode Standard, Chapter 2
Related concepts Character, code point, font, ligature, rendering
Missing glyph indicator .notdef glyph (typically □ or ?)
Glyph database format TrueType (.ttf), OpenType (.otf), WOFF/WOFF2 (web)
Shaping engines HarfBuzz, CoreText (macOS/iOS), DirectWrite (Windows)
OpenType glyph variants Stylistic sets (ss01ss20), alternates (calt, swsh)

関連用語

タイポグラフィ のその他の用語

CSS unicode-range

CSS @font-face descriptor specifying which Unicode code points a font should cover. …

Em / En(タイポグラフィ単位)

Em:フォントサイズと等しい幅。En:Emの半分。エムダッシュ幅・エムスペース・エンスペース・CSSユニット(1em・0.5em)の定義に使われます。

Font Fallback

The mechanism by which a rendering engine substitutes glyphs from a secondary …

OpenType

Modern font format developed by Microsoft and Adobe supporting up to 65,535 …

RTL(右から左)

文字が右から左に流れるテキスト方向。アラビア語・ヘブライ語・ターナ文字などで使われ、正しい表示のために双方向アルゴリズムが必要です。

Web Fonts

Fonts downloaded by the browser to render text, declared via CSS @font-face. …

カーニング

視覚的な調和のために特定の文字ペア(例:AV・To・LT)間のスペーシングを調整すること。Unicodeの概念ではなくフォント機能ですが、Unicodeテキストのレンダリングに影響します。

スモールキャップス

小文字の高さの大文字字形。CSS:font-variant: small-caps。Unicodeにはラテン拡張(ᴀ〜ᴢ)に実際のスモールキャップス文字があります。

ゼロ幅文字

前進幅がゼロの文字 — レンダリングでは見えませんがテキスト動作に影響します。ZWSP(単語区切り)・ZWJ(結合)・ZWNJ(結合防止)・WJ(改行防止)などがあります。

ダッシュ

文の一部を区切ったり範囲を示したりする句読記号。Unicodeはハイフン(‐)・エンダッシュ(–)・エムダッシュ(—)・図表ダッシュ(‒)などを定義しています。