字体搭配,让信息有秩序
字体搭配试排台
输入只在本页处理选择字形组合,放进自己的文字。一次只改变一个参数,观察标题与正文的关系。不同设备的系统字体可能不同。
城市的留白
在路口停一会儿,观察建筑退后一步留下的空间。树影、门廊与行人的停顿,让街道有了不同的节奏。
城市漫步 City Walk · 集合 09:30
标题 42px · 正文 18px · 行高 1.8 · 大小比 2.33
从选择字体,走向安排阅读
先写角色。标题负责引入,正文负责持续阅读,标签负责定位。再做对比。每次先改变一个变量,把字形、字重和字号拆开观察。最后回到内容。换进真实长标题、标点和数字,检查方案是否仍成立。
本站图例为原创教学排版,使用系统字体类别示意;不同设备会调用不同字体。图中的数值是练习起点,不是所有项目的固定答案。
短文字:允许较强的字形性格,但时间、地点等行动信息必须容易找到。
长文字:先把正文排顺,再加标题个性;连续阅读的节奏比单字惊艳更关键。
怎样使用:任选一个具体问题,读图、照步骤试排,再用本地工具记录参数。
宋体与黑体怎样形成对比
中英混排:先看视觉体量
字号层级:从正文往上建立
长文节奏:行高、行长与段距
海报取舍:让行动信息被找到
给散步手册分配文字角色
交换宋黑的标题与正文
用 City Walk 检查中英体量
试排 18 / 28 / 42 的字号表
逐项排查行高与段距
删掉一个海报装饰变量
入门路径 · 从角色到应用
- 1先分角色,再选字体先定角色
- 2宋体与黑体怎样形成对比再看字形
- 3中英混排:先看视觉体量处理混排
- 4字号层级:从正文往上建立建立层级
- 5长文节奏:行高、行长与段距读长段落
- 6海报取舍:让行动信息被找到综合应用
排查路径 · 从阅读障碍回看选择
- 1长文节奏:行高、行长与段距先查密度
- 2字号层级:从正文往上建立再查大小
- 3中英混排:先看视觉体量查异文体量
- 4先分角色,再选字体回到任务
- 5宋体与黑体怎样形成对比复查对比
- 6海报取舍:让行动信息被找到最终删减
六个观察动作
读图后动手标角色
把每段文字标成标题、引言、正文或说明,先给它们明确任务。
看轮廓
缩小页面,只看深浅块面:主标题是否真的最先出现?
比骨架
用同一句话对照宋体和黑体,观察转折与笔画反差。
验数字
加入 09:30、2026 和 A–Z,查看字母与数字是否突兀。
拉长文
把两行示例换成三段真文,暴露断行、行高和段距问题。
减一个
删去一种装饰或字体,判断阅读顺序是否反而更清晰。
方案留下来的理由
用内容检验选择能够解释
用“时间应当先被看见”说明加粗原因,比“这样高级”更可复核。
能够重复
固定标题、正文、说明的角色,同一系列页面就能延续规则。
能够容错
长标题、缺字回退、窄屏和数字变化都应纳入小样。
能够阅读
在目标尺寸读完一段内容,检查是否需要频繁找下一行。
能够修改
先收敛为两种字形角色,后续换内容时减少连锁调整。
能够交接
记录字号、行高、字体回退与适用场景,让下一位知道选择理由。
四个设计判断
避免只凭字样好看相似不等于协调
两款几乎相同的正文字体并排,有时只留下难以解释的小差异。先试同一家族的两个字重。
相似性对比不只来自字形
字号、重量、留白都能建立秩序;换字体之前,先问现有字体能否解决问题。
对比度同字号不等于同大小
中英视觉体量不同,混排需要放进完整句子观察,而非只对齐设置面板上的数字。
混排完整页面才是试样
单字预览看不到段落密度、长标题换行和信息竞争。让真实内容参与选择。
上下文