typography-expert

排版专家

由以挑选字体为生的人撰写。这项技能的目标是广度与品味，而不是一份权威推荐清单。字体从来没有唯一的正确选择——只有合适的风格调性，以及几款能以不同预算契合这种调性的好字体。如果你每次都选同样的四种字体，那就不是在选择，而是在照搬惯例。别再照搬了。

何时使用这项技能

✅ 适用于：

• 根据氛围／时代／行业／风格调性，而非习惯来选择和搭配字体
• 设计系统中的排版层级与设计令牌
• 字号比例（模块化比例、流式 clamp()）
• 可变字体集成与轴控制（wght、wdth、opsz、slnt、GRAD）
• Web 字体性能（子集化、font-display、自行托管或使用 CDN、用于消除 CLS 的 size-adjust 后备字体度量）
• OpenType 特性实现（连字、小型大写字母、数字、样式集）
• 许可决策（OFL 与商业 EULA；桌面／Web／应用；试用字体）
• 字体无障碍（WCAG 对比度、最小字号、缩放、行距／字距）
• 深色模式下的排版补偿
• 多语言支持（RTL、CJK、变音符号、字符集覆盖范围）

❌ 请勿用于：

• Logo 或文字标志设计 → design-system-creator
• 图标字体／图标系统 → web-design-expert（使用 SVG，而非图标字体）
• 与排版无关的通用 CSS
• 基于图像或栅格化的文字 → 其他领域
• 品牌命名或策略 → 这是视觉实现
• 动态／运动排版 → native-app-designer

---

0. 淘汰默认选项（请先阅读）

这些字体并不差，只是用腻了——人们总是下意识地选它们，所以它们传达的是“这是机器或赶时间的人随手挑的”，而不是“有人认真做了选择”。如果设计需求没有理由使用其中任何一种，就别用。每种字体都用一句话说明它为何沦为陈词滥调，再推荐两种能承担相同角色、但更有新意的字体。

过度使用的字体	为何显得陈词滥调	可以换用
Inter（Rasmus Andersson，OFL）	2018–2025 年整个网络的默认 UI 无衬线字体；可靠却毫无存在感，几乎泯然众人。	Hanken Grotesk（Alfredo Marco Pradil，OFL——更温暖、更具人文气息的 UI 无衬线字体） · Public Sans（USWDS，OFL——中性但独具辨识度） · 付费：Söhne 现在也用得太多了；不如试试 Untitled Sans（Klim）。
Roboto（Christian Robertson，Apache）	Android 的系统字体；给人的感觉是“我就用了已经加载好的字体”。	Schibsted Grotesk（Bakken & Bæck，OFL） · Onest（OFL）
Open Sans（Steve Matteson，Apache）	2013 年的“安全稳妥型企业”无衬线字体，看起来像 CMS 模板。	Source Sans 3（Paul Hunt / Adobe，OFL） · IBM Plex Sans（Bold Monday 为 IBM 设计，OFL）
Montserrat（Julieta Ulanovsky，OFL）	几何风格的“创业公司演示文稿”无衬线字体，到处都被设成粗字重。	Hanken Grotesk · 付费：Aktiv Grotesk（Dalton Maag）或 GT America（Grilli Type）
Poppins（Indian Type Foundry，OFL）	这是千篇一律的落地页上那种“友好应用”风格、几何圆润的无衬线字体。	Gabarito（OFL，几何风格且富有个性） · Figtree（OFL） · 付费：Visby（Connary Fagen）
Lato（Łukasz Dziedzic，OFL）	2010 年代的人文主义风格默认字体；亲切，却容易被忘记。	Instrument Sans（Rodrigo Fuenzalida + Jordan Egstad，OFL） · Mona Sans（GitHub，OFL）
Helvetica / Helvetica Neue（Linotype）	所有人都认定它中性的那一刻，“中性”就成了陈词滥调；而且它需要付费授权，很多人会用 Arial 冒充。	如果非用不可，就选真正的 Neue Haas Grotesk（Linotype/Monotype）；或者转向更有粗粝感的 grotesque 字体：GT America（Grilli Type）、ABC Diatype（Dinamo）。免费替代：Archivo（Omnibus-Type，OFL）。
Fraunces（Undercase Type，OFL）	这种“柔和的衬线字体，带有古怪的 g 和 opsz 轴”成了独立 SaaS 展示字体的标配。	Newsreader（Production Type，OFL——同样有 opsz，但少见得多） · 付费：用于高对比度展示字体，可选 Signifier（Klim）或 Domaine（Klim）。
Geist（Vercel，OFL）	每个 Next.js 入门模板都自带它；看起来就像“我一小时前才搭好脚手架”。	无衬线：Mona Sans / Hubot Sans（GitHub，OFL）或 Hanken Grotesk。等宽：Commit Mono（OFL）或 Martian Mono（OFL）。
Söhne（Klim）	2021 年至今，高端新闻简报 / AI 公司常用的品牌无衬线字体（你已经在十几个“我们完成了 A 轮融资”的页面上见过它）。	可选用其他 Klim grotesque 字体：Untitled Sans或 National 2；也可以选 Klim 之外的字体：ABC Diatype（Dinamo）、Aeonik（CoType）。
Fontshare / ITF“入门套装”——Satoshi、General Sans、Clash Display、Cabinet Grotesk、Switzer、Space Grotesk（Indian Type Foundry，免费）	自 2021 年以来，它们免费、时髦，在每张 Dribbble 截图里都能看到；“Clash Display + Satoshi 正文”如今已经成了一种风格，而非一种选择。	Clash Display → Bricolage Grotesque（Mathieu Triay，OFL）或 Anybody/Big Shoulders（OFL），用于展示 · Satoshi/General Sans → Hanken Grotesk、Schibsted Grotesk、Instrument Sans · Space Grotesk → Departure Mono / Space Mono 可以用，但已经用腻了；试试 Spline Sans 或 Familjen Grotesk（OFL）。

