构建信号SIGNAL TO BUILDEnglish站主登录 ↗
← 知识整理
产品设计与用户体验 ／ 知识整理 · 中文

排印与字体知识(Google Fonts Knowledge:字体分类解剖/选字配对/可读性无障碍/CJK多文字/术语表)

Google Fonts「Knowledge」栏目的中英排印深度参考,把字体从'凭感觉好看'拆成 PM 选字排版时能照做的判断力。八块主线:①字体解剖与垂直度量(基线/x-height/上下延伸/字符空间 em square·换字体会跳基线的原因)。②字体分类(genre:衬线/无衬线/平板衬线/等宽/手写/装饰·历史分类·中文七类宋楷黑·字体矩阵 Skeleton-Flesh-Skin 三层)。③选字方法论(4 大清单:合用途+设计完整+文件可靠+使用许可·情感考量·按项目规模/文本长度/字号挑·光学尺寸·字重样式·伪粗体伪斜体要避开)。④字体配对(为什么要第二种字体的 4 个理由·家人比喻兄弟/堂兄弟/远亲·衬线配无衬线最安全·区别要够但别太远)。⑤可读性与无障碍(legibility vs readability·相似字符 Il1/bdpq 镜像·开放字腔·WCAG 对比度 4.5:1/3:1/AAA 7:1·正文 ≥16px·色盲 8% 男性·Lexend/Atkinson Hyperlegible)。⑥排版实操经验法则全保留(行高 115-150%·行长 45-75 字符/中文 15-20·tracking 大字收紧小字放宽·kerning 几乎不用手动·孤行孤字·反白字重·打破规则技巧)。⑦CJK 与多文字(全角等宽·无基线靠重心·无真斜体·中文标点·日语三套文字+Tsume)。⑧30+ 术语速查表。读者=非技术 PM,术语行内解释,每块带 Why/何时用/反例。与 nngroup-visual-design-principles(视觉原理概览,字体只一节)和 refactoring-ui(给非设计师的 UI 规则,type scale/行长)分工:本篇是专门的排印深度参考,数值与字形特征描述更细。

资料来源：其他产品、设计与学习资料 · 本站发布：2026-09-26 · 笔记更新：2026-06-03

字体排印可读性无障碍

这批笔记回答一个 PM 常被卡住的问题:面对几百上千款字体,我该按什么标准选?选完怎么排,文字才好读、不显廉价? Google Fonts 的「Knowledge」栏目把"凭感觉"拆成一套可操作的判断力。

核心一句话:好排版不是审美天赋,是一连串能背下来的具体规则——选字看"合用途 + 设计完整 + 文件可靠 + 有授权"四关;排文字守行高、行长、字距几条经验数值;无障碍靠对比度和易混字符的硬指标。做菜的类比:普通食材(默认字体)只要烹饪(排版)得好,一样出彩;反过来,再好的字体排得乱,读者也想关掉。

八块主线: 一、字体解剖与垂直度量——认识基线/x-height 这些词,才懂"为什么换个字体页面就跳了"。 二、字体分类——genre 分类(衬线/无衬线/…)+ 中文七类 + 字体矩阵三层,给"讨论和挑选"一个框架。 三、选字方法论——四关清单 + 情感考量 + 按场景挑 + 光学尺寸。 四、字体配对——什么时候真需要第二种字体,以及怎么配不翻车。 五、可读性与无障碍——legibility/readability 区别 + 易混字符 + WCAG 对比度硬指标。 六、排版实操经验法则——行高/行长/字距/孤行孤字 + 打破规则的技巧,数值全保留。 七、CJK 与多文字系统——全角等宽、无基线、无斜体、日语三套文字。 八、术语速查表——30+ 高频词中英对照。

与邻居的分工:NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表) 是视觉原理概览(字体只占一节,讲术语表+搭配+阅读字体);Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 是给非设计师的 UI 实战规则(type scale 手挑、行长 45-75、行高随宽度反向变)。本篇是专门的排印深度参考——字形特征怎么用文字描述、各类字体的历史与气质、CJK 与无障碍的细节,这里最全。三篇有意重叠的部分(行长/行高/x-height)在此给出更细的来由,可直接交叉引用。

