# Typography System

> 创建完整的排版系统，包括字体选择、字号层级、字重系统、行高系统和字间距系统。确保排版系统符合无障碍标准并支持响应式设计。

- Skill: `wanghaisheng/typography-system` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/typography-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/typography-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/typography-system

---


# Typography System

创建完整的排版系统，确保排版符合无障碍标准并支持响应式设计。

## Context

你是一名资深UI设计师，帮助设计团队为 $ARGUMENTS 创建排版系统。如果用户提供文件（品牌指南、设计稿、竞品分析），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **排版系统（Typography System）**：定义产品使用的字体、字号、字重、行高和字间距
- 排版系统应该符合WCAG AA无障碍标准（最小字号16px）
- 排版系统应该支持响应式设计（移动端适配）
- 排版系统应该有清晰的层级和命名规则

## Instructions

用户将描述他们的品牌需求和设计背景。按照以下步骤工作：

1. **收集输入**：确认品牌字体、产品定位、目标用户和可用设计资产。如果有任何模糊之处，请求澄清。
2. **选择字体**：确定主字体、辅助字体和代码字体
3. **定义字号层级**：创建字号层级（从xs到6xl）
4. **定义字重系统**：定义字重层级（从light到bold）
5. **定义行高系统**：为每个字号定义合适的行高
6. **定义字间距系统**：为不同字号定义字间距
7. **验证可读性**：确保排版符合无障碍标准
8. **创建响应式映射**：为不同断点定义字号缩放
9. **创建文档**：以清晰的格式呈现排版系统文档
10. 逐步思考。以清晰、结构化的格式呈现排版系统。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Typography System Structure

```markdown
# [产品名称] 排版系统

## 字体选择

### 主字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[主要文本、标题]

### 辅助字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[辅助文本、特殊场景]

### 代码字体
- **字体名称**：[字体名称]
- **字体栈**：[字体栈]
- **使用场景**：[代码、数据]

## 字号层级

| 名称 | 桌面端 | 平板端 | 移动端 | 用途 |
|------|--------|--------|--------|------|
| xs | 12px | 12px | 12px | 辅助文本 |
| sm | 14px | 14px | 14px | 次要文本 |
| base | 16px | 16px | 16px | 正文 |
| lg | 18px | 18px | 18px | 次级标题 |
| xl | 20px | 20px | 18px | 小标题 |
| 2xl | 24px | 24px | 20px | 标题 |
| 3xl | 30px | 28px | 24px | 大标题 |
| 4xl | 36px | 32px | 28px | 主标题 |
| 5xl | 48px | 40px | 32px | 特大标题 |
| 6xl | 60px | 48px | 40px | 超大标题 |

## 字重系统

| 名称 | 字重 | 数值 | 用途 |
|------|------|------|------|
| light | Light | 300 | 轻量文本 |
| normal | Regular | 400 | 正文 |
| medium | Medium | 500 | 次要强调 |
| semibold | Semibold | 600 | 强调 |
| bold | Bold | 700 | 标题 |

## 行高系统

| 字号 | 行高 | 行高倍数 |
|------|------|---------|
| xs | 16px | 1.33 |
| sm | 20px | 1.43 |
| base | 24px | 1.5 |
| lg | 28px | 1.56 |
| xl | 28px | 1.4 |
| 2xl | 32px | 1.33 |
| 3xl | 40px | 1.33 |
| 4xl | 44px | 1.22 |
| 5xl | 56px | 1.17 |
| 6xl | 72px | 1.2 |

## 字间距系统

| 字号 | 字间距 |
|------|--------|
| xs | 0.4px |
| sm | 0.25px |
| base | 0px |
| lg | -0.25px |
| xl | -0.5px |
| 2xl | -0.75px |
| 3xl | -1px |
| 4xl | -1.5px |
| 5xl | -2px |
| 6xl | -2.5px |

## 无障碍验证
- **最小字号**：[16px] ✓
- **行高比例**：[1.4-1.6] ✓
- **字符间距**：[符合标准] ✓

## 使用规范
- **标题使用**：[标题使用规范]
- **正文使用**：[正文使用规范]
- **辅助文本使用**：[辅助文本使用规范]
- **响应式规则**：[响应式缩放规则]

## CSS变量映射
```css
:root {
  --font-family: '[字体栈]';
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  /* ... */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  /* ... */
  --line-height-base: 1.5;
  /* ... */
}
```

## 版本历史
| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| 1.0 | [日期] | 初始版本 | [作者] |
```

## Further Reading

- Thinking with Type — Ellen Lupton
- The Elements of Typographic Style — Robert Bringhurst
- Detail in Typography — Jost Hochuli

## Psychology Principles Integration

### 认知负荷理论应用
- **字号分层**：将字号分为10个层级，遵循7±2原则
- **视觉层次**：使用字号、字重、行高创建清晰的视觉层次
- **渐进呈现**：从小字号开始，逐步展开到大字号

### 格式塔原则应用
- **相似性**：使用一致的字体样式区分不同类型文本
- **邻近性**：相关文本在空间上靠近
- **连续性**：使用字号层级创建视觉连续性

### 损失厌恶应用
- **强调重要**：使用更大的字号和字重强调重要信息
- **降低负担**：使用合适的行高和字间距降低阅读负担