**总原则：**如果选择某种字体的唯一理由是“简洁现代”，那你就还没做出选择。简洁现代只是最低要求，不是设计需求。

---

1. 先确定风格基调，再选字体

在说出字体名称之前，先明确风格基调：情绪、时代、行业、媒介和语气。同一个词（“现代”）在不同风格基调下，指向的字体可能截然不同。先按下面的框架梳理，再做选择——并提供三个预算档位的选项，这样就不会拿预算当作做出平庸效果的借口。

全文使用的预算档位：自由授权 = 免费、OFL/Apache，可自托管。随心付费／试用 = 随心付费，或慷慨提供免费个人用途试用（商用需付费）。商业授权 = 字体厂商的零售授权。

温暖的编辑风格（杂志、长篇内容、“有人情味且经过深思熟虑”）

• 自由授权： Newsreader（Production Type），适用于正文和展示；Source Serif 4（Adobe），适用于正文；Spectral（Production Type），适合屏幕阅读。
• 随心付费／试用： Editorial New（Pangram Pangram），适用于窄体编辑风格标题；Reckless（Displaay，试用版）。
• 商业授权： Tiempos Text/Headline（Klim）；GT Sectra（Grilli Type），兼具手术刀般的锐利感与宽笔尖般的温暖；Lyon（Commercial Type）。

工业／技术／工程

• 自由授权： IBM Plex（Sans/Mono/Serif，Bold Monday）——最值得信赖的自由授权技术字体超家族；只有想要复古 NASA 风趣味时才选 Space Mono。
• 随心付费／试用： Basier（atipo，随心付费），简洁利落的无衬线体；Chaney（atipo），带有模版印刷风格的技术展示字体。
• 商业授权： GT America（Grilli Type）；ABC Monument Grotesk 或 ABC Diatype Mono（Dinamo）；Akkurat（Lineto，Laurenz Brunner）——原版瑞士规格的实用字体。

奢华／时尚／美妆

• 自由授权： Cormorant（Christian Thalmann，OFL）——风格近似 Garamond、精致纤巧的展示字体；Libre Caslon Display（OFL），适用于高对比度标题。
• 随心付费／试用： Migra（Pangram Pangram）——雕塑感十足、锐利的衬线体；Tobias / Reckless（Displaay，试用版）。
• 商业授权： Domaine Display（Klim）；Canela（Commercial Type）；Genath（Optimo，François Rappo）——严肃且锋芒毕露、风格近似迪多体的复兴之作。

公共事务／机构／公共部门

• 自由授权： Public Sans（USWDS）——专为政府打造；Source Sans 3；Libre Franklin（OFL），可替代 Franklin Gothic。
• 随心付费／试用： Wotfard（atipo，随心付费）——低调、易读、具有机构感。
• 商业授权： National 2（Klim）；FF Meta 或 Stratos，易读性足以用于标识系统。

文学／书卷气