一、字体解剖与垂直度量(Type anatomy & vertical metrics)

Why:不认识这几个词,你就无法解释一个真实的坑——换字体或加字体后,字号没变,文字却"跳"了、对不齐基线了。根因全在垂直度量上。所以这一节是后面所有内容的地基。

1.1 一个字母身上的部件(拉丁字体解剖)

术语(EN / 中) 是什么 例字
Baseline 基线 几乎所有字符底部对齐的那条线 所有字母站在它上面
X-height x 高度 小写字母主体的高度(不含上下延伸) x、a、e 的高度
Cap height 大写高度 大写字母顶部基准 H、L、T 的顶
Ascender 上升部 小写字母超出 x-height 向上的部分 h、l、b 的上半
Descender 下降部 小写字母低于基线向下的部分 g、j、p、q、y 的尾
Counter 字腔/字母内空 字母内部封闭或半封闭的空白 o、b、d 的里面
Stem 主干笔画 字母的竖直或主要笔画 T、H、L 的竖
Terminal 末端 (尤指无衬线)笔画的收尾 f 顶部的圆角
Serif 衬线 笔画末端的装饰性脚 Times 笔画末尾的小撇
Ligature 连字 两个字母合并成一个字形 fi、fl、æ
Ink trap 墨补 笔画交汇处故意留的小缺口,防印刷时墨水糊开 早期/小字号字体常见
Small cap 小型大写 设计成小写高度的大写字母 正式排版用

PM 只需记住三条横线:cap height(大写顶)> x-height(小写主体)> baseline(底)。其余术语是字体设计师的语言,你遇到再查即可。

1.2 字符空间(em square)与"为什么换字体会跳"

字体设计师把每个字母放进一个透明方框,叫字符空间(em square),内部分成 1000 份(经典做法上 800 / 下 200)。你设字号 14px,其实是在设这个方框的大小,不是字母本身的大小——设计师可以把字母放在框里任意高度。

后果(这是高频实战坑):

  • 相同字号,不同字体,看起来一大一小。因为 x-height 不同:x-height 大的字体显得更大、更易读(小字尤其明显);标题大字差异不明显,正文小字差异很明显。
  • 换字体后基线对不齐。改品牌、做按钮、调布局时,即使字号行高没动,文字也可能不再整齐落在同一基线 → 替换字体(尤其替换粗体)时务必肉眼核对对齐。
  • x-height 大 → 字母内空大 → 通常要相应加大行距。

何时用:做设计系统/组件库时,选字体别只比字号数字,要并排看 x-height 和上下延伸,否则换皮后整套间距都要返工。

二、字体分类(Classification)

Why:世界上字体太多,分类是"讨论和缩小选择范围"的工具,不是绝对真理(一款字体可能同时属于几类)。分类帮你快速排除不合适的大类。

2.1 Genre 类型分类(在线字体库里最常见)

衬线体 Serif / 无衬线体 Sans serif / 平板衬线 Slab serif(埃及体)/ 等宽 Monospaced / 手写体 Script / 书法体 Calligraphy / 装饰体 Display。

类型 字形特征(文字描述) 气质 / 何时用
Serif 衬线 笔画末端有装饰脚,常有粗细对比 经典、优雅、可信;长文正文首选(5 段以上、新闻、书)
Sans serif 无衬线 笔画末端干净无脚 简约、现代、中性;小字号 UI / 屏幕正文
Slab serif 平板衬线 衬线粗而方,像盖了块板 厚重、有力;中等字号标题、品牌
Monospaced 等宽 每个字符占一样宽 代码、表格对齐;机械感
Script 手写/书法 字母连笔、像手写 亲切、感性;只配标题/logo,不配正文
Display 装饰 个性强、细节多 大字号标题、海报;放大才好看,绝不做正文

2.2 历史分类与"时代感"

字体能唤起特定年代的联想:哥特体→中世纪,圆润字体→70 年代迪斯科。Why 要懂这层:① 选字要符合项目的时代感(做现代品牌别用太古典的字;做 1920 年代道具要用那年代的字);② 配对时历史风格要统一,除非刻意制造冲突。有意思的反直觉:有时"假装"更对味——《了不起的盖茨比》出版后才诞生的字体,反而更能让人"感觉到"1920 年代,因为它符合我们对那个时代的想象。

