排版Typography
你可能会说
这页文字全糊在一起了，帮我分出标题、正文和提示，一眼能看出重点。
排版是指页面中文字的字号、字重、行距与层级规范，帮助读者快速识别标题、正文与辅助信息。例如在设置页，分组标题应比选项说明更醒目，正文的行与行之间也要留够距离。必须阅读的提醒不能只用很小、很浅的字显示，否则很容易被忽略。
也常被叫作文字排版文本样式
容易混淆？这样区分
排版Typography≠标题（Heading）
排版（Typography）包含标题、正文、说明文字等整套文字规则；标题（Heading）只是其中用来标明页面和章节层级的一类文字。
什么时候用
- 标题分级：页面 > 模块 > 小节，层级一眼看清页面标题模块标题
- 长文正文：根据阅读场景设置清楚易读的字号和行高正文的字号与行高要清楚易读，长文才容易持续阅读。
- 辅助信息：时间、备注，用灰色小字弱化官网改版 v2进行中林小hu 更新于 3 天前 · 仅自己可见
- 强调重点：加粗或变色，只标真正关键的内容本次更新修复了 12 个问题，其中支付流程改动最大，请重点回归。
什么时候不用
- 标题样式过多：层级差异反而难以辨认一级标题二级标题三级标题四级标题五级标题
- 正文使用过浅的灰色和过小字号：文字对比度与可读性都会降低这是一段很重要的操作说明，但用了 10px 浅灰字，得眯着眼才能读完。
- 整段加粗：各处权重相同，真正的重点难以辨认整段文字全部加粗后，各处权重相同，真正的重点难以辨认。
- 用空格和换行模拟对齐：使用 间距 Space 统一管理姓 名：林小hu
手机号码：138 0000 0000靠全角空格对齐，换个字体就歪
组成结构 · Anatomy
2026 年产品规划
正文：说清背景、目标和下一步安排，并保证清楚易读。
辅助文字：林小hu 更新于 3 天前
使用最高文字层级，明确页面或内容主题
承担主要阅读，字号与行高保持清楚易读
灰色小字，放时间、备注这类次要信息
常见变体 · Variants
页面标题Page Title
数据看板
用于页面主标题，说明用户当前所在位置
模块标题Section Title
基本信息
给每个内容区块起名，方便扫读
正文Body
这是一段正文内容。
承担主要阅读的段落都用它
辅助文字Caption
2026-07-20 更新
时间、备注等次要信息，弱化处理
典型使用场景
文章详情页
2026 年产品规划：少做，做透
林小hu · 更新于 3 天前 · 阅读约 5 分钟
今年只做三件事：把核心流程的转化率提上去、把新手引导做到不用教、把遗留的性能问题彻底解决。
其中新手引导是 Q1 的重心，设计和技术双线推进，月底先出可点的原型。
表单标题与说明
创建新项目
项目用来归组文件和成员，创建后随时可以改名
项目名称
项目简介
卡片信息层级
数据看板重构
进行中
把 12 张零散报表合并成 3 张核心看板，支持自定义筛选与一键导出。
林小hu 负责 · 截止 7 月 30 日
数据报表页
今日访问
12,847
↑ 8.2% 较昨日
注册用户
3,204
↑ 3.1% 较昨日
付费转化
4.6%
↓ 0.4% 较昨日
延伸阅读 · 权威出处