• 自由授权： EB Garamond（OFL）——忠实还原 Garamond；Cardo（OFL），适合学术长篇内容；Newsreader，适合屏幕阅读。
• 随心付费／试用： Editorial New，适合文学封面风格。
• 商业授权： Tiempos（Klim）；Arnhem（OurType，Fred Smeijers）；Lyon Text（Commercial Type）。

粗粝主义／原始／反主流文化

• 自由授权： Velvetyne 的字体目录堪称宝藏——Fivo Sans、Pilowlava、Basteleur、Le Murmure（自由授权，正是为此类风格打造）；Redaction（Titus Kaphar & Forest Young，OFL），带有旧报纸的斑驳质感。
• 随心付费／试用： Uncut.wtf 的展示字体分类；Collletttivo（Apfel Grotezk，自由授权），风格冷面、克制的无衬线体。
• 商业授权： ABC Whyte / ABC Gravity（Dinamo）；OH no Type Co 的任意字体（Hobeaux、Vulf Mono）。

复古未来主义／70 至 80 年代／科幻

• 自由授权： Departure Mono（OFL），适合像素风等宽字体；少量使用 Orbitron（OFL）；VTF Redaction，适合斑驳的未来感。
• 随心付费／试用： Cassannet Plus（atipo，装饰艺术风格几何字体），营造 Cassandre 时代的海报氛围；Round 8（atipo）。
• 商业授权： Druk（Commercial Type），适合紧凑的海报未来主义风格；ABC Gravity（Dinamo）；采用窄体字宽的 Sharp Grotesk（Sharp Type）。

静谧瑞士风格／新无衬线体的克制感

• 自由授权： Archivo（Omnibus-Type），无衬线风格比 Inter 更为厚实；Hanken Grotesk，兼具人文主义与瑞士风格。
• 随心付费／试用： Basier（atipo）。
• 商业授权： Akkurat（Lineto）；Untitled Sans（Klim）；ABC Diatype（Dinamo）；原版 Neue Haas Grotesk（Monotype）。

活泼消费 / 生活方式 / DTC

• 自由授权： Bricolage Grotesque（Mathieu Triay）——表现力强，具有 wdth+opsz 轴；Gabarito；仅在确实需要童趣风格时使用 Fredoka（OFL）。
• 随意付费 / 试用： Sfizia（atipo）；Pangram Pangram 的 PP Mori / PP Neue Montreal（可免费试用）。
• 商业授权： Covik Sans 或 Degular（OH no Type Co）——温暖、活泼，“有机感胜过几何感”；Obviously（OH no Type Co）适合灵活的宽度轴展示字体。

学术 / 科学 / 数据密集型

• 自由授权： IBM Plex 超级家族（sans + serif + mono 共用一套骨架——适合论文 / 仪表板）；STIX Two（OFL）适合数学；Source Serif 4 适合正文。
• 随意付费 / 试用： Wotfard 适合 UI 界面元素。
• 商业授权： Lexicon（Bram de Does）是最精致、值得入手的学术衬线字体；Tiempos 适合期刊。

---

2. 字体搭配应讲逻辑，而非感觉

字体搭配只需遵循少数几条规则。照做即可，不要碰运气。

1. 一个主力字体 + 一个风格字体。 选择一个中性、字重丰富的主力字体，承载 90% 的文字（正文、UI、说明文字），再选择一个富有表现力的风格字体用于展示和标题。试图让两种表现力强的字体共存，会让演示文稿变得喧闹。
2. 通过分类形成对比，通过骨架实现协调。 跨类别搭配（例如人文主义衬线正文搭配 grotesque 展示字体），让二者的职责一目了然；但要确认它们共享相似的骨架：构造逻辑和比例相近。几何衬线字体会与人文主义无衬线字体冲突。
3. 匹配 x 字高，而非字号。 两种字体即使使用相同的 font-size，看起来也可能大小不同。比较小写 x 字高，并通过 font-size 或 size-adjust 调整。x 字高不匹配是字体搭配业余感的头号标志。
4. 超级家族捷径。 拿不准时，选一个提供 sans + serif + mono 且共用一套骨架的家族：IBM Plex（自由授权）、Source（Sans 3 / Serif 4 / Code Pro，自由授权）、Recursive（自由授权，可变字体），或商业超级家族，例如 Klim 的 National + 一款 Klim 衬线字体、Lineto 的字体家族，或 GT America + GT Sectra。保证协调，完全没有搭配风险。
5. 同一位设计师 / 同一家字库。 同一位设计师设计的字体往往拥有相似的字距和节奏。OH no Type Co 的字体可以互相搭配；Klim 的字体可以互相搭配；Production Type 的 Newsreader 可搭配一款 Production 的无衬线字体。
6. 历史兼容性。 同一时代的字体往往拥有相同的基因（两款 didone 字体；一款 Garalde 搭配一款同样根植于书法形式的人文主义无衬线字体）。不要把 1490 年代的 Garalde 和 1990 年代的科技风展示字体搭配，除非这种张力本身就是目的。
7. 最多使用两个字体家族。 只有在其中一个是严格用于代码 / 数据的等宽字体时，才考虑使用三个。再多就会杂乱无章，而非层次分明——用同一家族内的字重、宽度、opsz 和大小写来增加变化。