衬线历史子类:人文体/古风(Humanist/Old Style)、过渡体/新古典(Transitional)、平板衬线/埃及体。无衬线子类:几何体(Geometric)、怪诞体/新怪诞体(Grotesque/Neo-grotesque)、人文体。

2.3 字体矩阵:Skeleton-Flesh-Skin 三层(Indra Kupferschmid)

传统分类太粗(光"无衬线"就成百上千款,Source Sans / Helvetica / Outfit 全是无衬线却气质迥异)。三层系统更实用:

  • 第一层 Skeleton 骨架(最关键,定基本形态):
    • 灵动型 Dynamic:笔画开放流畅、字母略带倾斜感 → 亲切友好(看 e、a、s 是否开口,o 是否微斜)。
    • 理性型 Rational:字母紧凑闭合、竖直 → 专业正式(Helvetica 的 e/a/s 闭合,o 垂直)。
    • 几何型 Geometric:用圆、十字等基本几何形画字母 → 整洁现代(Outfit 的 o/e 是圆)。
  • 第二层 Flesh 笔画:粗细对比 + 衬线形态(衬线字体看得最清,无衬线也有但弱)。
  • 第三层 Skin 细节:更细的区别特征。

何时用:配字两款都是"无衬线"还是打架时,用这三层看它们骨架是否同源——同骨架更和谐,跨骨架要靠 Flesh/Skin 找呼应。

2.4 中文字体分类(七类,从"传统"到"现代")

类别 特征 / 来由 类比拉丁
楷体 Kaiti 源自楷书,保留毛笔触感但比例标准化(约 7 世纪) 接近手写但已规整
行书/手写体 随工具和书写速度变化大 Script
宋体 Songti 直线 + 菱形衬线 + 强对比,适合木刻雕版;宋→明主流,至今最常用正文字体 Serif
仿宋体 "类宋",水平笔画微倾、衬线更锐;近代多用于古典编辑 过渡风
黑体 Heiti "黑"=黑/暗,无衬线,20 世纪初受欧洲影响出现;数字时代最流行之一 Sans serif
圆体 Yuanti 黑体子类,笔画尖端和拐角圆角 圆角 Sans
装饰/艺术体 展现汉字个性与趣味 Display

命名规律:"-书"指书法风格,"-体"指印刷风格,印刷体常以其书法源头命名。

三、选字方法论(Choosing type)

Why:选字不能只凭"好看"。一款完美但只有一种字重、或不支持你需要的语言的字体,等于不能用。下面是一套四关清单 + 情感与场景考量。

3.1 四关清单(A checklist for choosing type)

第 1 关:合项目用途

  • 个性能引起目标受众的合适情感反应(跳伞教练用正式字 → 显专业可信;卖鸡蛋用太正式字 → 怪)。注意:情感是主观的,不同人对同一字感受可能不同,别只凭感觉。
  • 设计合使用场景(装饰字做 logo 好、做正文灾难;等宽字最适合代码)。

第 2 关:设计够完整

  • 多语言支持:正文/可输入内容尤其重要——字体不支持的字符会被替换成别的字体,样式比例全乱,显廉价。跨国品牌优先选覆盖多书写系统的(Noto 支持 1000+ 语言、150+ 书写系统)。
  • 细节清晰易认:重点查 I(大写i)、l(小写L)、1(数字一)是否分得清(无衬线尤其要查)。反例:分不清 I 登机口还是 1 号登机口而误机。
  • 至少有基本字重样式:Regular / Italic / Bold(/ Bold Italic)。更多字重或可变字体更好。
  • 加分项:替换字形(alternate glyphs / OpenType 功能,如花体、分数、小型大写、多种数字)、更多字重宽度、多种光学尺寸。

第 3 关:字体文件可靠

  • 上面查到的功能要真的打包在你用的那个文件里(精简版 vs 专业版、不同字体服务的版本可能缺字形)。
  • 间距要做好,且含 kerning pair 数据。

第 4 关:能用(配对 + 授权)

  • 作辅助字体要与主字体和谐。
  • 授权别忽略:网页/桌面软件/App/电子书各需不同 license,大公司网站用比个人 logo 用贵得多 → 选字时把预算和授权算进去。

