KNOWLEDGE NOTES

Knowledge Notes

Explore curated knowledge, course notes and methods, with their existing content and sources preserved.

This index lists complete English editions. Additional Chinese notes and bilingual updates remain available in the Chinese index.

350knowledge notes
Product Design & UX / Other Product, Design and Learning Materials

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

An in-depth Chinese-English typography reference based on Google Fonts' "Knowledge" column, which breaks down typefaces from "looks good by feel" into actionable judgment that PMs can follow when selecting type and setting type. It covers eight main sections: ① Type anatomy and vertical metrics (baseline / x-height / ascenders & descenders / em square · why baselines shift when you change typefaces). ② Type classification (genre: serif / sans serif / slab serif / monospaced / script / display · historical classification · seven Chinese type categories: Song, Kai, Hei, etc. · the three-layer Skeleton-Flesh-Skin type matrix). ③ Type selection methodology (4 major checklists: fit for purpose + design completeness + reliable files + usage license · emotional considerations · selection by project scale / text length / font size · optical sizes · weight and style · avoid fake bold and fake italic). ④ Type pairing (4 reasons why you need a second typeface · family metaphor: brothers / cousins / distant relatives · serif paired with sans serif is the safest choice · differences should be clear but not too distant). ⑤ Legibility and accessibility (legibility vs readability · lookalike characters Il1 / bdpq mirroring · open counters · WCAG contrast ratios 4.5:1 / 3:1 / AAA 7:1 · body text ≥16px · 8% of men have color vision deficiency · Lexend / Atkinson Hyperlegible). ⑥ Fully retained practical typography rules of thumb (line height 115–150% · line length 45–75 characters / 15–20 for Chinese · tracking: tighten for large sizes, loosen for small sizes · kerning almost never needs manual adjustment · widows and orphans · reverse text weight · techniques for breaking the rules). ⑦ CJK and multilingual script (full-width monospacing · no baseline, relies on visual center · no true italic · Chinese punctuation · Japanese three-script system + Tsume). ⑧ A quick-reference glossary of 30+ terms. Target audience: non-technical PMs, with in-line explanations of jargon, and Why / When to use / Counterexamples for each section. Division of labor with nngroup-visual-design-principles (an overview of visual design principles, with only one section on typography) and refactoring-ui (UI rules for non-designers, covering type scale / line length): this piece is a dedicated in-depth typography reference, with more detailed numerical values and glyph feature descriptions.

TypographyReadabilityAccessibilityEnglish edition