Typography 排版
可以先理解为:组织文字层级和阅读节奏
排版像给文字安排声音大小和停顿。标题像重音,正文像稳定语速,行距像呼吸。如果排版乱,读者还没理解内容,眼睛就已经累了。
关键结构图
一组文字样式从 H1、H2、body、caption 排列,旁边标注字号、行高和用途。
What
Typography 是用字号、行高、字重和段落节奏组织文字阅读的方法。
Typography 排版是界面中组织文字层级、可读性和阅读节奏的一套视觉规则。它包括字体、字号、行高、字重、段距、对齐、行宽和响应式变化。它的边界是帮助文字被阅读和理解,不是追求字体本身的炫技。
StructureTypography = 字体选择 + 层级规则 + 行距节奏 + 可读性约束
When
当页面有标题、说明、正文、列表、按钮、标签和错误提示等多种文字时,需要排版系统。否则每段文字都会争抢注意力。
How
先确定正文可读字号和行高,再建立标题层级、辅助文本和按钮文字规则。检查行宽是否过长、层级是否过多、移动端是否仍能读。
Examples
文档页把 H1、H2、正文、代码和注释分成稳定层级,读者可以快速扫到结构。
卡片内如果标题太大、摘要太浅、按钮文字又太重,用户会不知道哪一层最重要。
来源
类型:设计系统实践 / 可读性原则
事实线:设计系统通常会定义 type scale、line-height 和 text styles,让标题、正文、标签和按钮文字保持一致。
依据:Material Design typography、Apple HIG typography、常见网页可读性和设计 token 实践。
边界:适合组织文字信息;不能替代内容结构和信息架构。
常见误读:不要只把排版理解成选字体。排版更重要的是层级、节奏和可读性。