Typography and Typeface Knowledge (Google Fonts Knowledge: Type Classification & Anatomy / Type Selection & Pairing / Legibility & Accessibility / CJK Multilingual Script / Glossary)

This set of notes answers a question that often stumps PMs:Faced with hundreds or thousands of typefaces, what criteria should I use to choose? After choosing, how do I set the type so that the text is readable and does not look cheap? Google Fonts' "Knowledge" column breaks down "going by feel" into a set of actionable judgment.

The core message in one sentence:Good typography is not an aesthetic talent, but a series of concrete rules you can memorize——select type by passing four checks: "fit for purpose + complete design + reliable files + proper license"; set type by following empirical values for line height, line length, and letter spacing; accessibility relies on hard metrics for contrast and easily confused characters. A cooking analogy: ordinary ingredients (default typefaces) can still shine if cooked (typeset) well; conversely, even the best typeface, if set messily, will make readers want to close the page.

Eight main sections: 1.Type Anatomy and Vertical Metrics——Only by understanding terms like baseline and x-height can you grasp "why the page jumps when you change a typeface". 2.Type Classification——Genre classification (serif / sans serif / …) + seven Chinese type categories + the three-layer type matrix, providing a framework for "discussing and narrowing down choices". 3.Type Selection Methodology——The four-check checklist + emotional considerations + scenario-based selection + optical sizes. 4.Type Pairing——When you actually need a second typeface, and how to pair it without going wrong. 5.Legibility and Accessibility——Difference between legibility and readability + easily confused characters + hard WCAG contrast metrics. 6.Practical Rules of Thumb for Typesetting——Line height / line length / letter spacing / widows and orphans + techniques for breaking the rules, with all numerical values retained. 7.CJK and Multilingual Writing Systems——Full-width monospacing, no baseline, no true italic, Japanese three-script system. 8.Quick-Reference Glossary——30+ high-frequency terms with Chinese-English equivalents.

Division of labor with neighboring references:NNGroup Visual Design Principles · Gestalt grouping · visual hierarchy · typography · color · imagery (19 articles · five major visual principles / Gestalt proximity-similarity-closure-common region / visual hierarchy-grid-golden ratio / type terminology-pairing-reading typefaces / color 60-30-10 / picture superiority effect-photos-imagery / aesthetics-usability effect / glossary) is an overview of visual design principles (typography only takes up one section, covering glossary + pairing + reading typefaces);Refactoring UI, a practical UI handbook for non-designers (hierarchy · white space and spacing · color systems · typography · depth and shadow · image processing · final polish · practical teardowns) provides practical UI rules for non-designers (hand-picked type scale, 45–75 character line length, line height inversely proportional to measure).This piece is a dedicated in-depth typography reference——it is the most comprehensive source here for how to describe glyph features in words, the history and temperament of each type category, and details of CJK and accessibility. For the parts where the three references intentionally overlap (line length / line height / x-height), this piece gives more detailed rationales that can be directly cross-referenced.

1. Type Anatomy & Vertical Metrics

Why:If you do not know these terms, you cannot explain a very real pitfall——After adding or changing a typeface, the font size stays the same, but the text "jumps" and no longer aligns to the baseline. The root cause lies entirely in vertical metrics. That is why this section is the foundation for everything that follows.

1.1 Parts of a letter (Latin type anatomy)

Term (EN / CN)	What it is	Example letter
Baseline	The line that the bottom of almost all characters aligns to	All letters stand on it
X-height x-height	The height of the main body of lowercase letters (excluding ascenders and descenders)	The height of x, a, e
Cap height	The top reference for uppercase letters	The top of H, L, T
Ascender	The part of a lowercase letter that rises above the x-height	The upper half of h, l, b
Descender	The part of a lowercase letter that drops below the baseline	The tail of g, j, p, q, y
Counter	The enclosed or semi-enclosed empty space inside a letter	The inside of o, b, d
Stem main stroke	The vertical or main stroke of a letter	The vertical stroke of T, H, L
Terminal	The end of a stroke (especially in sans serif typefaces)	The rounded corner at the top of f
Serif	The decorative foot at the end of a stroke	The small tick at the end of strokes in Times
Ligature	Two letters merged into a single glyph	fi, fl, æ
Ink trap	A small intentional notch left where strokes meet, to prevent ink from spreading and blurring during printing	Common in early / small-size typefaces
Small caps	Uppercase letters designed to match the height of lowercase letters	Used in formal typography