关于名字带 "Pro":2000 年左右 Adobe 用来表示支持更多语言,但现在谁都能加 "Pro" → 别看名字,实际试用。

3.2 情感考量(Emotive considerations)

字体是"无声的语言",人人都能感受到它的情绪,不需要是设计师。关键提醒:别只看单个字母,要看一堆字母放一起的整体效果(Matthew Carter:好字体不在每个字母都美,而在合在一起时美)。还有 David Carson 的反叛立场:独特感不必靠奇怪字体,靠调字距和排列也能造出来——好排版不止是选漂亮字体,更是把文字排得好看。

3.3 按场景挑(网页新手指南)

三个起手要点:① 适不适合做标题/正文;② 有没有你要的文字和符号;③ 有没有粗体斜体。

维度 经验法则
项目周期 长期项目(杂志站)选大字体家族(Alegreya/Merriweather/Roboto),一族搞定多样式;短期(海报)单字重够用
文本长度 标题可用装饰字;3-4 段中等长度衬线/无衬线都行;5 段以上长文用衬线(更耐读)
字号 16pt 以下用无衬线(x-height 高、笔画均匀更易读,如 Roboto/Montserrat/Raleway);16-24pt 几何/人文无衬线或现代平板衬线;24pt 以上展示字可装饰,但避开字腔过大的(放大显空)
判别字体质量 看 a、g 和数字是否大胆清晰;v/w/x/y/z 这些低频字母可以更有设计感
多语言 只支持基础拉丁的字,翻译后带重音字母会掉成别的字体 → 选覆盖广的(Merriweather/Noto)

3.4 光学尺寸(Optical sizes)

同一字体为不同尺寸做不同版本:小字版笔画对比小、字偏宽、字距大 → 更易读;大字版(display)细节精致、字距紧。金属活字时代本就这么做(反正每号要单独刻),照排和早期电脑为省事改成"一个版本随便缩放",现在可变字体的光学尺寸轴(opsz)让它复活,能在正文到展示尺寸间无级调。代价:加光学尺寸功能会让文件变大 1.2-2.6 倍。何时用:一个项目里大小字号都有(广告到小字说明),用它能既统一又各自最佳;反直觉应用——电视屏幕大但人坐得远,实际视觉大小≈手机,该按小字逻辑选清晰耐看的版本。

3.5 字重、样式与"伪字体"陷阱

  • 一个家族基本含四件:Regular、Italic、Bold、Bold Italic。粗体和斜体都能强调 → 一般只选一种用(斜体多用于引用、书名、片名;粗体用于超链接等)。
  • 斜体 Italic ≠ 倾斜体 Oblique:斜体是专门重新设计的新字形(a、g 会变样、像手写);倾斜体只是把正体斜过来。识别真斜体看 a、g 是否换了造型。
  • 必须避开伪粗体/伪斜体(faux):软件在缺真字体文件时自动合成。伪斜体易认(真斜体 a/g 不一样);伪粗体难认(若加粗后臃肿、字距过紧很可能是假的)。最稳办法:选一款至少含四种基本变体的字体。

四、字体配对(Pairing)

Why:加第二种字体前先自问——真需要吗? 单字体靠改大小、大小写、间距、字重宽度,往往就够。盲目加字体只会乱。

真需要第二种字体的 4 个理由:① 内容类型切换(正文旁边的数字、注释);② 强化品牌个性(主字太严肃,配个活泼的);③ 补字重/宽度/样式(主字没粗体做标题、没斜体);④ 补缺失功能(主字缺国际字符,正文用第二种顶上)。

怎么配不翻车:

  • 核心平衡:两款要有区别,但别差太远。太像 → 读者看不出区别、像出错;太远 → 互相打架、难看。
  • 最安全组合:一款衬线 + 一款无衬线。
  • Jessica Hische 的"选家人"比喻:
    • 亲兄弟:同一家族不同样式,共享字母高度/粗细/宽度/风格。
    • 堂兄弟:两款不同字体,有 2-3 个相似点。
    • 远亲:只有 1 个共同点。
  • 别忘了历史风格也要呼应(见 2.2)。