快速搭配示例（均未收录于入门推荐）：

• 温暖的编辑风网站： Newsreader 展示字体 + Hanken Grotesk 正文（均为自由授权）。
• 技术产品： IBM Plex Sans UI + IBM Plex Mono 数据（同属一个超级家族，自由授权）。
• 时尚落地页： Migra（Pangram Pangram，展示字体）+ Untitled Sans（Klim，正文）。
• 市政应用： Libre Franklin 展示字体 + Public Sans 正文（均为自由授权）。
• 活泼的 DTC： Bricolage Grotesque 展示字体 + Schibsted Grotesk 正文（均为自由授权）。

---

3. 按分类编排的目录

各类别中真正有趣的字体及其设计师 / 字库。包含自由授权（L）和商业授权（C）。用它们跳出默认选择。

人文主义无衬线字体

根植于书法，笔画有粗细变化，字腔开阔——温暖易读。

• Hanken Grotesk（Alfredo Marco Pradil / Hanken Design Co.）——L
• Source Sans 3（Paul Hunt，Adobe）——L
• FF Meta（Erik Spiekermann）——C，人文主义主力字体的典范
• Skolar Sans（David Březina，Rosetta）——C，多文字系统支持出色
• Whitney（Tobias Frere-Jones / Frere-Jones Type）——C

新哥特体

“中性”的瑞士字体路线（Helvetica／Akzidenz 传统）——但要选一款好的字体。

• Archivo（Omnibus-Type）— L
• Neue Haas Grotesk（Christian Schwartz，承袭 Max Miedinger）— C，真正的 Helvetica
• GT America（Noël Leu + Seb McLauchlan / Grilli Type）— C，美国哥特体 × 瑞士风格
• ABC Diatype（Dinamo）— C
• Aeonik（CoType）— C

几何无衬线体

包豪斯式圆形与线条（Futura 血统）。

• Gabarito（L）、Spline Sans（L）
• Visby（Connary Fagen）— C
• Cassannet Plus（atipo）— PWYW，装饰艺术风格几何体
• Avenir Next / Avenir（Adrian Frutiger）— C，更具人文气息的几何体

哥特体／工业风

更早期、质朴粗犷的哥特体与机械风黑体。

• Le Murmure（Velvetyne）— L，表现力十足的展示用哥特体
• Apfel Grotezk（Collletttivo）— L，冷面风格
• ABC Monument Grotesk（Dinamo）— C
• Aperçu（Colophon，现归 Monotype 所有）— C
• Sharp Grotesk（Lucas Sharp / Sharp Type）— C，21 种宽度 × 7 种字重

加拉德体／旧风格衬线体

1490 年代至 1600 年代的人文主义根源，低对比度、括弧形衬线、倾斜笔势。

• EB Garamond（L）、Cormorant（Christian Thalmann）— L
• Arnhem（Fred Smeijers / OurType）— C
• Galaxie Copernicus（Chester Jenkins + Kris Sowersby）— C
• Sabon Next（Jan Tschichold，由 Jean François Porchez 复兴）— C

过渡衬线体

18 世纪字体，笔画对比度更高、笔势更垂直（Baskerville／Times 血统）。

• Source Serif 4（Frank Grießhammer，Adobe）— L
• Newsreader（Production Type）— L
• Tiempos（Kris Sowersby / Klim）— C，现代化的 Plantin／Times
• Lyon（Kai Bernau / Commercial Type）— C

多丁体／现代衬线体

粗细笔画对比强烈，衬线纤细（Bodoni／Didot 血统）。

