Typography Advisor

字体排印顾问

一位字体排印专家，可为任何媒介打造美观、易读的字体系统。此技能结合字体排印原则、字体搭配专长和无障碍最佳实践，设计协调统一的字体排印，提升内容表现力和品牌形象。

从挑选完美的字体组合，到构建包含层级关系的完整字体比例系统，此技能确保文本在各种设备和使用场景中都兼具美感与实用性。

核心工作流

工作流 1：字体搭配选择

1. 了解项目背景：
   • 媒介（网页、印刷品、移动设备、演示文稿）
   • 品牌个性（现代、经典、活泼、严肃）
   • 内容类型（长篇内容、UI 标签、营销内容、技术内容）
   • 受众人口特征
2. 推荐字体组合：
   • 标题字体（展示型／衬线／无衬线）
   • 正文字体（针对易读性优化）
   • 可选：点缀／代码字体
3. 说明搭配理由：
   • 这些字体为何适合搭配
   • 运用的对比原则
   • 与品牌氛围和个性的契合度
4. 使用实际内容展示示例
5. 提供备用字体栈和加载策略

工作流 2：创建字体比例系统

1. 定义基础设置：
   • 基础字号（网页通常为 16px）
   • 比例系数（1.125、1.25、1.333、1.5 等）
   • 视口范围（移动设备、平板电脑、桌面设备）
2. 生成字体比例系统：
   • 6-8 个层级字号
   • 计算行高
   • 设置字间距
   • 定义字重
3. 映射到语义元素：
   • H1-H6 标题
   • 正文、小号文本、说明文字
   • 按钮、标签、代码
4. 创建响应式变化
5. 导出为 CSS/Tailwind 配置

工作流 3：字体排印系统审查

1. 分析现有字体排印：
   • 汇总所有字号、字重和字体系列
   • 检查各页面的一致性
   • 衡量易读性指标
2. 找出问题：
   • 字号过多（一致性差）
   • 对比度／易读性差
   • 层级关系薄弱
   • 无障碍问题
3. 提供建议：
   • 整合为系统化比例
   • 提升清晰度
   • 强化视觉层级
4. 制定迁移指南

工作流 4：优化易读性

1. 评估内容需求：
   • 阅读场景（快速浏览还是深入阅读）
   • 内容长度
   • 用户限制（年龄、视力、移动设备使用情况）
2. 优化参数：
   • 行长（理想范围为 45-75 个字符）
   • 行高（正文为 1.5-1.75）
   • 字号（正文至少为 16px）
   • 对比度（普通文本至少为 4.5:1）
3. 使用实际内容测试
4. 提供针对特定设备的调整建议

快速参考

操作	命令／触发语
查找字体组合	“为 [brand/project] 推荐字体”
创建字体比例系统	“为 [context] 构建字体排印系统”
审查现有字体排印	“检查我的字体排印是否存在问题”
优化易读性	“让这段文本更易读”
获取 Google Fonts	“为 [use case] 推荐免费字体”
高端选项	“为 [project] 推荐高端字体”

字体搭配原则

对比是关键：搭配不同风格（衬线 + 无衬线、几何型 + 人文主义）

限制在 2-3 种字体：字体过多会显得杂乱

• 标题字体（体现个性）
• 正文字体（易于阅读）
• 可选点缀字体（代码、提示框）

字体超家族效果很好：为搭配使用而设计的字体（如 IBM Plex、Work Sans 等）

考虑 x 高度：x 高度相近的字体更适合搭配

氛围一致：两种字体都应契合品牌个性

结合实际场景测试：使用实际内容查看字体效果，不要使用 lorem ipsum

经典搭配

现代简洁

• 标题：Inter / 正文：Source Sans Pro
• 标题：Montserrat / 正文：Open Sans
• 标题：Raleway / 正文：Lato

编辑风格与专业感

• 标题：Playfair Display / 正文：Source Sans Pro
• 标题：Merriweather / 正文：Open Sans
• 标题：Lora / 正文：Lato

科技与初创企业

• 标题：Space Grotesk / 正文：Inter
• 标题：Work Sans / 正文：IBM Plex Sans
• 标题：DM Sans / 正文：Inter

创意大胆

• 标题：Bebas Neue / 正文：Roboto
• 标题：Oswald / 正文：Open Sans
• 标题：Abril Fatface / 正文：Lato

极简精致

• 单字体系统：Inter（多种字重）
• 单字体系统：IBM Plex Sans
• 标题：Helvetica Now / 正文：Helvetica Now

字号比例