PMs only need to remember three horizontal lines: cap height (top of uppercase) > x-height (main body of lowercase) > baseline (bottom). The rest of the terms are the language of type designers; you can look them up when you encounter them.

1.2 The em square and "why changing typefaces causes jumping"

Type designers place every letter inside a transparent box called the character space (em square), which is internally divided into 1000 units (classically 800 above / 200 below the baseline).When you set a font size of 14px, you are actually setting the size of this box, not the size of the letter itself——designers can place the letter at any height inside the box.

Consequences (this is a high-frequency practical pitfall):

At the same font size, different typefaces look larger or smaller. This is because of differing x-height: typefaces with a larger x-height look bigger and more readable (especially obvious at small sizes); the difference is not obvious for large headline sizes, but very noticeable for small body text.
Baselines do not align after changing typefaces. When updating branding, building buttons, or adjusting layouts, even if font size and line height are unchanged, text may no longer sit neatly on the same baseline → When replacing typefaces (especially replacing bold weights), always visually check alignment.
Larger x-height → larger counters inside letters → usually requires correspondingly larger line spacing.

When to use: When building design systems / component libraries, do not only compare font size numbers when selecting typefaces; compare x-height and ascenders/descenders side by side, otherwise you will have to rework all spacing after the swap.

2. Type Classification

Why:There are too many typefaces in the world; classification is a tool for "discussing and narrowing down choices",not an absolute truth(a single typeface may belong to several categories at once). Classification helps you quickly rule out unsuitable broad categories.

2.1 Genre classification (most common in online font libraries)

Serif / Sans serif / Slab serif (Egyptian) / Monospaced / Script / Calligraphy / Display.

Type	Glyph features (text description)	Temperament / When to use
Serif	Decorative feet at the ends of strokes, often with contrast between thick and thin strokes	Classic, elegant, trustworthy;first choice for long-form body text(5+ paragraphs, news, books)
Sans serif	Clean stroke ends with no feet	Minimalist, modern, neutral;small-size UI / on-screen body text
Slab serif	Thick, square serifs, like a slab laid on the stroke end	Weighty, strong; medium-size headlines, branding
Monospaced	Every character occupies the same width	Code, tabular alignment; mechanical feel
Script / Calligraphy	Connected letters, looks like handwriting	Warm, emotional;only for headlines/logos, never for body text
Display	Strong personality, rich detail	Large-size headlines, posters; only looks good large,never use for body text

2.2 Historical classification and "period feel"

Typefaces can evoke associations with specific eras: Blackletter → the Middle Ages, rounded typefaces → 1970s disco.Why you need to understand this layer: ① Type selection should match the project's period feel (do not use overly classical type for a modern brand; use period-appropriate type for 1920s props); ② Historical styles should be consistent when pairing, unless you are deliberately creating contrast. An interesting counterintuitive point: sometimes "faking it" feels more right——typefaces created after the publication of *The Great Gatsby* actually make people "feel" the 1920s more, because they match our imagination of that era.

Historical serif subcategories: Humanist/Old Style, Transitional/Neoclassical, Slab serif/Egyptian. Sans serif subcategories: Geometric, Grotesque/Neo-grotesque, Humanist.

2.3 The type matrix: three layers of Skeleton-Flesh-Skin (Indra Kupferschmid)

Traditional classification is too coarse (the label "sans serif" alone covers hundreds of typefaces; Source Sans, Helvetica, and Outfit are all sans serif but have wildly different temperaments). The three-layer system is more practical:

First layer Skeleton(most critical, defines the basic form):
- Dynamic: Open, flowing strokes, letters with a slight slant → warm and friendly (check if e, a, s are open, and if o is slightly slanted).
- Rational: Tight, closed letters, upright → professional and formal (in Helvetica, e/a/s are closed, o is vertical).
- Geometric: Letters drawn from basic geometric shapes like circles and crosses → clean and modern (in Outfit, o/e are circles).
Second layer Flesh (strokes): Stroke weight contrast + serif form (clearest in serif typefaces; present but subtler in sans serifs).
Third layer Skin (details): Finer distinguishing features.