• Libre Caslon Display 并非多丁体——要选免费的多丁体，可用 Playfair Display（Claus Eggers Sørensen）— L（注意：它现在也已很常见；只适合大字号）
• Genath（François Rappo / Optimo）— C，严谨复兴的巴塞尔多丁体
• Canela（Miguel Reyes / Commercial Type）— C，多丁体 × 雕刻风格
• Domaine Display（Klim）— C

板衬线体

厚重的矩形衬线，通常不带括弧。

• Roboto Slab 已显老套——可用 Zilla Slab（Typotheque 为 Mozilla 设计）— L，或选 Bricolage 的较粗字重
• Rockwell / Archer 血统的商业字体：Archer（Hoefler&Co）— C
• Caponi Slab（OH no Type Co）— C

雕刻风格／凿刻体

末端经过凿刻处理并向外展开，具有石刻质感，介于衬线体与无衬线体之间。

• Trajan 已成陈词滥调（电影海报常用）——请避免；可改选接近 Albertus 的字体或 Friz Quadrata
• Hatton（Pangram Pangram）— 可免费试用，高对比度雕刻风格展示字体
• Schnyder（Commercial Type）— C，高对比度雕刻风格展示字体

人文主义衬线体

更温暖、低对比度，适合在屏幕上阅读的文本衬线体。

• Spectral（Production Type）— L
• Source Serif 4 — L
• Lexicon（Bram de Does / TEFF）— C，书籍正文的黄金标准
• FF Scala（Martin Majoor）— C

展示字体

适合大字号，个性鲜明，仅用于标题。

• Bricolage Grotesque（Mathieu Triay）— L，含 wdth + opsz 轴
• Big Shoulders（Production Type / Chicago）— L
• Anybody（Tyler Finck）— L，宽度轴范围极大
• Druk（Berton Hasebe / Commercial Type）— C，压缩式海报字体
• Obviously（James Edmondson / OH no Type Co）— C
• Migra、Editorial New（Pangram Pangram）— 可免费试用

等宽字体

适用于代码、数据和技术语境。

• JetBrains Mono（L）、IBM Plex Mono（L）、Commit Mono（L，设计上刻意保持“匿名”）、Departure Mono（L，像素风）
• Recursive Mono（Arrow Type）— L，可变字体，带有“随性”轴
• MD IO（Mass-Driver）— C
• Vulf Mono（OH no Type Co）— C，温润且墨色浓郁

意想不到的类别

• 模板字体： Chaney（atipo，PWYW）；Stardom/Velvetyne 展示用模板字体——适合营造实用、军事或工业风格。
• 机械风 / 单线条： Recursive Mono Casual（L）；Space Mono（L）——笔画粗细一致，兼具技术感与亲和力。
• 反差字体（横画粗、竖画细——西部 / 马戏团 /“意大利”风格）：Le Murmure 偏向这种风格；OH no Type Co 的展示字体作品也在探索这种风格；还有接近商用 Caslon Doric 的反差衬线字体。适合刻意制造视觉冲击。
• 近似哥特体 / 不完全哥特风纹理体： 除非用于金属、传承品牌或编辑引文，否则极少适用——如果非用不可，优先选择现代演绎，而非 16 世纪纹理体，而且绝不要用它排正文。

---

4. 免费字体层级——没有预算不是借口

(a) Google Fonts 中值得关注的字体，不止默认选项

Google Fonts 不只有 Roboto 和 Open Sans。可以改用这些：

• 衬线字体： Newsreader（Production Type）、Source Serif 4（Adobe）、Spectral（Production Type）、Libre Caslon（Text + Display）、EB Garamond、Cormorant、Zilla Slab。
• 无衬线 / 哥特体： Bricolage Grotesque、Instrument Sans（以及与之搭配的窄体展示字体 Instrument Serif）、Hanken Grotesk、Schibsted Grotesk、Gabarito、Onest、Figtree、Familjen Grotesk、Archivo（以及 Archivo Expanded/Narrow）、Mona Sans / Hubot Sans（GitHub）。
• 注意——尽管免费，却已被过度使用： Fraunces、Space Grotesk、Sora 和 Plus Jakarta Sans。它们都不错，但用了就会和其他人挤在同一个池子里；应把它们视为有待超越的默认选项，而非最终选择。

(b) 值得了解的非 Google 免费字体与 PWYW 字体厂牌

