阅读方法 动手试排
字体角色图例:同一句城市的留白以大标题、中号引言和小号正文呈现不同阅读层次
TYPE STUDY / 原创排版练习

字体搭配,让信息有秩序

先决定谁说重点,再选择用什么声音。
角色 对比 层级 节奏 取舍
从同一句话开始:把「城市的留白」分别排成标题、引言和正文,观察大小、粗细与空间怎样改变阅读顺序。

字体搭配试排台

输入只在本页处理

选择字形组合,放进自己的文字。一次只改变一个参数,观察标题与正文的关系。不同设备的系统字体可能不同。

LIVE SPECIMEN / 实时小样

城市的留白

在路口停一会儿,观察建筑退后一步留下的空间。树影、门廊与行人的停顿,让街道有了不同的节奏。
城市漫步 City Walk · 集合 09:30

标题 42px · 正文 18px · 行高 1.8 · 大小比 2.33

从选择字体,走向安排阅读

面向做海报、文章和展示页的创作者。

先写角色。标题负责引入,正文负责持续阅读,标签负责定位。再做对比。每次先改变一个变量,把字形、字重和字号拆开观察。最后回到内容。换进真实长标题、标点和数字,检查方案是否仍成立。

本站图例为原创教学排版,使用系统字体类别示意;不同设备会调用不同字体。图中的数值是练习起点,不是所有项目的固定答案。

短文字:允许较强的字形性格,但时间、地点等行动信息必须容易找到。

长文字:先把正文排顺,再加标题个性;连续阅读的节奏比单字惊艳更关键。

怎样使用:任选一个具体问题,读图、照步骤试排,再用本地工具记录参数。

原创图例 场景拆解 具体步骤 参数试排 常见误区 静态可读
6
专题详解
12
阅读入口
6
过程步骤
3
试排组合
8
常见问答

从一个具体问题开始

6 篇详解 · 6 个练习入口 查看全部 →

六个观察动作

读图后动手
Aa

标角色

把每段文字标成标题、引言、正文或说明,先给它们明确任务。

看轮廓

缩小页面,只看深浅块面:主标题是否真的最先出现?

Ag

比骨架

用同一句话对照宋体和黑体,观察转折与笔画反差。

验数字

加入 09:30、2026 和 A–Z,查看字母与数字是否突兀。

拉长文

把两行示例换成三段真文,暴露断行、行高和段距问题。

减一个

删去一种装饰或字体,判断阅读顺序是否反而更清晰。

方案留下来的理由

用内容检验选择
01

能够解释

用“时间应当先被看见”说明加粗原因,比“这样高级”更可复核。

02

能够重复

固定标题、正文、说明的角色,同一系列页面就能延续规则。

03

能够容错

长标题、缺字回退、窄屏和数字变化都应纳入小样。

04

能够阅读

在目标尺寸读完一段内容,检查是否需要频繁找下一行。

05

能够修改

先收敛为两种字形角色,后续换内容时减少连锁调整。

06

能够交接

记录字号、行高、字体回退与适用场景,让下一位知道选择理由。

四个设计判断

避免只凭字样好看
Aa

相似不等于协调

两款几乎相同的正文字体并排,有时只留下难以解释的小差异。先试同一家族的两个字重。

相似性

对比不只来自字形

字号、重量、留白都能建立秩序;换字体之前,先问现有字体能否解决问题。

对比度
Ag

同字号不等于同大小

中英视觉体量不同,混排需要放进完整句子观察,而非只对齐设置面板上的数字。

混排

完整页面才是试样

单字预览看不到段落密度、长标题换行和信息竞争。让真实内容参与选择。

上下文

一次完整的搭配过程

按操作顺序展开
STEP 01
写简报
明确读者、载体与最先要传达的一条信息。
STEP 02
分角色
圈出标题、正文、数字与说明,限制字体角色数量。
STEP 03
做小样
用同一份内容排两版,每版只改变一个主要变量。
STEP 04
看全貌
缩小观察层级,再回到实际尺寸读完整段落。
STEP 05
做压力测试
换上最长标题、窄屏和带英文数字的段落。
STEP 06
记录选择
保留参数、选择理由与需要重新检验的条件。

字体搭配常见问答

直接回答
一定要两种字体吗? 问答
不一定。同一字体的常规、粗体配合字号和空间也能完成层级,尤其适合内容密集的页面。
标题越大越好吗? 问答
标题需要领先,但也要看长度和容器。若挤成三四行,应先改断行与宽度,再判断是否缩小。
宋体只能配黑体吗? 问答
不是。宋黑只是容易观察差异的一种练习;两种宋体或同家族字重也可能适合,关键在角色与对比。
可以直接照抄图例参数吗? 问答
可以作为小样起点,但需换入真实内容,在目标设备与尺寸上复核。
中英同字号为何不齐? 问答
字体的视觉高度和宽度会不同。对齐基线后仍需看整体体量,必要时单独微调英文尺寸。
长文看着拥挤先改哪里? 问答
先确认正文尺寸,再逐步试行高与行长,一次只动一个变量,以免无法判断原因。
试排内容会被保存吗? 问答
工具只在当前浏览器页面里处理输入,不自动保存。导出参数会下载一份本地文本。
设备没有示例字体怎么办? 问答
工具使用系统字体回退,不下载字体。换设备可能改变字形,因此正式方案仍需在目标环境检查。