When to use: When two paired typefaces are both "sans serif" but still clash, use these three layers to see if their skeletons come from the same source——same skeleton is more harmonious; cross-skeleton pairings need to find echoes through Flesh/Skin.

2.4 Chinese type classification (seven categories, from "traditional" to "modern")

Category	Features / Origin	Latin equivalent
Kaiti	Derived from regular script (kaishu), retains the feel of the brush but with standardized proportions (circa 7th century)	Close to handwriting but already regularized
Xingshu / Handwriting style	Varies greatly with tool and writing speed	Script
Songti	Straight strokes + diamond serifs + strong contrast, suited for woodblock carving; mainstream from the Song to Ming dynasties,the most commonly used body text typeface to this day	Serif
Fangsong (Imitation Song)	"Song-like", with slightly slanted horizontal strokes and sharper serifs; widely used for classical editorial work in modern times	Transitional style
Heiti (Black/Sans)	"Hei" means black/dark; it is sans-serif, emerging in the early 20th century under European influence;one of the most popular styles in the digital age	Sans serif
Yuanti (Round Sans)	A subcategory of Heiti, with rounded stroke ends and corners	Rounded Sans
Decorative/Art typefaces	Showcase the personality and playfulness of Chinese characters	Display

Naming rule: "-shu (script)" refers to calligraphic styles, "-ti (form)" refers to print styles; print typefaces are often named after their calligraphic origins.

III. Type Selection Methodology (Choosing type)

Why: You cannot choose type solely based on "looking good". A perfect typeface that only has one weight, or does not support the language you need, is effectively unusable. Below is a four-checkpoint checklist plus emotional and contextual considerations.

3.1 A checklist for choosing type

Checkpoint 1: Fit for the project purpose

Personality should elicit an appropriate emotional response from the target audience (a skydiving instructor using a formal typeface → looks professional and trustworthy; selling eggs using an overly formal typeface → feels odd). Note:Emotion is subjective, different people may feel differently about the same typeface; do not rely only on gut feeling.
Design should match the use scenario (decorative type works well for logos but is a disaster for body text; monospaced type is best for code).

Checkpoint 2: Sufficiently complete design

Multilingual support: Especially critical for body text/inputtable content — characters not supported by the typeface will be substituted with another font, breaking style and proportions entirely and looking cheap. For multinational brands, prioritize typefaces covering multiple writing systems (Noto supports 1000+ languages and 150+ writing systems).
Clear and legible details: Specifically check whether I (uppercase i), l (lowercase L), and 1 (number one) are distinguishable (especially important for sans-serif). Counterexample: missing a flight because you could not tell Gate I from Gate 1.
At least basic weight and style sets: Regular / Italic / Bold (/ Bold Italic). More weights or variable fonts are better.
Bonus points: alternate glyphs / OpenType features (such as swashes, fractions, small caps, multiple numeral styles), more weights and widths,multiple optical sizes.

Checkpoint 3: Reliable font files

The features you checked above must actually be packaged in the specific file you are using (stripped versions vs professional versions, and versions from different font services may be missing glyphs).
Spacing must be well-crafted, and include kerning pair data.

Checkpoint 4: Usable (pairing + licensing)

Secondary typefaces should harmonize with the primary typeface.
Do not overlook licensing: Web/desktop software/app/e-books each require different licenses; use on a large corporate website costs far more than use on a personal logo → factor budget and licensing into your type selection.

About "Pro" in names: Around 2000 Adobe used it to indicate support for more languages, but now anyone can add "Pro" to a name → do not judge by the name, test it in practice.

3.2 Emotive considerations

Type is a "silent language"; everyone can feel its emotion, you do not need to be a designer. Key reminder:Do not look only at individual letters, look at the overall effect of a block of letters set together(Matthew Carter: A good typeface is not about every letter being beautiful, but about being beautiful when set together). There is also David Carson's rebellious stance: uniqueness does not require weird typefaces; it can be created through adjusting letter spacing and arrangement —Good typography is not just about choosing a pretty typeface, but about setting the text beautifully.

