文字排版
Typography 处理文字在界面里的排布方式。它包括字体、字号、行距、字间距、对齐方式这些细节。中文界面里还要看汉字字面、标点、宋体或黑体的气质。它们会影响正文好不好读，按钮够不够醒目，表格扫起来累不累。
界面里很多信息最后都要靠文字被读出来。警告文案要清楚，表单标签要好找，代码块要对齐，标题和正文要一眼分开。这些都属于 Typography 的范围。
1. 字体分类与基本术语 (Font Classifications & Basics)
Typography (文字排版)
Typography 是安排文字的方式。选什么字体、字号多大、行距多宽、段落怎么对齐，都算在里面。中文排版还会关心汉字是不是挤、标点是不是太松、标题和正文的黑白关系是否舒服。排得好时，读者会先看到重点，再自然地找到正文和辅助信息。
字体排印 主标题 32px ═══════════════════ 字体排印是一门 安排文本的艺术， 正文 1.5em 以提高其可读性。 ────────────────── 设置 常规体 80% 无衬线体
Font (字体)
Font 是一套具体的字形。它规定汉字、字母、数字、标点和符号长什么样，也包含粗细、斜体等样式。在开发里，font 常常指 .ttf、.otf 这样的字体文件。换一套中文字体，标题可能从清爽变得正式，正文也可能因为字面大小不同而显得更密或更松。
Serif (衬线体)
Serif 是笔画末端带“小脚”或尖角的字体。中文里可以把宋体、明体这类有粗细变化和笔锋的字体放在一起理解。它们常见于长文、书籍感标题或偏正式的页面。放在小按钮和密集表格里时要多看一眼，细节太多可能会糊。
Sans-Serif (无衬线体)
Sans-serif 是没有衬线的字体，笔画末端比较干净。中文里的黑体、苹方、思源黑体都接近这个方向。它在屏幕上通常更利落，所以网页、App、按钮、导航和表单里很常见。字号小的时候，无衬线体一般更稳。
SERIF (衬线体) ══════════════════════════ 𝕿 𝖄 𝕻 𝕰 𝑻 𝒀 𝑷 𝑬 𝐓 𝐘 𝐏 𝐄 端点带装饰，笔画有粗细变化 ────────────────────────── SANS-SERIF (无衬线) ══════════════════════════ 𝖳 𝖸 𝖯 𝖤 𝗧 𝗬 𝗣 𝗘 𝘛 𝘠 𝘗 𝘌 端点更干净，笔画更均匀
Proportional Font (比例字体)
比例字体会按字形分配宽度。W 宽，i 窄，排出来更接近日常阅读。中文汉字通常接近方块宽度，但中文标点、英文、数字会让一行里的宽度发生变化。正文、说明文字、菜单和大多数界面标签通常都用比例字体。
Monospace (等宽字体)
等宽字体让每个字符占同样的宽度。W 和 i 都占一格，所以代码、终端、日志和编号更容易对齐。中文环境里常见的情况是汉字占两格、英文和数字占一格，排日志或表格时尤其要留意。需要逐行比较数字或符号时，等宽字体很有用。
PROPORTIONAL (比例字体) ┌─┐┌──┐┌───┐┌──┐ │i││ o││ W ││ e│ 字形越宽，占位越宽 └─┘└──┘└───┘└──┘ 3 5 8 5 MONOSPACE (等宽字体) ┌───┐┌───┐┌───┐┌───┐ │ i ││ o ││ W ││ e │每个字符占同一格 └───┘└───┘└───┘└───┘ 6 6 6 6
2. 文本布局与间距 (Layout & Spacing)
文字之间留多少空，会改变阅读感觉。汉字挤在一起会糊成一片，中文行距太紧会累，标点太松又会打断语气。间距调得合适，标题、正文和说明文字会更容易分清。
Tracking (字间距)
Tracking 是整体字间距，也就是把一段文字里的字符一起拉开或收紧。在 CSS 里通常用 letter-spacing 调。中文大标题有时会稍微加一点字距，让字面更展开；按钮和标签则要谨慎，字距太松会散，太紧又不好扫。
Kerning (字距微调)
Kerning 是单独调整一对字母之间的距离。比如 A 和 V 放在一起时，中间可能看起来空了一块，需要把它们靠近一点。中文正文里很少手动调 kerning，但中英混排、品牌字标、标题里的标点和英文组合，仍然会遇到局部空隙不顺眼的问题。
Leading (行间距)
Leading 是行与行之间的距离。在 CSS 里通常用 line-height 调。中文正文的字块更方，行距太紧时会像一整片灰块；留得太开，段落又会散。列表、表单和卡片里的多行文字也一样，行距太紧会显得堵。
─────── Ascent (升部线) Line 1 h e l l o ─┬───── Baseline (基线) │ │LEADING (基线到基线的垂直跨度) │ ─│───── Ascent (升部线) Line 2 │ w o r l d ─┴───── Baseline (基线)
Alignment (对齐方式)
Alignment 是文字怎么对齐。常见方式有左对齐、右对齐、居中和两端对齐。中文正文大多用左对齐或两端对齐，行首稳定，阅读会更顺。表格里的数字常用右对齐，比较大小会更快；居中更适合短标题，不适合长段落。
┋ LEFT (左对齐) ┋┋ RIGHT (右对齐)┋ ┋ 文字从左侧开始 ┋┋ 文字贴住右侧 ┋ ┋ 右边自然参差 ┋┋ 左边自然参差 ┋ ┋ CENTER (居中) ┋┋ JUSTIFY (两端对齐)┋ ┋ 左右同时参差 ┋┋ 文 字 拉 开 贴 齐 ┋ ┋ 重心在中轴 ┋┋ 左 右 边 线 平 整 ┋
3. 字形解剖学 (Type Anatomy)
字形解剖学看的是字母内部的线和部位。这套术语主要来自拉丁字母排印，但中文界面也会碰到同一个问题：同样是 16px，宋体、黑体和系统字体看起来可能不是一个大小。做按钮、输入框、图标加文字时，这些差异会影响垂直对齐。
Baseline (基线)
Baseline 是大多数字母“坐”在上面的那条线。中文字体也有自己的基线和字面框。文字和图标放在一行时，通常要看它们是否在视觉上对齐。基线乱了，按钮里的文字就会显得飘或下沉。
X-height (x 字高)
X-height 是小写字母主体的高度，可以把小写 x 当作参照。它不算 b 往上伸出的部分，也不算 g 往下掉的部分。中文没有 x-height 这个结构，但有“字面大小”的类似问题：同样字号下，有的中文字体看起来更满，有的留白更多。
Ascender (升部)
Ascender 是小写字母向上伸出的部分，比如 b、d、h 的上半截。升部高，行与行之间就需要多留一点空间，不然文字会显得挤。
Descender (降部)
Descender 是小写字母往基线下方伸出的部分，比如 g、j、p 的下半截。行距太紧时，降部最容易让上下两行看起来打架。
Cap Height (大写字高)
Cap height 是大写字母从基线到顶部的高度，比如 H 或 I。中文界面里经常有英文缩写、数字和图标一起出现，比如 VIP、AI、2FA。这些内容和汉字放在一行时，cap height 会影响它们看起来是否在同一条水平线上。
_ _____________________________ASCENDER LINE (升部线) | |_ ___ _______________________Cap Height (大写高度线) | | |_ _|______ _ __ _ _ _ _ ___Mean Line (等高线/x-Height) | | | | \ \/ /| '_ \ | | | | | | | | > < | |_) || |_| | |_| |___|/_/\_\| .__/__\__, | __BASELINE (基线) _______________|_|_____|___/____Descender Line (下延线) l I x p y
4. 数字排版度量单位 (CSS & Digital Units)
在网页和 App 里，文字大小、行高、间距都要写成单位。px 更直接，em 和 rem 会跟着字号变化，ch 适合按字符数估宽。中文界面还要留意“字数”不等于“宽度”：汉字、数字、英文和标点混在一起时，组件很容易变形。
PX (像素 / Pixel)
PX 是 CSS 里最常见的长度单位。写 16px，浏览器会按设备的 DPR 映射到实际物理像素。字号、边框、图标尺寸和组件间距经常用 px，因为它最直观，边界也清楚。
1. 标准屏幕 (DPR = 1) ▃▃ 1 CSS Pixel ▀▀ 1 个物理像素 2. 高清视网膜屏幕 (DPR = 2) ▃▃ ▃▃ ▀▀ ▀▀ 1 CSS Pixel ▃▃ ▃▃ ▀▀ ▀▀ 4 个物理像素
PT (点 / Point)
PT 是点，来自印刷单位，1pt 等于 1/72 英寸。在 iOS 等系统里，pt 也常用来表示逻辑尺寸，再由系统换算到屏幕像素。它更常出现在移动端系统设计和印刷排版里。
╭1 物理英寸 (1 Inch / 2.54 cm) ──────────────────────────╮ │ │ │72 PT (磅/点) ── 每个分格代表 1 pt │ ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤ 在 96 DPI 典型显示器上 (密度更高) ├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
EM (相对单位)
EM 是跟当前字号走的单位。当前文字是 16px，1em 就是 16px；如果文字变成 20px，1em 也跟着变成 20px。组件里的内边距、图标和装饰线想跟着文字一起放大缩小时，em 很顺手。
REM (Root EM / 根相对单位)
REM 也是相对单位，但它只看根元素 html 的字号。只要根字号是 16px，1rem 就是 16px，不会因为组件嵌套变来变去。设计系统里的字号和间距常用 rem，跨页面更容易保持一致。
Root font-size = 16px EM (跟随父级累乘) html 16px ╰─ parent: 1.5em = 24px ╰─ child: 1.5em = 36px REM (始终参考根字号) html 16px ╰─ parent: 1.5rem = 24px ╰─ child: 1.5rem = 24px
CH (Character Unit / 字符单位)
CH 是按字符宽度估算的单位，基准是当前字体里数字 0 的宽度。在等宽字体里，1ch 基本就是一个英文或数字字符宽。中文汉字通常比 1ch 宽，所以用它估中文输入框时要保守一点。代码块行长、表格列宽和数字输入框更适合用 ch。
1. 等宽字体 (Monospace Font) ╭─────┬─────┬─────┬─────╮ │ 0 │ i │ w │ l │ │ 1ch │ 1ch │ 1ch │ 1ch │ ╰─────┴─────┴─────┴─────╯ │<──────── 4ch ────────>│ 2. 比例/变宽字体 (Proportional Font) ╭─────┬─┬──────┬──╮ │ 0 │i│ w │l │ │ 1ch │ │ >1ch │ │ ╰─────┴─┴──────┴──╯ 以 "0" 的宽度为基准
5. 渲染与高级前端术语 (Rendering & Advanced Engineering)
用户看到的文字，最后要经过浏览器、操作系统和字体文件一起处理。中文字体文件通常更大，加载慢时更容易看到字体切换；备用字体的字面不同，也可能让一段中文重新换行。所以 Typography 到了网页里，也会变成前端问题。
Anti-aliasing (抗锯齿 / 字体平滑)
Anti-aliasing 是让文字边缘更平滑的处理。屏幕是由像素格子组成的，斜线和曲线很容易出现台阶。抗锯齿会在边缘放一些半透明像素，让小字号文字看起来不那么硬。
未开抗锯齿 (Aliased) ███ ███ ███ ███ 边缘落差明显，产生阶梯感 开启抗锯齿 (Anti-aliased) ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ 利用 ░ (25%)▒ (50%)▓ (75%)█ (100%) 像素羽化，肉眼看去边缘更平滑
Font Hinting (字体提示 / 字体微调)
Font hinting 会把字体里的关键笔画尽量对到像素边界上，尤其是横线和竖线。中文小字号有很多密集横竖笔画，比英文更容易发糊。低分辨率屏幕、表格、侧边栏和日志界面里，hinting 好不好会很明显。
Unhinted (未吸附像素边界) ├─── 像素 A ───┼────像素 B ───┤ 物理像素切面： ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 50%发光 50%发光 屏幕 ░░▒▒▒▒░░ ░░▒▒▒▒░░ 边缘模糊 ░░▒▒▒▒░░ Hinted (吸附像素边界) ├─── 像素 A ───┼────像素 B ───┤ 物理像素切面： ████████████████ 100%全亮 保持熄灭 屏幕 ░░██░░░░ ░░██░░░░ 边缘锐利 ░░██░░░░
FOIT (Flash of Invisible Text / 无形文本闪烁)
FOIT 是网页字体还没下载完时，浏览器先把文字藏起来，只保留位置。字体到了以后，文字才出现。用户会在短时间内看到一块空白，首屏内容也就没法立刻读。
FOUT (Flash of Unstyled Text / 无样式文本闪烁)
FOUT 是网页字体还没下载完时，浏览器先用系统默认字体显示文字。等网络字体到了，再切换过去。内容能更早读到，但字体一换，文字宽度和行高可能变化，页面会闪一下或跳一下。
Font Fallback (字体回退机制 / 字体栈)
Font fallback 是字体找不到时的备用顺序。浏览器会先试 font-family 里的第一个字体；如果设备上没有，或者某个汉字、标点或符号缺失，就继续往后找。中文字体栈写得好，页面在不同系统上不容易突然变样，也不容易出现缺字方块。
Ligature (连字 / 合体字)
Ligature 会把相邻的字母或符号合成一个字形。传统排版里，fi 这类组合可以避免笔画撞在一起；编程字体里，=> 可能会显示成一个箭头。代码和数学表达要稍微谨慎：符号变顺了，有时也会让人看不出原来的字符。
输入 输出
编程连字 ! = ≠
= > ⇒
= = = ≡
< - - ⟵
──────────────
传统排版连字 fi fi f 的上钩与 i 的点打架
fl fl f 的横笔与 l 的顶端碰撞