การออกแบบตัวอักษร

รูปสัญลักษณ์

การแสดงผลทางสายตาของอักขระที่เรนเดอร์โดยฟอนต์ อักขระหนึ่งอาจมีหลาย glyph (ตัวเชื่อม รูปแบบตามบริบท) และ glyph หนึ่งอาจแทนหลายอักขระได้

· 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 ใช้กำหนดความกว้างของ em dash, em space, en space …

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 (Right-to-Left)

ทิศทางของข้อความที่อักขระไหลจากขวาไปซ้าย ใช้กับภาษาอาหรับ ฮีบรู Thaana และอักษรอื่นๆ ต้องใช้อัลกอริทึม Bidirectional เพื่อแสดงผลอย่างถูกต้อง

Web Fonts

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

การปรับระยะอักษร

การปรับระยะห่างระหว่างคู่อักขระเฉพาะเพื่อความสวยงามทางสายตา (เช่น AV, To, LT) เป็นคุณสมบัติของฟอนต์ ไม่ใช่แนวคิด Unicode แต่มีผลต่อการแสดงผลข้อความ Unicode

จุดไข่ปลา

U+2026 HORIZONTAL ELLIPSIS (…) อักขระเดี่ยวที่แทนที่จุดสามจุด ถูกต้องตามหลักการพิมพ์และนับเป็น 1 อักขระแทนที่จะเป็น 3

ช่องว่างที่ไม่ตัดบรรทัด

U+00A0 ช่องว่างที่ป้องกันการขึ้นบรรทัดใหม่ที่ตำแหน่งนั้น HTML:   ใช้ระหว่างตัวเลขและหน่วย (100 km) ในชื่อเฉพาะ (Mr. Smith) และหลังคำย่อ

ตัวพิมพ์ใหญ่ขนาดเล็ก

รูปแบบตัวพิมพ์ใหญ่ที่มีความสูงเท่ากับตัวพิมพ์เล็ก CSS: font-variant: small-caps Unicode ยังมีตัวอักษรพิมพ์ใหญ่ขนาดเล็กจริงใน Latin Extended (ᴀ–ᴢ)