3.3 Choosing by scenario (beginner's guide for the web)

Three starting points: ① Is it suitable for headings/body text? ② Does it include the characters and symbols you need? ③ Does it have bold and italic?

Dimension	Rule of thumb
Project timeline	For long-term projects (e.g., magazine sites), choose large type families (Alegreya/Merriweather/Roboto), where one family covers multiple styles; for short-term projects (e.g., posters), a single weight is enough
Text length	Decorative type may be used for headings; for medium-length text of 3–4 paragraphs, either serif or sans-serif works;For long text of 5+ paragraphs, use serif(more comfortable for extended reading)
Font size	Use sans-serif below 16pt(high x-height and even strokes are more readable, e.g., Roboto/Montserrat/Raleway); for 16–24pt, geometric/humanist sans-serif or modern slab serif; above 24pt, display type may be decorative, but avoid those with overly large counters (look empty when enlarged)
Judging typeface quality	Check whether a, g, and numerals are bold and clear; low-frequency letters such as v/w/x/y/z can have more design flair
Multilingual	Typefaces that only support basic Latin will fall back to other fonts for accented letters after translation → choose ones with broad coverage (Merriweather/Noto)

3.4 Optical sizes

The same typeface has different versions designed for different sizes:Small-size version Lower stroke contrast, wider characters, looser spacing → more readable;Large-size (display) version Refined details, tighter spacing. This was standard practice in the metal type era (each size had to be cut separately anyway); phototypesetting and early computers switched to "one version scaled arbitrarily" for convenience, and now the optical size axis (opsz)has revived it, allowing stepless adjustment between body text and display sizes. Trade-off: adding optical size functionality makes the file 1.2–2.6 times larger.When to use: When a project uses both large and small sizes (from ads to small print captions), it keeps the design unified while optimizing each size; counterintuitive application — TV screens are large but viewers sit far away, so the actual visual size is roughly equivalent to a phone, and you should choose a clear, easy-to-read version following small-size logic.

3.5 Weights, styles, and the "faux font" trap

A basic family contains four styles: Regular, Italic, Bold, Bold Italic.Both bold and italic can be used for emphasis → generally choose only one(italic is mostly used for quotations, book titles, film titles; bold for hyperlinks, etc.).
Italic ≠ Oblique: Italic is a specially redesigned set of glyphs (a and g change shape, resembling handwriting); oblique is simply slanted upright type. To identify true italic, check whether a and g have changed form.
You must avoid faux bold/faux italic: Automatically synthesized by software when the real font file is missing. Faux italic is easy to spot (true italic has different a/g); faux bold is harder to spot (if it looks bloated after bolding and letter spacing is too tight, it is likely fake).The safest approach: choose a typeface that includes at least the four basic variants.

IV. Type Pairing

Why: Before adding a second typeface, ask yourself —Is it really needed? A single typeface, adjusted by size, case, spacing, weight and width, is often enough. Blindly adding typefaces only creates clutter.

4 legitimate reasons to add a second typeface: ① Switching content type (numerals alongside body text, annotations); ② Strengthening brand personality (the primary typeface is too serious, pair it with something lively); ③ Supplementing weights/widths/styles (the primary typeface lacks bold for headings, or lacks italic); ④ Supplementing missing features (the primary typeface lacks international characters, so a second one fills in for the body text).

How to pair without failing:

Core balance: The two should be different, but not too far apart.Too similar → readers cannot tell the difference, it looks like a mistake;Too far apart → they clash and look ugly.
Safest combination: One serif + one sans-serif.
Jessica Hische's "choosing family" metaphor:
- Brothers: Different styles within the same family, sharing letter height/thickness/width/style.
- Cousins: Two different typefaces with 2–3 similarities.
- Distant relatives: Only one shared trait.
Do not forget that historical styles should also echo each other (see 2.2).

Examples of harmony criteria: Different x-heights are fine, as long as stroke weights are similar and ascenders/descenders (vertical extensions) pair well, just as music needs moderate contrast to sound good. Analyze three or more typefaces by the same logic, and ask "is it really needed?" again every time you add one.

Pairing within a superfamily (e.g., Alegreya + Alegreya Sans) is the most worry-free "brothers" approach — inherently coordinated, with functional serif/sans-serif distinction.

V. Readability & Accessibility

Why: Poor readability is not as trivial as "not looking good" — it directly blocks some people (visually impaired, dyslexic, colorblind, presbyopic) from understanding your content. This section provides hard metrics that you can use for acceptance checks.

5.1 Two easily confused concepts

Legibility: Whether you can clearly distinguish the shape of individual characters/letters(typeface design level).
Readability:: How easy a block of text is to read (typography + font size + spacing level). With the same Roboto, changing only the font size can turn it from "hard to read" to "easy to read."

5.2 Check easily confused characters (legibility)

Open counters are better: Large internal white space in o, c, e → characters look larger, and similar letters are easier to tell apart.
Mirror/rotation easily confused pairs, confirm each pair below is distinguishable during acceptance:
- q/p d/b 0/O n/u i/l/1/I 6/9 a/8 a/6 6/g rn/m
- People with dyslexia more easily see b as d, 6 as 9 (reading bog as dog), and loin as lion.
For sans-serif, especially check L / l / 1 (all single vertical strokes). Adding serifs, tails, adjusting height or stroke weight can widen the distinction.
Typefaces specifically designed for legibility:Lexend, Atkinson Hyperlegible, Andika, Poppins (also welcomed by people with cognitive disabilities).

5.3 Color contrast (WCAG hard metrics)

Contrast ratio ranges from 1:1 to 21:1.WCAG AA minimum requirement:

Large text (14pt bold / 18pt regular and above) and graphics: ≥ against background 3:1.
Small text (body text): ≥ against background 4.5:1.
AAA level is more robust:7:1. Note do not blindly chase 21:1 pure black and white — it causes eye fatigue for people with cognitive disabilities/photosensitivity; 7:1 is a good compromise.
Tools: WebAIM contrast checker, Material Design contrast guidelines, color vision simulators.
Do not convey information by color alone: There are about 300 million colorblind people globally; 8% of men / 0.5% of women have red-green colorblindness; as eyes age, blue/yellow also become hard to distinguish → pair color with icons/shapes/text.
Note: "contrast" here refers to color contrast,≠ contrast in typeface design(the latter refers to the difference between the thickest and thinnest strokes of a glyph).

5.4 Font size and spacing (accessibility baseline)

A minimum body text size of 16px / 1em / 1rem is a safe choice.
Use relative units Do not fix line height — a fixed line height causes lines to overlap when users enlarge font size. Use sp on Android and Dynamic Type on iOS.
Do not make line height too large (lines feel disconnected), line length too wide, or letter spacing too tight (over-tightening causes letters to overlap and words to blur; some people are sensitive to "crowding").
Actionable practice: Ask non-designer friends to read type samples and see if they mention "crowding". Lexend and others are designed specifically for larger letter spacing.

VI. Practical Typography Rules of Thumb (Using type)

Why: Choosing the right typeface is only half the job; setting it well is what makes text truly readable. The values and rules below can be applied directly to design drafts.

6.1 Line height (mainly 115%–150%)

Optimal line height for Latin scripts is generally 115%-150%; languages with diacritics require larger values.
Smaller sizes need larger line height, larger sizes need smaller line height; large display type (e.g., 72px) can use 90%-100%(even smaller than the font size), and all-caps setting can be tighter (no ascender/descender conflicts).
The wider the line, the larger the line height: Mobile is narrow with short eye travel → tighter (around 130%); widescreen → looser (around 150%).
Line height changes with x-height: typefaces with large x-height look bigger, and need looser line height.
Starting suggestion: adjust from body text first, working from the narrowest viewport outward to wider ones. (Fun fact: line height originates from "leading" strips in metal type; 10pt type + 2pt leading = 12pt line height.)

6.2 Measure (45–75 characters / 15–20 Chinese characters)

For serif body text, recommended 45–75 characters per line; Material Design recommends 40–60;15–20 Chinese characters per line.
Too short → frequent line returns tire the eyes; too long → hard to find the start of the next line.
Trent Walton trick: Place asterisks at the 45th and 75th character positions; if both asterisks appear on the first line → the line is too long, narrow the container or increase font size.

6.3 Letter spacing: Tracking (whole passage) vs Kerning (letter pairs)

Tracking is letter spacing for a whole passage; use it cautiously or leave it untouched(it adjusts the spacing set by the designer). Three principles: ① All caps / small caps (especially at body text sizes) require increased letter spacing; ② Do not add so much that readability suffers; ③ Tighten spacing for large text, loosen spacing for small text(spacing tightens at a faster rate than the font size grows — text at 50px and 500px needs -30 / -60 respectively to look visually matched). Be careful with numerals and ligatures: a ligature is a single glyph whose internal spacing cannot be changed, so turn off ligatures before adding letter spacing; numerals are divided into tabular (monospaced, suitable for tables) and proportional (suitable for body text).
Kerning, the spacing between specific letter pairs, almost never needs manual adjustment. Font files include built-in kerning pair data that automatically handles combinations such as AV, To, and www. Manual adjustment is only needed in these cases: the font itself has poorly set spacing, the font has no automatic kerning, you are creating special effects for a logo, or you are fine-tuning when only a few letters are used. For practice, try Kerntype (type.method.ac).

6.4 Widows & orphans

Widow: the last word of a paragraph that appears alone at the top of the next page/column.
Orphan: a single word left stranded at the bottom of a page/column at the end of a paragraph; or the first line of a new paragraph appearing alone at the bottom of a page.
Easy to fix in print (manually adjust line breaks, or use non-breaking spaces to keep words from splitting);hard to completely avoid on web/apps(line breaks cannot be fixed because screen sizes vary). To handle it, use  , and complex scenarios require JS. Whether to address it is a judgment call for the designer.

6.5 Advanced: Small tricks for breaking the rules (Breaking the rules)

Reversed text needs careful weight adjustment: light-colored text appears heavier on screen and lighter in print → on screen, for light text on dark backgrounds reduce font weight, and for dark text on light backgrounds increase font weight; do the opposite for print.
Set punctuation and spaces in italics too when using italic text(otherwise they sit too close); but keep punctuation and spaces in regular weight when using bold.
Incremental line spacing: strictly aligning every line of small text to the baseline grid makes it look sparse, while large text looks cramped → align once every few lines.
Do not indent the first paragraph after a heading(CSS:p + p { text-indent: 1em; } only indent subsequent paragraphs).
Nudge large headings slightly to the left: the white space on the left side of large type makes it look indented, so shift the characters left (bleed if necessary) to align with the body text below.
Drop caps meeting quotation marks: move the opening quotation mark outside the text box, and let the actual first letter be the drop cap.
Footnote markers can be moved after punctuation to avoid awkward white space.

7. CJK and multiscript systems (Type in China, Japan, Korea)

Why: the typographic logic of Chinese, Japanese, and Korean is fundamentally different from that of Latin scripts; when PMs work on global/multilingual products, applying Latin typographic thinking to CJK will cause systematic errors.

7.1 Four major differences between CJK and Latin

Full-width, monospaced: Latin scripts mostly use proportional fonts, while CJK is mostly monospaced, with Chinese and Japanese glyphs filling a full square. Korean is more complex (characters are monospaced but punctuation is proportional; a recent trend uses narrower 850–950-unit widths to improve readability).
Different punctuation usage: the three writing systems share "full-width punctuation" but use it differently — Japanese defaults to full-width; Chinese mixes Latin punctuation and full-width punctuation; Korean defaults to Latin punctuation and only uses full-width brackets in special cases. In traditional Chinese (Hong Kong and Taiwan), the comma sits at the middle of the character height.
Balance relies on center of gravity, not the baseline:CJK There is no concept of a baseline; characters are balanced around the center of their square. A high center of gravity looks elegant, a low one looks casual.
No true italics: CJK has no true italics; emphasis is achieved with quotation marks/full-width brackets, dots beside characters, bolding, coloring, wavy underlines, and underlines (underlines are mostly used for subtitles); Japanese can also use katakana for emphasis.

7.2 Japanese: the only CJK language that uses multiple scripts

A single Japanese sentence may contain hiragana + katakana + kanji at the same time, plus Latin letters and numerals. Hiragana is a curved script simplified from kanji (originally used by women, now the main script); katakana takes parts of kanji (created by monks to annotate sutras, now mostly used for loanwords). Reasons Japan retains kanji: kana is phonetic while kanji is logographic, which resolves homophone ambiguity, aids sentence parsing (Japanese has no word separation), and makes sentences shorter.Tsume / Proportional adjustment (OpenType palt): although Japanese is designed to be full-width, kana vary in width and height, which can look uneven in narrow text boxes → use Tsume to reduce the white space on both sides of characters (fixed at the font design stage, users cannot change it); this differs from kerning — Tsume makes "the character itself narrower", while kerning "moves two characters closer together".

Korean (Hangeul) has largely phased out hanja and mainly uses Hangul; Chinese typefaces remain closely tied to calligraphy to this day, a result of the organic nature of Chinese characters.

8. Quick glossary (Glossary)

High-frequency terms, look them up as you encounter them. Terms already explained in detail above are not repeated here.

Basic concepts

Typeface font design: the overall visual style of letterforms (e.g., Songti, Helvetica), the abstract "look".
Font: the specific file that makes that design usable on a computer (Microsoft YaHei is a typeface, its bold weight is a font).
Character: an abstract writing symbol (letter/punctuation);Glyph is the specific drawn form of it (the same character has different glyphs in different fonts).
Script (writing system): a system of writing symbols (Latin/Cyrillic/CJK…).
Unicode: the standard that assigns a unique code to every character.
Homoglyph: different characters that look almost identical (I/l/1).

Style and weight

Weight / Width / Italic / Oblique(see 3.5).
Small caps: uppercase letters at the height of lowercase letters.
Grade: fine adjustment of thickness without changing the set width (often used for compensation across different backgrounds/print conditions).
Stylistic set: grouped replacement glyphs in OpenType.
Swash / Dingbat / Ligature.

Structure and metrics

Em / En: em ≈ the width of the font size square, en ≈ half an em (used for spacing, dashes).
Overshoot: round/pointed letters (o, A) intentionally extend slightly beyond the baseline/cap line so they appear visually equal in height.
Contrast (glyph): the difference between the thickest and thinnest strokes of the same letter (≠ color contrast).
Monolinear: a font with basically consistent stroke thickness.

Families and systems

Family: the collection of all weights and styles of the same design;Superfamily: a larger collection that crosses serif/sans-serif but shares a common skeleton (ideal for "sibling" pairing).
System font / web-safe font: fonts built into the operating system that do not need to be loaded.

Technology

OpenType: font technology that supports advanced features such as ligatures, alternate glyphs, and multiple numeral styles.
Variable font: allows stepless adjustment along "axes" within a single file; common axes:wght weight / wdth width / opsz optical size / slnt slant / ital italic / GRAD grade / MONO monospace; parametric axes (such as XOPQ thick strokes, XTRA internal width, YTLC lowercase height) provide lower-level control.
Hinting: instructions for how pixels align at small sizes to maintain clarity.
Subsetting: packaging only the characters used to reduce file size and speed up loading.
Faux/pseudo: software-synthesized fake bold/fake italic (avoid these, see 3.5).
FOIT / FOUT: the "flash of invisible text" / "flash of fallback text then switch" when web fonts load.
Reflow: text re-breaking into new lines after a font loads or the viewport changes.

Typography and application

Typography / Typesetting / Typographer.
Measure / line length(45–75 characters, see 6.2).
Hierarchy: using size/weight/color to establish primary and secondary information.
Rhythm: visual rhythm created by spacing and repetition.
Drop cap / Alignment & justification.
Scale: the type size ladder (type scale).

Quick checklist (for PM implementation)

Choosing body text fonts: sans-serif, large x-height, generous letter spacing, distinguishable I/l/1, at least four variants, and support for the languages you need. Long-form text can use serif.
Body text typesetting: font size ≥ 16px, line height 115%–150% (closer to 130% on narrow screens, closer to 150% on wide screens), line length 45–75 characters (15–20 for Chinese), left-aligned.
Contrast: small text ≥ 4.5:1, large text/graphics ≥ 3:1, aim for 7:1 for safety; do not rely on color alone.
Pairing a second font: first ask "is it really needed?"; if pairing, use serif + sans-serif, or fonts from the same superfamily; stroke thickness should be similar.
Pitfalls to avoid: faux bold/faux italic, using Latin-only fonts for multilingual content, not checking baselines when switching fonts, adding tracking to large blocks of body text, using decorative fonts for body text.