和谐的判据举例:x-height 不同没关系,只要笔画粗细相近、长短(上下延伸)搭得好,就像音乐需要适度对比才好听。三款以上字体同理分析,且每加一款都再问一次"真的需要吗"。

同族超家族配对(superfamily,如 Alegreya + Alegreya Sans)是最省心的"亲兄弟"路线——天生协调,又有衬线/无衬线的功能区分。

五、可读性与无障碍(Readability & accessibility)

Why:可读性差不是"不好看"那么轻——它直接挡住一部分人(视障、阅读障碍、色盲、老花)读懂你的内容。这一节给的是硬指标,可以照着验收。

5.1 两个易混概念

  • Legibility 可辨识度:能不能看清单个字符/字母的形状(字体设计层面)。
  • Readability 可读性:整段文本好不好读(排版 + 字号 + 间距层面)。同一款 Roboto,只改字号就能从"难读"变"好读"。

5.2 检查易混字符(legibility)

  • 开放字腔更好:o、c、e 内部空白大 → 字看着更大、相似字母更易区分。
  • 镜像/旋转易混对,验收时确认下面每对都分得清:
    • q/p d/b 0/O n/u i/l/1/I 6/9 a/8 a/6 6/g rn/m
    • 阅读障碍者更易把 b 看成 d、6 看成 9(把 bog 读成 dog)、把 loin 看成 lion。
  • 无衬线尤其要查 L / l / 1(都是单竖线)。加衬线、尾巴、调高度或笔画粗细能拉开区别。
  • 专为易读设计的字体:Lexend、Atkinson Hyperlegible、Andika、Poppins(认知障碍者也欢迎)。

5.3 颜色对比度(WCAG 硬指标)

对比率从 1:1 到 21:1。WCAG AA 最低要求:

  • 大文本(14pt 粗体 / 18pt 常规及以上)和图形:与背景 ≥ 3:1。
  • 小文本(正文):与背景 ≥ 4.5:1。
  • AAA 级更稳:7:1。注意别一味追 21:1 纯黑白——认知障碍/光敏者会眼疲劳,7:1 是好折中。
  • 工具:WebAIM contrast checker、Material Design 对比指南、色觉模拟器。
  • 不能只靠颜色传信息:全球约 3 亿色盲,8% 男性 / 0.5% 女性红绿色盲;眼睛老化后蓝/黄也难辨 → 颜色要配图标/形状/文字。
  • 注意:这里的"对比度"指颜色对比,≠ 字体设计里的对比度(后者指字形最粗与最细笔画之差)。

5.4 字号与间距(无障碍底线)

  • 正文最小用 16px / 1em / 1rem 是安全选择。
  • 用相对单位别固定行高——用户放大字号时固定行高会让行重叠。安卓用 sp、iOS 用 Dynamic Type。
  • 行高别太大(行间脱节)、行长别太宽、字符间距别太挤(过挤会让字母重叠、单词糊掉,部分人对"拥挤 crowding"敏感)。
  • 可操作做法:请非设计师朋友读字体样本,看他们会不会提"挤"。Lexend 等就是为更大字母间距而设计。

六、排版实操经验法则(Using type)

Why:选好字只是一半,排得好才让文字真正好读。下面这些数值和规则可直接落到设计稿。

6.1 行高 Line height(115%-150% 为主)

  • 拉丁文最佳行高一般 115%-150%;带变音符号的语言要更大。
  • 小字号要大行高,大字号要小行高;展示大字(如 72px)可用 90%-100%(甚至小于字号),全大写排版可更紧(没有上下延伸冲突)。
  • 行越宽,行高越大:移动端窄、视线移动短 → 较紧(约 130%);宽屏 → 较松(约 150%)。
  • 行高随 x-height 变:x-height 大的字看着大,要配更松行高。
  • 起手建议:从正文开始调,从最窄视口往宽扩。(冷知识:line height 源自金属活字的"铅条",10pt 字 + 2pt 铅条 = 12pt 行高。)

6.2 行长 Measure(45-75 字符 / 中文 15-20 字)

  • 衬线正文建议 45-75 字符/行;Material Design 建议 40-60;中文 15-20 字。
  • 太短→视线频繁换行累;太长→找不到下一行起点。
  • Trent Walton 小技巧:在第 45 和 75 字符处放星号,若两个星号同时出现在首行 → 行太长,该收窄容器或加大字号。

