排版Typography
按钮与基础样式用文字大小和样式分清信息主次
也常被叫作文字排版文本样式
排版通过字号、行高、粗细和颜色区分标题、正文与辅助信息。先为常用文字角色建立稳定规则，再适配不同屏幕，用户就能更快找到重点并顺着内容阅读。
页面标题 · 22px 加粗
模块标题 · 16px
正文 · 14px：讲解细节的正文，行高 1.6 起，读起来不累。
辅助文字 · 12px：时间、备注、次要说明。
容易混淆？这样区分
排版Typography≠标题（Heading）
排版（Typography）包含标题、正文、说明文字等整套文字规则；标题（Heading）只是其中用来标明页面和章节层级的一类文字。
什么时候用
- 标题分级：页面 > 模块 > 小节，层级一眼看清页面标题模块标题
- 长文正文：14px 上下、行高 1.6 起，读起来不累正文 14px、行高 1.6 起，段落之间空一行，长文读起来才不累。
- 辅助信息：时间、备注，用灰色小字弱化官网改版 v2进行中林小hu 更新于 3 天前 · 仅自己可见
- 强调重点：加粗或变色，一句话只标一两个词本次更新修复了 12 个问题，其中支付流程改动最大，请重点回归。
什么时候不用
- 层级太多：一页五种标题，等于没有层级一级标题二级标题三级标题四级标题五级标题
- 正文用浅灰小字：看着高级，读着费眼这是一段很重要的操作说明，但用了 10px 浅灰字，得眯着眼才能读完。
- 整段加粗：全是重点，等于没有重点整段话全部加粗之后，每个词都在喊“看我”，结果等于没有重点。
- 拿空格和换行硬凑对齐 → 交给 间距 Space 统一管姓 名：林小hu
手机号码：138 0000 0000靠全角空格对齐，换个字体就歪
组成结构 · Anatomy
2026 年产品规划
正文：说清背景、目标和下一步安排，字号 14px 上下、行高 1.6 起。
辅助文字：林小hu 更新于 3 天前
1标题Title字号最大、字重最重，一个页面别太多
2正文Body承担主要阅读，字号 14px 上下、行高 1.6 起
3辅助文字Caption灰色小字，放时间、备注这类次要信息
常见变体 · 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% 较昨日