字体排版
Typography也常被叫作：字体字号排版行距文字样式字体样式
「页面上的文字用什么字体、多大、行距多少，让文字读着舒服、有层次。」
字体排版 Typography
字号、字重、行高、字体的组合规则，让文字读得舒服、主次分明。
字体排版管四件可观察的事：字号（字多大）、字重（多粗）、行高（行与行的距离）、字体（用什么字体）。它不是「选个好看的字体」就完事——同一个字体，字号和行高配得不对，读起来照样难受。中文网页一个实用的起点是：正文 14-16px、行高 1.5-1.8；标题用更大的字号加更重的字重，和正文拉开差距。
排版要像间距、圆角一样成体系：全站只用一套字号阶梯（比如 12 / 14 / 16 / 20 / 24 / 32），正文、辅助文字、各级标题各占几档。最常见的翻车是字号随手填：页面同时出现 15、16、17、18 几个几乎一样的数，标题 18 正文 15，看起来好像有层级，其实谁都不比谁突出。另一个翻车是行高：大段正文行高低于 1.4，字和字挤在一起，读一行要找半天。
字体数量也要控制。全站字体家族（font-family）控制在两个以内：一个给正文、一个给标题；中文字体和西文字体各归各的位置。超过两个，页面就像报纸拼贴。判断排版好坏有个偷懒办法：把页面截图缩到 50%，如果还能一眼分清「哪是标题、哪是正文、哪是小字」，排版就及格了。
长什么样 真实可交互，不是截图
行高 1.2，字挤成一团
同一页混了 3 种字体家族
左：从 28 到 12 的清晰阶梯，缩到一半还能分清层级。右：标题只比正文大 1px、行高 1.2、三种字体混用——每一项单看都不算错，合起来就是「哪里都没错但就是乱」。
拆开看，里面有这几块
-
1
字号 Font size
字的大小，正文常见 14-16px。它是排版的骨架，层级主要靠它拉开。
-
2
字重 Font weight
字的粗细（细/常规/半粗/粗），用来在字号不变的情况下加重某个词。
-
3
行高 Line height
行与行的距离，常写成字号的倍数（1.5 表示 1.5 倍）。正文低于 1.4 就挤了。
-
4
字体家族 Font family
用哪套字体。全站建议控制在两个以内，正文一个、标题一个。
-
5
字距 Letter spacing
字与字的间距。中文正文一般不用动，标题可以略松。
常见的有哪几种
14-16px、常规字重、行高 1.5-1.8，是读得最多的字。
用在：文章、说明文字、表单标签
比正文大 2-4 档、字重更重，负责「一眼看到重点」。
用在：页面主标题、区块标题
12-13px、灰色，负责「有但不重要」。
用在：时间戳、说明、页脚
表格数字、代码用等宽字体，数字对得齐不晃。
用在：数据表、代码块、价格
容易搞混？这样区分
「换个字体」和「改字号」是两件事：字体是字长什么样（宋体/黑体/无衬线），字号是字多大（14px/18px）。AI 说「换了字体」你可能以为风格变了，其实它只改了大小。下单时要说清改哪个。
行高是同一段文字内部行与行的距离，间距是不同元素之间的距离。把「行距太挤」当成元素间距去调，会调错地方：行距看 line-height，元素间距看 margin/padding。
看 间距什么时候用得上
正文 15-16px、行高 1.7 左右，段与段之间再留间距，长文读起来不累。
页面主标题、区块标题、卡片标题用三档字号，一眼能分出谁大谁小。
标签用正文档，提示文字用辅助档，输入框里的字和标签同档，别忽大忽小。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【任务】给 [范围] 建立一套字体排版体系 【规格】 - 全站字号只允许这套阶梯：[12 / 14 / 16 / 20 / 24 / 32]，按角色分配：正文 = 16、辅助文字 = 12、区块标题 = 20、页面主标题 = 32 - 正文行高 1.7，辅助文字行高 1.5 - 标题字重比正文重（粗体），但不许整段正文加粗 - 字体家族全站不超过两个：中文一套、英文数字一套 【要求】先给我一份「角色 → 字号 / 行高 / 字重」对照表确认，再动手 【边界】不动颜色、间距、圆角、布局；不要为了「好看」引入外部字体文件，除非我同意 【交付】列出改了哪些文件、每处从什么值改成什么值；我打开哪个地址能看到正文和标题的差别；你没验证的部分单独说
把字号阶梯和「角色 → 档位」写死，AI 就不会随手填 15、17、19。行高单独给值，因为这是最容易被漏掉的参数——只改字号不改行高，正文照样挤。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 打开页面数一遍实际出现的字号，应该只落在你定的阶梯里，没有 15、17、19 这种漏网。
- 开发者工具里看正文的 line-height 是 1.7 左右，不是 1.2 的挤。
- 标题和正文大小差得明显（至少差一档以上），不是 16 对 17。
- 全站字体家族不超过两个；同一段话里没有某几个字字体不一样。
- 把页面截图缩到 50%，还能一眼分清标题、正文、辅助文字。
它常这么糊弄你
- 「排版已优化」——但字号还是 15、16、17、18 一堆几乎一样的数，层级没建立。逐个角色量。
- 「行高调到了 1.8，更透气」——但那只是标题的行高，正文还是 1.2 挤成一团。分开查。
- 「用了系统字体，保证兼容」——但字体栈第一个字体在你机器上不存在，一路回退到默认，跟你看到的不一样。换个电脑看一遍。
- 「标题加粗了」——但整段正文都加粗，等于没加粗。层级靠字号和字重，不是靠「到处都是重点」。
排版这类纯视觉任务最高能验到「主路径」层：浏览器开发者工具里看 font-size、line-height、font-family 的真实值，自己就能查。重点查「字号是不是一套阶梯」和「行高是不是真的配了」，不要被「字体换了很好看」糊弄。
考考你 选一个你觉得对的
AI 说「排版优化好了，标题用了 18px」。页面上一看，标题和正文几乎分不出来。最可能的原因？
层级靠「差得明显」：标题和正文通常差 2-4 档（16 → 20/24）。只差 2px 在视觉上等于没差。A 的 40px 是另一个极端；C 加下划线是链接的语义，不是层级手段；D 把问题推给设备。