• Velvetyne (velvetyne.fr)——法国厂牌，创立于 2010 年。免费字体目录中最具冒险精神：Le Murmure、Pilowlava、Basteleur、Fivo Sans、Redaction。真正免费（可使用、修改和再分发）。
• Collletttivo (collletttivo.it)——米兰厂牌，意大利第一家开源字体厂牌。旗下有 Apfel Grotezk 等字体。
• The League of Moveable Type——最早的开源字体厂牌（League Gothic、League Spartan、Ostrich Sans）。
• atipo foundry (atipofoundry.com)——西班牙希洪。真正的随意付费（自行定价，包括最低价）：Wotfard、Basier、Chaney、Round 8、Cassannet Plus、Sfizia、N27。
• Uncut.wtf——由独立设计师 Kasper Nordkvist 策划的免费 / 开源当代字体目录（约 160 多款）。是发现当下免费字体的最佳渠道。
• Open Foundry (open-foundry.com)——精心策划的开源字体展示库，字体样张简洁无干扰。
• Fontshare / Indian Type Foundry (fontshare.com)——可免费商用，质量上乘（Satoshi、General Sans、Clash Display、Switzer、Cabinet Grotesk）。**注意：**其中有几款已被严重过度使用——把它们视为 AI 入门套装，并优先考虑 §0 中的替代选项。

免费试用 ≠ 免费字体。 Pangram Pangram 和 Displaay 提供慷慨的试用 / 个人用途免费字体，但商业用途必须获得授权。不要用“免费”试用字重上线客户网站。

---

5. 字体比例

模块化比例

比例	名称	使用场景
1.067	小二度	密集型 UI、仪表盘
1.125	大二度	通用网页正文
1.200	小三度	均衡的默认层级
1.250	大三度	营销内容、标题优先的版面
1.333	完全四度	主视觉区块、有力宣言
1.414	增四度	编辑式戏剧效果
1.618	黄金比例	古典风格；对大多数 UI 来说过大——仅用于海报 / 展示字体

根据文本风格选择比例：密集型工具需要较小的比例（1.125–1.2）；时尚品牌落地页需要较大的比例（1.333+），让展示字体有足够的发挥空间。

使用 clamp() 设置流式字体

:root {
  /* body: 16px @ 320px viewport → 20px @ 1240px */
  --step-0: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
  /* h2: 28px → 48px */
  --step-3: clamp(1.75rem, 1.32rem + 2.14vw, 3rem);
}
/* Always use rem for the min/max so user zoom is respected (see §8). */

使用 Utopia（utopia.fyi）之类的工具生成完整字号比例，让最小值和最大值保持相同的比例——不要逐级手动调整，以免节奏失衡。

垂直节奏

设定一个基准单位（例如 1.5rem = 24px），让间距都采用它的倍数，并让标题对齐到整数倍。正文行高约为 1.5–1.7；标题行高更紧凑（1.05–1.2）。切勿为全局设置统一的 line-height。

---

6. 可变字体与轴

轴	标签	常见范围	实际用途
字重	wght	100–900	一个文件包含多种字重——可用于动画或主题
字宽	wdth	~75–125	无需重新调整字距，即可让标题适配容器
光学尺寸	opsz	8–144	针对字号调整对比度——通过 font-optical-sizing: auto 自动调整
倾斜度	slnt	-12–0	无需第二个文件即可实现倾斜
字重等级	GRAD	不定	调整视觉字重，不改变排版布局——非常适合深色模式

正确使用 opsz： 大号展示文字需要更高对比度、更精细的衬线和更紧凑的字距；小号文字则相反。Newsreader 和 Bricolage Grotesque 等字体包含真正的 opsz 轴——让浏览器通过 font-optical-sizing: auto 控制，或按字号级别显式设置。不要在正文中使用展示文字的 opsz 值。

使用 GRAD 补偿深色模式（不改变布局）：

@media (prefers-color-scheme: dark) {
  body { font-variation-settings: "GRAD" 50; } /* heavier-looking, same metrics */
}

如果字体没有 GRAD，可以微调字重（400 → 450）——但要注意，这会改变字体度量，可能导致布局偏移。

还有一些值得了解的特殊轴，具体取决于字体：Recursive 提供 CASL（随性）和 MONO 轴；一些 Dinamo 字体和可变展示字体提供用于调整衬线形状或“活力感”的自定义轴。请查阅字体厂商的规格说明——切勿假定轴标签。

---

7. 性能与加载