6.3 字距:Tracking(整段) vs Kerning(字偶)

  • Tracking 整段字距,要谨慎或干脆不动(它改的是设计师定好的间距)。三原则:① 全大写/小型大写(尤其正文尺寸)要加字距;② 别加过头伤阅读;③ 大字收紧、小字放宽(字距收紧速度比字号增长快——50px 与 500px 文字要分别 -30 / -60 才视觉匹配)。数字和连字要小心:连字是单一字形改不了内部间距,加字距前先关连字;数字分表格式(等宽,适合表格)和比例式(适合正文)。
  • Kerning 字偶间距,几乎不用手动调。字体文件自带 kerning pair 数据,自动处理 AV、To、www 这类组合。只有这些情况才手动:字体本身间距没做好、字体没自动 kerning、做 logo 要特效、或只用几个字母时微调。练手可玩 Kerntype(type.method.ac)。

6.4 孤行与孤字(Widows & orphans)

  • 孤行 widow:段落最后一个词单独跑到下一页/栏顶部。
  • 孤字 orphan:段末单词孤零零留在页/栏底部;或新段首行单独出现在页底。
  • 印刷品好修(手动调换行,或用不间断空格让词不拆开);网页/App 难完全避免(屏幕尺寸各异不能固定换行)。要处理就用  ,复杂场景需 JS。是否处理由设计师权衡。

6.5 进阶:打破规则的小技巧(Breaking the rules)

  • 反白字重要调:屏幕上浅色字显得重、印刷时显得轻 → 屏幕上深底浅字减字重、浅底深字加字重;印刷反过来。
  • 斜体的标点和空格也设斜体(否则贴太近);但粗体的标点空格保持常规。
  • 递增行距:小字每行严格对基线网格会显稀疏,大字会显挤 → 每隔几行对齐一次。
  • 标题后第一段不缩进(CSS:p + p { text-indent: 1em; } 只让后续段缩进)。
  • 大标题向左微移:大字左侧空白明显像缩进了,把字往左挪(必要时出血)对齐下方正文。
  • 首字下沉遇引号:把开头引号移出文本框,让真正首字母做下沉字。
  • 脚注标记可移到标点之后,避免空白不协调。

七、CJK 与多文字系统(Type in China, Japan, Korea)

Why:中日韩文跟拉丁文的排版逻辑根本不同,PM 做出海/多语言产品时若拿拉丁思维套 CJK 会出系统性错误。

7.1 CJK vs 拉丁四大区别

  1. 全角、等宽 Full-width monospaced:拉丁多为比例字体,CJK 多等宽,中日字体填满全方格。韩文较复杂(字符等宽但标点比例化,近年趋势用窄幅 850-950 单位提可读性)。
  2. 标点用法不同:三种文字共用"全角标点"但用法各异——日文默认全角;中文混用拉丁标点和全角;韩文默认拉丁标点,仅特殊情况用全角括号。中文传统(港台)逗号位于字高中间。
  3. 平衡靠重心,不靠基线:CJK 没有基线概念,字符围绕方格中心平衡。重心高显优雅,低显随意。
  4. 没有真斜体 No italics:CJK 无真正斜体,强调靠引号/全角括号、字旁小点、加粗、着色、波浪线、下划线(下划线多用于副标题);日文还可用片假名强调。

7.2 日语:唯一用多套文字的 CJK 语言

一句日语可能同时含平假名 + 片假名 + 汉字,还要配拉丁字母和数字。平假名是汉字简化的曲线形(最初女性使用,今为主文字);片假名取汉字一部分(僧侣为给经文注音而造,今多写外来词)。日本保留汉字的原因:假名是表音、汉字是表意,可消同音词歧义、帮断句(日语不分词)、让句子更短。Tsume(詰め)/ 比例调整(OpenType 的 palt):日文虽设计为全宽但假名宽高不一,窄文本框里会参差 → 用 Tsume 缩字符两侧空白(字体设计阶段定死,用户改不了);区别于 kerning——Tsume 是"字本身更瘦",kerning 是"两字挪更近"。

