关于 brand-typography-systems
面向品牌与数字产品设计的字体系统参考指南，涵盖字体选择、层级、配对、排版和可访问性。适用于需要把品牌个性转化为可扩展字体规范的设计师。
主要功能
- 01从品牌个性出发选择字体
- 02使用比例建立字体层级
- 03依据分类与对比搭配字体
- 04提供行距、字距和行长建议
- 05涵盖响应式与网页字体实践
- 06纳入 WCAG 可访问性要求
适用场景
- 01为品牌制定字体规范
- 02为网页或移动界面建立文字层级
- 03评估并搭配标题与正文字体
- 04检查数字排版的可读性和可访问性
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/brand-typography-systems确认已加载。
附带文件reference/templates.md
详细介绍
品牌字体排印系统与战略性字体选择
开发战略性品牌字体排印系统的快速参考，立足于品牌个性、层级和实际应用。
“字体排印的存在，是为了彰显内容。”——Robert Bringhurst，《The Elements of Typographic Style》
“字体排印和设计应该提升沟通效果，而不只是看起来赏心悦目。”——Erik Spiekermann
“我可以在两三天内教会任何人掌握良好的字体排印。技艺本身很简单，其余的只是练习。”——Erik Spiekermann
核心原则
- 从品牌个性出发：字体选择应从品牌个性延伸到字体选择，而不是反过来。
- 彰显内容：无法服务于内容的优美字体，就失去了自身的意义。
- 通过分类形成对比：衬线字体与无衬线字体搭配，能自然地建立层级而不产生冲突。
- 形式服从功能：正文优先考虑易读性；展示文字则可以优先体现个性。
- 一致性建立识别度：每个接触点都会强化（或削弱）品牌印象。
- 无障碍设计不容妥协：面向尽可能广泛的受众进行设计。
- 系统具备扩展性：创建适用于所有应用场景和语境的层级体系。
核心框架
1. 以品牌为先的字体选择流程
字体选择必须源于品牌策略，而非审美偏好。
流程：
| 步骤 | 操作 | 目的 |
|---|---|---|
| 1 | 定义品牌个性 | 确定 3-5 个定义品牌声音与形象的特质 |
| 2 | 了解目标受众 | 人口统计特征、偏好和行业预期 |
| 3 | 收集灵感 | 分析竞争对手，寻找差异化机会 |
| 4 | 选择并搭配字体 | 针对各个接触点（印刷品、网页、移动端）制作样稿 |
| 5 | 建立层级 | 明确主要、次要和第三级层级及其用途 |
| 6 | 制定指南 | 通过示例和规范记录所有内容 |
关键洞见：“如果品牌能通过描述来定义自己的语气、个性和原则，我们就能将其转化为字体形式。”
2. 模块化比例字体系统
通过一致的比例，以数学方法创建和谐的字体层级。
常见比例：
| 比例 | 数值 | 特点 | 最适用于 |
|---|---|---|---|
| 小二度 | 1.067 | 变化细微 | 密集布局、数据密集型 UI |
| 大二度 | 1.125 | 略微明显 | 功能型界面 |
| 小三度 | 1.200 | 差异适中 | 均衡的内容层级 |
| 大三度 | 1.250 | 层级清晰 | 通用 UI 设计 |
| 完全四度 | 1.333 | 视觉层级鲜明 | 编辑出版、营销 |
| 黄金比例 | 1.618 | 效果鲜明、高端 | 高端品牌、以展示为主的设计 |
流程：
- 定义基准字号：网页设计从 16px 开始（浏览器默认值，也是无障碍设计的基准）
- 选择比例：根据品牌个性和内容类型进行匹配
- 计算字号：每上一级将基准字号乘以比例，每下一级则相除
- 应用于层级：将计算出的字号对应到 H1–H6、正文和说明文字
- 进行响应式测试：针对不同屏幕尺寸调整比例或基准字号
核心原则：将不同字号限制在 6-8 种。较大屏幕可以采用更鲜明的比例；较小屏幕则适合采用更保守的比例。
工具：Typescale.io | Type Scale Tool
3. Ellen Lupton 的《Thinking with Type》框架
一种涵盖三个相互关联系统的方法：
| 系统 | 重点 | 关键要素 |
|---|---|---|
| Letter（字母） | 单个字符 | 字体结构、分类、个性 |
| Text（文本） | 单词和段落 | 对齐、间距、字偶间距、字距、行距 |
| Grid（网格） | 页面结构 | 分栏、页边距、空间关系 |
关键原则：
- “学习规则，以及如何打破规则”
- 历史背景有助于指导现代实践
- 视觉平衡和格式塔分组有助于打造有效版式
- 无障碍性和易读性不容妥协
字体分类与个性矩阵
| 分类 | 个性特征 | 最适合 | 示例行业 |
|---|---|---|---|
| 衬线体 | 传统、古典、可靠、权威、精致 | 长篇阅读、传承定位、建立信任 | 律师事务所、金融、奢侈品、编辑出版 |
| 无衬线体 | 现代、简洁、极简、亲和、当代 | 数字界面、初创企业、无障碍设计 | 科技、SaaS、医疗保健、当代零售 |
| 手写体 | 优雅、独特、个性化、柔美 | 特殊场合、奢华点缀 | 时尚、婚礼、高端美容 |
| 手绘体 | 艺术感、随性、有趣、俏皮、真实 | 建立个人联结、休闲品牌 | 创意机构、儿童产品、手工食品 |
| 展示体／装饰体 | 醒目、吸引注意、独特 | 仅用于标题、有限点缀 | 娱乐、活动、创意宣传活动 |
| 板衬线体 | 强劲、稳健、机械感、现代经典 | 兼具传承感的科技、当代编辑出版 | 建筑、汽车、新闻业 |
| 等宽体 | 技术感、精准、面向开发者 | 代码、数据、技术文档 | 开发者工具、金融科技、数据平台 |
衬线体与无衬线体的选择框架
选择衬线体的情况：
- 品牌偏向手工匠艺、权威感或编辑出版风格
- 行业：精品酒店、律师事务所、投资顾问、手工制品生产商、传承品牌
- 长篇印刷内容是主要接触点
- 希望传达传统、信任和高端定位
- 目标受众期待品牌具备成熟的公信力
选择无衬线体的情况：
- 70% 以上的接触点是数字用户界面（应用、仪表板、小屏幕）
- 行业：科技、初创企业、数字产品、当代零售、医疗保健
- 快速易读最为重要
- 希望传达现代感、无障碍性和创新
- 受众期待品牌现代且富有前瞻性
注意：高分辨率显示屏缩小了衬线体和无衬线体在屏幕易读性上的差距。相比单纯的字体分类，使用场景和具体字体更为重要。
字体评估标准
评估任何字体的七个维度：
| 标准 | 要提出的问题 | 重要性 |
|---|---|---|
| 完整性 | 是否包含所需的所有字符、字重和样式？ | 品牌需求会不断变化；字体必须能随之发展 |
| 易读性 | 在小字号下是否易读？字符是否足够鲜明？ | 内容必须便于阅读 |
| 通用性 | 是否适用于标题、正文、说明文字和不同媒介？ | 一个系统必须适用于多种场景 |
| 协调性 | 是否与标志、色彩和图像协调？ | 字体设计属于视觉系统的一部分 |
| 独特性 | 是否有助于与竞争对手区分？ | 字体设计是打造品牌的机会 |
| 技术就绪度 | 是否提供网页字体？授权是否完备？是否为可变字体？ | 实施限制不容忽视 |
| X 字高适用性 | 是否适用于预期字号？ | 较高的 X 字高有助于提升屏幕易读性，但过高会降低对词形的识别能力 |
字体搭配原则
经典方法：通过分类形成对比
最古老且可靠的规则：将衬线字体与无衬线字体搭配。这样既能通过形式形成鲜明对比，也能让两种字体各司其职。
五项关键原则
-
追求对比，而非冲突
“当两种风格几乎相同却又略有差异时，它们就会开始冲突，就像同时穿着两种略有不同的格子图案。”——Ellen Lupton
-
避免“字体泥沼”：来自同一分类但属于不同字体家族的字体，可能会彼此混淆，却无法形成有意义的区分。
-
建立有意义的层级：利用粗细、大小和样式的对比来引导读者。
-
限制强烈的个性：混用两种个性鲜明的字体通常效果不佳。它们会争夺注意力。
-
考虑粗细对比：标题使用较粗的字重，正文使用较细的字重（特定效果也可反过来）。
实用技巧
- 使用独特的展示字体时，让另一种字体保持简洁
- 衬线字体标题 + 无衬线字体正文（或反过来）是可靠的搭配
- 寻找共同特征：相似的 x 高度、比例或历史时期
- 在确定之前，务必结合实际内容场景进行充分测试
排版间距指南
行高（行距）
| 文本类型 | 行高 | 原因 |
|---|---|---|
| 标题 | 1.1 - 1.25 | 紧凑有力 |
| 小标题 | 1.25 - 1.35 | 适中 |
| 正文 | 1.5 - 1.7 | 可读性最佳 |
| 长篇内容 | 1.6 - 1.8 | 留出更多呼吸空间 |
字母间距（字距）
| 场景 | 字距 | 原因 |
|---|---|---|
| 大标题（>36px） | -0.02em to -0.01em | 收紧字距以增强冲击力 |
| 中等标题 | 0 | 默认值 |
| 正文 | 0 | 为最佳间距效果而设计 |
| 小号文本（<14px） | 0.01em to 0.02em | 拉开字距以提升易读性 |
| 全大写文本 | 0.05em to 0.1em | 始终增加字距 |
| 按钮/标签 | 0.05em | 提高可读性 |
行长（字数）
- 最佳：每行 50-75 个字符（常被认为 66 个字符最理想）
- 最少：45 个字符（低于此值会导致阅读不连贯）
- 最多：80 个字符（超过此值会造成眼疲劳）
数字排版的具体说明
可变字体
定义：单个字体文件通过连续插值包含所有字重、宽度和样式。
优点：
- 性能：一个文件取代多个静态文件（例如，完整的 Source Sans Pro 字体家族为 405KB，而非 1,170KB）
- 设计灵活性：可使用任意字重（例如 450，而不仅仅是 400 或 500）
- 响应式排版：根据视口调整字重/宽度
- 动画：在不同样式之间平滑过渡
关键轴：
| 轴 | 代码 | 范围 | 效果 |
|---|---|---|---|
| 字重 | wght | 细体至黑体 | 笔画粗细 |
| 字宽 | wdth | 窄体至宽体 | 字符宽度 |
| 斜体 | ital | 正体至斜体 | 正体/斜体切换 |
| 倾斜 | slnt | 倾斜角度 | 倾斜角度 |
| 光学尺寸 | opsz | 针对特定尺寸的调整 | 根据尺寸自动调整细节 |
Web 字体性能
问题：自定义字体需要下载，这会延迟文本渲染。
FOIT 与 FOUT：
- FOIT（不可见文本闪现）：浏览器会隐藏文本，直到字体加载完成，用户体验不佳
- FOUT（无样式文本闪现）：先显示后备字体，准备就绪后再替换，这是更推荐的方式
推荐策略：
- 使用
font-display: swap - 预加载关键字体
- 使用
font-display: optional以获得最佳性能 - 匹配后备字体的度量值，以减少布局偏移
响应式排版
使用 clamp() 实现流体排版：
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
- 最小值：2rem（不会缩小到此值以下）
- 首选值：5vw（随视口缩放）
- 最大值：4rem（不会增大到此值以上）
系统字体栈
适用场景：注重中立性和性能的应用、仪表板及内容密集型工具。
现代系统字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
资源：现代字体栈
WCAG 字体排版要求
对比度
| 标准 | 比率 | 使用场景 |
|---|---|---|
| AA 级（最低） | 4.5:1 | 正文 |
| AA 级（最低） | 3:1 | 大号文本（24px 及以上，或 18.5px 粗体） |
| AAA 级（增强） | 7:1 | 正文 |
| AAA 级（增强） | 4.5:1 | 大号文本 |
文本缩放（WCAG 1.4.4）
- 文本必须可以缩放至 200%，且不会丢失内容或功能
- 使用相对单位（rem、em、%），而非固定像素
文本间距（WCAG 1.4.12）
必须支持用户对以下项目进行调整：
- 行高：字体大小的 1.5 倍
- 段落间距：字体大小的 2 倍
- 字母间距：字体大小的 0.12 倍
- 单词间距：字体大小的 0.16 倍
适合阅读障碍人士的字体排版
主要特点：
- 字母形状简单（通常优先选择无衬线字体）
- 字母和单词间距较宽
- 字形差异明显（清晰区分 b/d、p/q）
- 字体直立（正文避免使用斜体）
- 字号适当（正文为 16px 及以上）
推荐字体：
| 字体 | 优点 |
|---|---|
| Lexend | 专为提升可读性和辅助阅读障碍人士而设计 |
| Open Sans | 字形清晰，间距宽松 |
| Verdana | 字形清晰，风格统一 |
| Atkinson Hyperlegible | 专为低视力读者设计，适合所有人 |
| Inter | 字形清晰，非常适合数字内容 |
主要发现：对于阅读障碍人士，无衬线字体、等宽字体和罗马体最易阅读。斜体会显著降低可读性。
印刷与数字媒体的注意事项
| 因素 | 印刷 | 数字媒体 |
|---|---|---|
| 分辨率 | 300 dpi | 72-100 ppi（因屏幕而异） |
| 正文字号 | 通常为 10-12pt | 通常为 15-25px |
| 字体选择自由度 | 印刷时任何字体都适用 | 受可用性和许可限制 |
| 渲染 | 印刷品之间保持一致 | 因设备和浏览器而异 |
| 衬线字体可读性 | 长篇文本的理想选择 | 取决于屏幕质量 |
跨渠道最佳实践
- 选择为两种环境设计的字体
- 在印刷和数字样稿中测试所选字体
- 考虑字体超家族（针对不同媒介优化的版本）
- 确保许可涵盖所有预期用途
- 记录不同媒介所需的具体字号和字重调整
字体许可
许可类型
| 类型 | 使用场景 | 常见限制 |
|---|---|---|
| 桌面 | 设计软件、印刷材料 | 用户或设备数量 |
| Web | 通过 CSS 用于网站 | 页面浏览量、域名 |
| 应用 | 移动/桌面应用 | 应用下载量、平台 |
| ePub | 数字出版物 | 书名数量 |
| 服务器/API | 动态图像生成 | 曝光量 |
重要注意事项
- 阅读 EULA：每家字体厂商的条款各不相同
- Logo 使用：有些许可明确禁止将字体用于 Logo
- 客户项目：客户需要拥有自己的许可；你不能转让自己的许可
- 修改：大多数许可禁止修改字体文件
- 嵌入：PDF 嵌入和视频嵌入有具体规定
开源选项
- SIL Open Font License (OFL)：个人和商业用途免费，可修改
- Google Fonts：所有字体均获准用于商业用途
- The League of Moveable Type：高品质开源字体
推荐的免费字体（Google Fonts）
无衬线字体
- Inter：非常适合数字界面，9 种字重
- DM Sans：简洁、几何感强，9 种字重
- Source Sans Pro：Adobe 的首款开源字体
- Work Sans：用途广泛，9 种字重
- Fira Sans：节省空间，最初为 Mozilla 设计
衬线字体
- Lora：现代与经典元素兼具，可读性出色
- Cormorant：优雅的展示型衬线字体
- Playfair Display：高对比度，具有编辑风格
- Merriweather：专为屏幕设计，可读性极佳
展示字体
- Montserrat：几何风格，现代感十足
- Raleway：纤细、精致
- Oswald：粗体、结构分明
常见错误
| 错误 | 问题 | 解决方案 |
|---|---|---|
| 不同平台上的字体使用不一致 | 损害品牌识别度 | 记录并落实字体排版系统 |
| 使用过多字体 | 造成视觉混乱 | 最多使用 2-3 种 |
| 为了风格牺牲可读性 | 受众无法顺畅阅读内容 | 按实际使用尺寸测试易读性 |
| 忽视许可 | 承担法律责任 | 审核所有字体，确保获得适当授权 |
| 个性不匹配 | 字体排版削弱品牌信息 | 从品牌个性出发，选择相匹配的字体 |
| 文本对比度低 | 不符合无障碍要求，难以阅读 | 使用对比度检查工具，达到 WCAG AA 标准 |
| 过度修饰 | 阴影、渐变显得不专业 | 保持字体排版简洁且有目的性 |
| 忽视移动端 | 在主要设备类别上表现不佳 | 在所有设备尺寸上进行测试 |
| 使用潮流字体 | 很快过时，需要重新打造品牌 | 选择经久不衰的选项 |
| 跳过层级设计 | 用户无法浏览内容 | 明确区分字号和字重 |
| 未在不同媒介上测试 | 印刷品和数字内容的呈现效果不同 | 在两种场景下都进行测试 |
| Logo 使用默认字体 | 缺乏独特性 | 仅使用定制或经过谨慎挑选的字体 |
核心思维模型
通过分类形成对比：衬线字体与无衬线字体搭配，能自然形成层级并增添视觉趣味，且不会产生冲突。
形式追随功能：正文优先考虑易读性；展示文字则可以优先体现个性。
保持一致有助于建立识别度：每个接触点都会强化（或削弱）品牌认知。
无障碍设计不容妥协：面向尽可能广泛的受众进行设计。良好的无障碍设计就是良好的设计。
从个性出发：字体选择应从品牌个性出发，再决定字体。绝不能反过来。
如果可选项更少：“这不一定会让你的生活更困难，反而往往会让事情更简单。”——Erik Spiekermann
模板
在制作用户会保留的交付成果时，例如填写完成的工作表、记录在案的决策或最终总结，请阅读 reference/templates.md。概念性问题和快速建议可跳过，因为本文件已涵盖这些内容。该文件以目录开头，因此只需加载所需的模板：
- 字体排版系统文档模板（完整输出结构）
- 模块化比例计算器参考
- 无障碍测试清单
- 字体授权清单
何时应用这些知识
策略阶段
- 应用以品牌为先的字体排版选择流程
- 使用字体分类与个性矩阵
- 考虑衬线与无衬线字体决策框架
字体选择阶段
- 应用字体评估标准（7 个维度）
- 运用字体搭配原则
- 调研字体选项（Google Fonts、优质字体厂商）
层级设计阶段
- 应用模块化比例系统
- 制定间距指南（行高、字距、行宽）
- 定义字体排版令牌
验证阶段
- 测试 WCAG 无障碍要求
- 核实对阅读障碍友好的设计考量
- 在印刷品和数字媒介上进行测试
- 检查字体授权