• 自行托管 WOFF2，以便掌控并保护隐私；只有必要时才使用 CDN。Google Fonts CSS 会增加一次阻塞渲染的往返请求——如果使用，请配置 preconnect，并优先自行托管 WOFF2。
• 进行子集化。 仅含拉丁字符的字体约为 30KB，而完整字体约为 150KB 以上。删除未使用的西里尔文、希腊文和越南文字符。工具：glyphhanger、fonttools subset。
• 正文使用 font-display: swap（立即显示文字）；非关键装饰字体使用 optional，彻底避免 CLS。
• 预加载唯一的关键字体： <link rel="preload" as="font" type="font/woff2" crossorigin>。不要预加载所有字体——这只会争抢带宽。
• 通过 size-adjust 和后备字体度量消除 CLS。 调整后备字体的 x 高度和字宽，使其匹配网络字体，避免字体切换时重新排版：

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 97%;     /* tune to match the real face's x-height */
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
body { font-family: "Hanken Grotesk", "Hanken Fallback", sans-serif; }

（Next.js next/font、Fontaine 和 Capsize 可自动生成这些覆盖规则——请使用它们。）

预算指南： 快速（<100KB，2–3 个 WOFF2）· 均衡（100–200KB）· 丰富（200–400KB）。优先使用一个可变字体文件，而非八种静态字重。

切勿使用 @import 加载字体（会阻塞渲染并串行加载），也切勿使用 Font Awesome 或图标字体来显示图标——请使用内联 SVG。

---

8. 无障碍——不可妥协

以下是硬性规则，而非建议：

• 正文／文案／说明文字 ≥ 14px（0.875rem）。切勿更小。 正文不得使用 text-xs；文案、说明文字或元信息不得使用 0.7–0.8rem。
• 眉题／标签文字只有在同时满足以下条件时才能使用 12px： 字重 ≥ 600、全大写且字母间距 ≥ 0.1em——这样视觉上会显得更大。这是唯一例外。
• 切勿禁用缩放。 视口元标签中不得设置 user-scalable=no 或 maximum-scale<2。请使用 <meta name="viewport" content="width=device-width, initial-scale=1">，不要添加任何妨碍双指缩放的设置。
• 正文尺寸使用 rem/em，不要使用 px，以遵循用户浏览器的字体大小偏好和缩放设置。clamp() 的最小值和最大值使用 rem。
• WCAG 2.1 AA 对比度： 正文为 4.5:1，大号文字（≥24px，或加粗时 ≥18.66px）为 3:1。切勿使用浅色底上的浅色文字或深色底上的深色文字。
• 正文行距 ≥ 字号的 1.5 倍；段落间距 ≥ 字号的 2 倍；用户必须能够将字母间距调整为 0.12em、词间距调整为 0.16em，且布局不会因此损坏。
• 行宽控制在 45–75 个字符（65ch 最为理想）。限制文案宽度；在宽屏上不要让文案一直延伸到视口边缘。

9. OpenType 特性

/* Prefer the high-level properties; fall back to feature-settings only for ssXX/cvXX */
.tabular   { font-variant-numeric: tabular-nums; }      /* align numbers in tables */
.fractions { font-variant-numeric: diagonal-fractions; }/* 1/2 → ½ */
.smallcaps { font-variant-caps: all-small-caps; }       /* acronyms, not faux caps */
.ligatures { font-variant-ligatures: common-ligatures; }
.brand     { font-feature-settings: "ss01" 1, "cv05" 2; }/* stylistic alts — check the spec */

对于任何数字列（价格、仪表板），都使用等宽数字。使用字体的真正小型大写字母，绝不要用 text-transform 加较小字号来伪造（权重不均匀）。样式集（ssXX）因字体而异——查看铸字厂的字形表；不要盲目启用 ss01。

---

10. 反模式

★ AI 作品集入门套装风格（标题反模式）

**看起来像这样：**大号柔和的展示衬线字体（Fraunces）+ Inter 正文 + 大片留白 + 一种紫色／青绿色渐变点缀 + Clash Display 标题。**为什么不妥：**这是“生成出来的，而非设计出来的”的视觉标记——很快就会过时，而且与成千上万的其他网站毫无区别。**建议做法：**选择一种风格基调（§1），突破所有默认设置（§0），让字体传达鲜明的观点。

尚未确定风格基调就挑选字体

还说不清氛围、时代或语气，就先挑选字体。你总会下意识选择熟悉的字体。先确定风格基调；候选名单自然会随之而来。

敷衍地使用系统字体

因为难以抉择，就把 font-family: -apple-system, ... 当作最终品牌决策。这对一次性工具来说没问题；对任何有品牌个性的产品而言，这都是敷衍。（系统字体栈很适合做回退方案，但不适合作为品牌字体。）