韩文(Hangeul)已基本淘汰汉字,主要用谚文;中文字体至今与书法紧密相连,这是汉字有机特性使然。

八、术语速查表(Glossary)

高频词,遇到即查。已在前文展开的不再重复释义。

基础概念

  • Typeface 字体设计:文字的整体外观风格(如宋体、Helvetica),抽象的"长相"。
  • Font 字体:让该设计能在电脑上用的具体文件(微软雅黑是 typeface,其粗体版是一个 font)。
  • Character 字符:抽象的写作符号(字母/标点);Glyph 字形是它被画出来的具体样子(同一字符在不同字体里字形不同)。
  • Script(writing system)文字系统:一套书写符号系统(拉丁/西里尔/CJK…)。
  • Unicode 统一码:给每个字符分配唯一编码的标准。
  • Homoglyph 相似字形:长得几乎一样的不同字符(I/l/1)。

样式与字重

  • Weight 字重 / Width 宽度 / Italic 斜体 / Oblique 倾斜体(见 3.5)。
  • Small caps 小型大写:小写高度的大写字母。
  • Grade 字级:不改变占位宽度的前提下微调粗细(常用于不同背景/印刷补偿)。
  • Stylistic set 风格集:OpenType 里成组的替换字形。
  • Swash 装饰变体 / Dingbat 装饰符号 / Ligature 连字。

结构与度量

  • Em / En:em ≈ 字号方框宽,en ≈ 半个 em(用于间距、破折号)。
  • Overshoot 溢出:圆形/尖形字母(o、A)故意略超出基线/cap line,使视觉上等高。
  • Contrast 对比度(字形):同一字母最粗与最细笔画之差(≠ 颜色对比)。
  • Monolinear 等线:笔画粗细基本一致的字体。

家族与系统

  • Family 字体家族:同一设计的各字重样式集合;Superfamily 超家族:跨衬线/无衬线但共享骨架的更大集合(适合"亲兄弟"配对)。
  • System font / web-safe font 系统字体:操作系统自带、无需加载的字体。

技术

  • OpenType:支持连字、替换字形、多种数字等高级功能的字体技术。
  • Variable font 可变字体:单文件内可沿"轴"无级调节,常见轴:wght 字重 / wdth 宽度 / opsz 光学尺寸 / slnt 倾斜 / ital 斜体 / GRAD 字级 / MONO 等宽;参数轴(如 XOPQ 粗笔画、XTRA 内宽、YTLC 小写高度)给更底层控制。
  • Hinting 字体微调:指导小字号下像素如何对齐以保持清晰。
  • Subsetting 子集化:只打包用到的字符以减小文件、加快加载。
  • Faux/pseudo 伪字体:软件合成的假粗/假斜(要避开,见 3.5)。
  • FOIT / FOUT:网页字体加载时的"先空白再出现"/"先备用字再切换"闪烁。
  • Reflow 重排:字体加载或视口变化后文本重新换行。

排版与应用

  • Typography 排版 / Typesetting 排版技术 / Typographer 排版者。
  • Measure / line length 行长(45-75 字符,见 6.2)。
  • Hierarchy 层级:用大小/字重/颜色让信息分主次。
  • Rhythm 韵律:间距与重复带来的视觉节奏。
  • Drop cap 首字下沉 / Alignment & justification 对齐与两端对齐。
  • Scale 比例:字号阶梯(type scale)。

速用清单(PM 落地)

  1. 选正文字体:无衬线、x-height 大、字间距宽、I/l/1 分得清、至少四变体、支持你要的语言。长文可选衬线。
  2. 正文排版:字号 ≥ 16px、行高 115%-150%(窄屏偏 130%、宽屏偏 150%)、行长 45-75 字符(中文 15-20)、左对齐。
  3. 对比度:小文本 ≥ 4.5:1,大文本/图形 ≥ 3:1,想稳走 7:1;别只靠颜色。
  4. 配第二种字体:先问"真需要吗";要配就衬线 + 无衬线,或同超家族;笔画粗细要相近。
  5. 别踩的坑:伪粗体/伪斜体、只支持拉丁的字体用于多语言、换字体不核对基线、给大段正文加 tracking、装饰字做正文。

来源与关联资料