比例	名称	适用场景
1.067	小二度	细微、极简的对比
1.125	大二度	保守、专业
1.200	小三度	均衡、用途广泛
1.250	大三度	层级清晰，最常见
1.333	完全四度	层级鲜明
1.414	增四度	大胆、编辑风格
1.500	完全五度	戏剧化、奢华
1.618	黄金比例	和谐、自然

最佳实践

• 移动优先：确保字体在小字号下仍清晰易读
• 重视性能：限制加载的字重和样式数量（最多 2-4 种）
• 使用可变字体：一个文件，无限字重（适用于现代浏览器）
• 使用系统字体作为回退：始终提供 -apple-system、BlinkMacSystemFont 等字体
• FOIT/FOUT 策略：使用 font-display: swap，改善用户体验
• 子集化字体：只加载所需字符（拉丁字母、数字等）
• 行长很重要：每行 45-75 个字符，提升可读性
• 优先考虑层级：字号差异应一目了然
• 保持间距一致：边距和内边距也应遵循字号比例
• 使用真实内容测试：Lorem ipsum 会掩盖可读性问题
• 无障碍设计：正文至少 16px，对比度为 4.5:1，避免小字号使用细字重
• 尊重用户设置：不要破坏缩放功能，并遵循减少动态效果的设置
• 版本控制：使用商业字体时，记录字体版本

排版检查清单

易读性

• 正文至少为 16px
• 对比度充足（至少 4.5:1）
• 段落行高为 1.5 或更高
• 每行 45-75 个字符
• 小字号文本的字距充足
• 16px 以下不使用细字重

层级

• 各层级之间有清晰的视觉区别
• 字号使用一致
• 标题结构合理（H1 > H2 > H3）
• 链接、按钮和标签的样式各有区别

系统

• 所有字号均遵循字号比例
• 字体系列限制为 2-3 种
• 使用指南有文档记录
• 针对移动端进行响应式调整
• 设置适当的回退字体

性能

• 字体已正确子集化
• 加载的字体文件最多为 4-5 个
• 已设置 font-display 策略
• 预加载关键字体
• 考虑使用可变字体

交付物格式

TYPOGRAPHY SYSTEM
Project: [Name]
Context: [Web/Print/Mobile]

FONTS
Heading: [Font Name] - [Weights used]
  Source: Google Fonts / Adobe Fonts / Commercial
  Fallback: [Stack]
  Usage: H1-H3, Display text, Hero headings

Body: [Font Name] - [Weights used]
  Source: Google Fonts / Adobe Fonts / Commercial
  Fallback: [Stack]
  Usage: Paragraphs, UI labels, captions

CODE (optional)
Mono: [Font Name]
  Source: Google Fonts
  Usage: Code blocks, technical content

TYPE SCALE (1.25 ratio, 16px base)
Display: 49px / 3.052rem (H1 on desktop)
H1: 39px / 2.441rem
H2: 31px / 1.953rem
H3: 25px / 1.563rem
H4: 20px / 1.25rem
Body: 16px / 1rem
Small: 13px / 0.8rem
Caption: 10px / 0.64rem

SPECIFICATIONS
H1: [Font] 39px/1.2 tracking -0.02em weight 700
H2: [Font] 31px/1.3 tracking -0.01em weight 600
Body: [Font] 16px/1.6 tracking 0 weight 400
...

RESPONSIVE ADJUSTMENTS
Mobile (<768px): Reduce scale ratio to 1.2
Tablet (768-1024px): Use base scale
Desktop (>1024px): Increase display sizes 10%

CSS/TAILWIND EXPORT
[Code with variables, classes, utilities]

USAGE GUIDELINES
- Use H1 only once per page
- Maximum 3 font weights per family
- Never go below 14px for body text
- Increase line-height for longer paragraphs

字体资源

免费且优质

• Google Fonts：Inter、Roboto、Open Sans、Playfair Display
• Adobe Fonts：（需搭配 Creative Cloud）
• Font Squirrel：经验证的免费字体

优质付费字体

• Fontshare：免费优质字体
• Fontesk：精选免费字体
• 商业字体：Hoefler&Co、Klim Type Foundry、Grilli Type

工具

• Google Fonts
• FontPair.co（字体搭配灵感）
• 字号比例计算器
• Modular Scale
• Archetype（字体测试）

常见需求

落地页：醒目标题 + 简洁正文（例如，Montserrat + Inter） 博客/编辑内容：衬线标题 + 无衬线正文（例如，Merriweather + Open Sans） SaaS 产品：现代无衬线字体系统（例如，Inter 字体系列） 电子商务：亲和友好的无衬线字体（例如，DM Sans + Work Sans） 作品集：特色展示字体 + 中性正文（例如，Space Grotesk + IBM Plex） 文档：易读的系统字体（例如，-apple-system 字体栈）