伪粗体／伪斜体

合成字体家族中不存在的字重或倾斜度（浏览器会模糊常规字形）。始终加载真正的粗体和斜体，或使用可变字体的 wght／slnt 轴。

字体家族过多

3 个以上互不相关的字体家族会显得杂乱。最多用 2 个（代码字体可以作为第 3 个）。通过字重、宽度、opsz 和大小写变化来丰富层次。

正文居中且行长过长

段落超过几行还居中，或让行长超过约 75ch，都会损害可读性——读者会难以找到下一行的起始位置。

忽视 x 高匹配

搭配或替换字体时不比较 x 高，会导致字号明显不匹配和 CLS。比较小写字母，并用 size-adjust 调整。

字重跨度过大

较大字号的 400 正文搭配 700 标题可能显得突兀。要营造细腻层次，可尝试 400／600 或 380／520；只有在真正需要强烈展示效果时，才使用大幅跨度。

全局统一行高和固定 px 字号

所有地方都用 line-height: 1.5，或将正文大小硬编码为 px。按层级设置行高；字号使用 rem 搭配 clamp()。

加载完整字符集

仅面向英语的网站却加载西里尔文／希腊文／越南文字形。应使用子集。

---

11. 许可知识

发布前务必弄清楚这一点——许可证选错会带来法律和声誉问题。

• SIL OFL（开放字体许可证）： 自由字体的标准许可证（大多数 Google Fonts、Adobe Source 系列、IBM Plex、Velvetyne、Collletttivo）。允许商用、嵌入、自托管，也允许修改和再分发（但须沿用相同许可证，且不能单独出售字体本身）。是产品的安全默认选择。
• Apache 2.0： 同样宽松（Roboto、Inter 历史上采用此许可证）——可放心商用；再分发限制比 OFL 少。
• 商业 EULA： 零售字体厂商（Klim、Commercial Type、Grilli Type、Dinamo、Sharp Type、OH no Type Co、Colophon、Lineto、Optimo、Production Type 零售业务、MCKL、Displaay 零售业务）按使用类型授权，通常需要分别购买：
  • 桌面（安装 + 设计稿/印刷）——通常按工作站数量定价。
  • Web（自托管 @font-face）——按月页面浏览量或固定费用定价。自托管与由字体厂商托管的区别很重要：有些厂商要求使用其 CDN；另一些则允许你自行托管 WOFF2。
  • 应用 / 嵌入——应用、电子书、软件 UI、广播、徽标等用途几乎总是需要单独且通常更贵的许可证。Web 许可证不涵盖 iOS 应用。
• 试用 / 个人免费： Pangram Pangram、Displaay 以及许多字体厂商会提供免费字重供非商业用途（作品集、提案）。商用必须付费。“免费试用”≠自由字体。
• PWYW： atipo 允许你自行定价（包括其最低价格），即可获得完整商用权——当自由字体无法满足需求时，这确实是性价比最高的选择。
• 字体厂商托管与自托管： 字体厂商托管的 Web 字体服务（Adobe Fonts、Monotype、Fontstand）会捆绑许可证，但会让你受限于其 CDN/订阅，订阅到期后字体也可能无法使用。对于需要长期维护的产品，自托管 OFL/PWYW/已购买的 Web WOFF2 字体才是持久之选。
• 务必阅读具体的 EULA。“我们在 Pinterest 上看到的”不等于获得了许可证。在将某字体用于品牌之前，请确认许可是否涵盖桌面/Web/应用用途、页面浏览量档位以及修改权。

---

12. 与其他技能集成

• design-system-creator — 输出字体令牌（比例、行高、字距、默认字轴设置）。
• web-design-expert — 在布局中实现选定的系统。
• vibe-matcher — 选字体前，先将品牌氛围转化为 §1 中的风格定位。

---

快速参考

• 衡量： 45–75ch（65ch 为理想值）。正文： ≥14px/0.875rem，使用 rem 单位，行高 1.5–1.7。标题： 行高更紧（1.05–1.2）。
• 拿不定主意时的默认选择： 超级家族字体（IBM Plex 或 Source）——保证协调、自由、可变、多语言。
• 确定字体名称前： 先确定风格定位（§1）。发布字体前： 检查许可证（§11）。

---

字体是一项选择，而不是默认设置。如果你说不出为何选择这款字体，而非与它最相近的三款字体，那就说明你还没有真正做出选择。