排版系统设计指南
排版的重要性
网页内容 80% 是文本。好的排版直接影响用户体验、可读性和品牌感受。
排版系统的作用：
建立视觉层次
├─ 标题 > 副标题 > 正文 > 辅助文本
└─ 用户一眼能看出信息优先级
提高可读性
├─ 合适的行长
├─ 合适的行高
└─ 良好的字距和字体
建立品牌识别
├─ 一致的字体选择
├─ 统一的尺度系统
└─ 可识别的排版风格
改善用户体验
├─ 易于扫描
├─ 易于阅读
└─ 易于理解
1. 字体选择
1.1 字体分类
字体类型：
衬线字体 (Serif)
├─ 特点：有装饰线条
├─ 推荐：书籍、正式文档、印刷
├─ 示例：Georgia, Times New Roman
└─ Web 字体：Merriweather, Lora
非衬线字体 (Sans-serif)
├─ 特点：简洁、现代
├─ 推荐：网页、UI、现代设计
├─ 示例：Arial, Helvetica, Verdana
└─ Web 字体：Open Sans, Roboto
等宽字体 (Monospace)
├─ 特点：每个字符宽度相同
├─ 推荐：代码、技术文档
├─ 示例：Courier, Monaco
└─ Web 字体：Roboto Mono, Source Code Pro
手写字体 (Script)
├─ 特点：优雅、装饰性强
├─ 推荐：标题、装饰性文本
├─ 示例：Brush Script, Pacifico
└─ 注意：慎用，可能影响可读性
1.2 字体选择原则
✅ 最佳实践
1. 限制字体数量
├─ 最多 2-3 种字体
├─ 通常：1 种标题 + 1 种正文
└─ 特殊：+ 1 种代码/装饰
2. 字体配对
好的配对：
├─ Montserrat（标题） + Open Sans（正文）
├─ Playfair Display（标题） + Lato（正文）
├─ Abril Fatface（标题） + Roboto（正文）
└─ IBM Plex Serif（标题） + IBM Plex Sans（正文）
3. 优先考虑系统字体
系统字体栈：
├─ 快速加载（无需下载）
├─ 专为屏幕优化
└─ 用户熟悉
4. Web 字体的性能影响
❌ 加载 5 个字体文件 = 网站变慢
✅ 使用变量字体
✅ 只加载必要的字重和样式
1.3 系统字体栈
/* 推荐的系统字体栈 */
/* 现代网站推荐 */
.system-ui {
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* 字体详解 */
/*
system-ui - 使用系统 UI 字体
-apple-system - macOS/iOS Safari
BlinkMacSystemFont - macOS 旧版
Segoe UI - Windows
Roboto - Android
Helvetica Neue - 备选
sans-serif - 最后备选
*/
/* 衬线字体栈 */
.serif {
font-family: Georgia, "Times New Roman", Times, serif;
}
/* 等宽字体栈 */
.monospace {
font-family: "SF Mono", Monaco, "Cascadia Code",
"Roboto Mono", Consolas, "Courier New", monospace;
}
1.4 Web 字体加载
<!-- Google Fonts - 推荐使用 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<!-- 使用字体 -->
<style>
body { font-family: 'Roboto', sans-serif; }
h1 { font-family: 'Playfair Display', serif; }
</style>
<!-- 性能优化 -->
<!-- 1. 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 2. 字体显示策略 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!--
display=swap: 立即显示备选字体，准备好后切换
display=fallback: 短暂显示备选字体后切换
display=optional: 只在足够快时加载
-->
<!-- 3. 自托管字体（性能最佳） -->
<style>
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
</style>
2. 字体尺寸尺度系统
2.1 类型比例（Type Scale）
类型比例是为了在排版中建立一致的间隔和层次。
常见的比例：
1.125 比例（8%）- 细微变化
├─ 基础：16px
├─ h5: 18px
├─ h4: 20px
├─ h3: 23px
├─ h2: 26px
└─ h1: 29px
1.25 比例（25%）- 标准
├─ 基础：16px
├─ h5: 20px
├─ h4: 25px
├─ h3: 31px
├─ h2: 39px
└─ h1: 49px
1.5 比例（50%）- 大比例
├─ 基础：16px
├─ h5: 24px
├─ h4: 36px
├─ h3: 54px
└─ h1: 81px
黄金比例 (1.618) - 自然和谐
├─ 基础：16px
├─ h5: 26px
├─ h4: 42px
├─ h3: 68px
└─ h1: 110px
2.2 实施类型比例
/* 基于 1.25 比例的实现 */
:root {
/* 基础大小 */
--base-font-size: 16px;
/* 计算出的尺寸 */
--text-xs: 12.8px; /* 16 * 0.8 */
--text-sm: 14.4px; /* 16 * 0.9 */
--text-base: 16px; /* 基础 */
--text-lg: 20px; /* 16 * 1.25 */
--text-xl: 25px; /* 20 * 1.25 */
--text-2xl: 31px; /* 25 * 1.25 */
--text-3xl: 39px; /* 31 * 1.25 */
--text-4xl: 49px; /* 39 * 1.25 */
--text-5xl: 61px; /* 49 * 1.25 */
}
/* 使用 CSS 变量 */
p { font-size: var(--text-base); }
h3 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-3xl); }
h1 { font-size: var(--text-4xl); }
/* 注意：使用 rem 单位便于响应式设计 */
:root {
font-size: 16px; /* 1rem = 16px */
}
p { font-size: 1rem; }
h3 { font-size: 1.938rem; }
h2 { font-size: 2.441rem; }
h1 { font-size: 3.052rem; }
3. 行高和字距
3.1 行高
行高（Line Height）是行与行之间的距离。
影响：
- 可读性
- 视觉舒适感
- 文本密集度
行高与字体大小的比例：
标题（h1-h3）
└─ 比例：1.2-1.3
├─ 32px 标题 → 38-42px 行高
└─ 理由：紧凑，简洁
正文文本
└─ 比例：1.5-1.6
├─ 16px 文本 → 24-26px 行高
└─ 理由：舒适易读
小文本/标签
└─ 比例：1.4-1.5
├─ 12px 文本 → 17-18px 行高
└─ 理由：充足空间
3.2 字距（Letter Spacing）
字距是字符之间的水平距离。
使用场景：
正文文本
├─ 字距：0 或 -0.5px
├─ 理由：正常阅读
└─ 示例：使用默认
标题
├─ 字距：0.5-2px
├─ 理由：增加优雅感
└─ 示例：h1, h2
全大写文本
├─ 字距：1-3px
├─ 理由：避免显得过于紧凑
└─ 示例：WELCOME, FEATURED
小号文本
├─ 字距：0.5-1px
├─ 理由：改善可读性
└─ 示例：标签、提示
装饰文本/Logo
├─ 字距：2-5px
├─ 理由：高雅、拉伸
└─ 示例：品牌名称
3.3 CSS 实现
/* 排版模块 */
:root {
/* 行高比例 */
--line-height-tight: 1.2;
--line-height-normal: 1.6;
--line-height-relaxed: 1.8;
/* 字距 */
--letter-spacing-tight: -0.5px;
--letter-spacing-normal: 0;
--letter-spacing-wide: 1px;
--letter-spacing-wider: 2px;
}
/* 标题排版 */
h1 {
font-size: 2.5rem;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
font-weight: 700;
margin-bottom: 0.5em;
}
h2 {
font-size: 2rem;
line-height: var(--line-height-tight);
letter-spacing: 0.5px;
font-weight: 600;
}
h3 {
font-size: 1.5rem;
line-height: var(--line-height-normal);
font-weight: 600;
}
/* 正文 */
p {
font-size: 1rem;
line-height: var(--line-height-normal);
margin-bottom: 1.5em;
max-width: 65ch; /* 理想行长 */
}
/* 小号文本 */
.text-small {
font-size: 0.875rem;
line-height: var(--line-height-normal);
letter-spacing: 0.5px;
}
/* 全大写 */
.text-uppercase {
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
4. 行长和可读性
4.1 理想的行长
行长是指每行文字的字符数或像素宽度。
理想范围：
字符数：45-75 个字符
├─ 最小：40 个字符
├─ 理想：50-60 个字符
└─ 最大：80 个字符
像素数：
├─ 最小：375px (手机)
├─ 理想：600-800px
└─ 最大：1200px+
过短行
❌ 字词拆分过多
❌ 眼睛移动频繁
❌ 影响阅读流畅性
过长行
❌ 难以跟踪行尾
❌ 眼睛疲劳
❌ 用户容易迷路
4.2 CSS 设置行长
/* 使用 max-width 限制行长 */
/* 方案 1：固定像素 */
.article {
max-width: 700px; /* ~65-70 个字符 */
margin: 0 auto;
}
/* 方案 2：使用 ch 单位（字符宽度） */
.article {
max-width: 65ch; /* 大约 65 个字符 */
margin: 0 auto;
}
/* 方案 3：响应式 */
@media (max-width: 768px) {
.article {
max-width: 100%;
padding: 0 1rem;
}
}
@media (min-width: 1200px) {
.article {
max-width: 800px;
}
}
5. 响应式排版
5.1 流动排版
/* 根据视口大小流动调整 */
/* 传统方式（需要多个 breakpoint） */
h1 {
font-size: 24px;
}
@media (min-width: 768px) {
h1 { font-size: 32px; }
}
@media (min-width: 1200px) {
h1 { font-size: 48px; }
}
/* ✅ 现代方式：clamp() 函数 */
h1 {
/* 最小值 首选值 最大值 */
font-size: clamp(24px, 5vw, 48px);
}
/* 解释：
- 最小 24px（超小屏幕）
- 优先 5% 视口宽度（流动增长）
- 最大 48px（超大屏幕）
*/
/* 其他元素 */
p {
font-size: clamp(14px, 2vw, 18px);
line-height: clamp(1.5, 1.5 + 1vw, 1.8);
}
/* 字距响应式 */
h1 {
letter-spacing: clamp(0.5px, 1vw, 3px);
}
5.2 响应式尺度系统
/* 移动优先的尺度系统 */
:root {
/* 移动设备 */
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 28px;
}
@media (min-width: 768px) {
:root {
/* 平板设备 */
--text-base: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 40px;
}
}
@media (min-width: 1200px) {
:root {
/* 桌面设备 */
--text-base: 18px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 40px;
--text-3xl: 56px;
}
}
6. 排版的最佳实践
✅ 排版最佳实践清单
1. 建立 CSS 变量系统
├─ 集中管理所有字体大小
├─ 便于维护和更新
└─ 提高代码复用
2. 使用有意义的尺度
├─ 不要随意选择字体大小
├─ 使用类型比例系统
└─ 保持一致性
3. 优先考虑可读性
├─ 足够的行高（1.5-1.8）
├─ 合适的行长（45-75 字符）
├─ 充足的对比度
└─ 清晰的字体
4. 测试排版
├─ 不同屏幕大小
├─ 不同内容长度
├─ 使用屏幕阅读器
└─ 真实用户反馈
5. 性能考虑
├─ 限制 Web 字体数量
├─ 只加载必要的字重
├─ 使用系统字体作为备选
└─ 监控加载时间
6. 可访问性
├─ 使用相对单位（rem）
├─ 支持用户放大
├─ 足够的对比度
└─ 清晰的文本
7. 排版实战示例
/* 完整的排版系统示例 */
:root {
/* 基础大小 */
--base-font-size: 16px;
--base-line-height: 1.6;
/* 字体栈 */
--font-sans: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
--font-serif: Georgia, "Times New Roman", serif;
--font-mono: "Monaco", "Courier New", monospace;
/* 尺寸尺度 */
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.25rem;
--fs-2xl: 1.5rem;
--fs-3xl: 1.875rem;
--fs-4xl: 2.25rem;
--fs-5xl: 3rem;
/* 行高 */
--lh-tight: 1.2;
--lh-normal: 1.6;
--lh-relaxed: 1.8;
/* 字距 */
--ls-tight: -0.5px;
--ls-normal: 0;
--ls-wide: 1px;
}
/* 应用排版 */
body {
font-family: var(--font-sans);
font-size: var(--base-font-size);
line-height: var(--lh-normal);
color: #333;
}
h1 {
font-size: var(--fs-4xl);
line-height: var(--lh-tight);
font-weight: 700;
margin-bottom: 0.5em;
}
p {
font-size: var(--fs-base);
line-height: var(--lh-normal);
margin-bottom: 1.5em;
max-width: 65ch;
}
总结
排版系统设计的核心：
- 一致性 - 使用系统化的尺寸和间距
- 可读性 - 合适的行长、行高和字距
- 层次 - 明确的视觉优先级
- 响应式 - 不同设备上都舒适阅读
- 可访问性 - 足够的对比度，支持放大
推荐资源
- Typescale.com - 字体尺度生成器
- Google Fonts - 免费 Web 字体
- Font Pair - 字体配对建议
- Web Typography Guidelines - Smashing Magazine 指南
