LESSON · TYPE TOWN
三

字体与排版

小镇居民全是铅字。他们最恨两件事:随手定的字号,和喘不过气的段落。

No.01

镇上的四户人家

字体不必认识几百款,先交好这四户。每户有自己的脾气,也就有自己该去的地方:

永

宋体 Serif

横细竖粗,笔锋收尾。长文阅读的行家,自带书卷与印刷气质。

永

黑体 Sans

笔画均匀,现代利落。界面标题与按钮的主力,屏幕上的万能户。

永

楷体 Brush

手写骨架,温和亲切。适合引语、批注、招牌题字,不宜排长文。

永

等宽 Mono

每字同宽,对齐成列。代码与数字的居所,机器感十足。

一页最好只用一到两户:一户管标题(气质),一户管正文(耐读)。中西文混排时记得成对指定,例如 "Noto Serif SC", "Songti SC", serif,让两种文字各归其位。

No.02

字号不是随手定的

页面上的每个字号都该来自同一把尺子:先定正文字号,再按固定倍率放大出各级标题。这套阶梯叫字阶(Type Scale),它让大小之间自带秩序。选个倍率感受一下:

试一试

字阶生成器

base × ratio
15px

倍率越小、层级越密,适合工具类界面;倍率越大、标题越有戏剧性,适合海报与落地页。拿到一个新页面,先抄下它的字阶,再动第一笔。

No.03

让段落呼吸

中文正文的两条经验值:行高约 1.7–1.8(汉字方正,挤在一起就糊),行长 30–45 字(太短换行频繁,太长眼睛找不到下一行)。

试一试

行高 · 行长调节台

1.7–1.8 · 30–45字

雾散之后,山谷把昨夜藏起的东西一一交还:被风吹歪的路标、留在石阶上的苔痕、以及一行被雨水泡胀的字。我们沿着它往上走,像在读一封迟到多年的信。段落的美,多半不在字里,而在字与字的空隙里。

1.80
38字
行高 · 舒适行长 · 舒适
✗不呼吸的段落

雾散之后,山谷把昨夜藏起的东西一一交还:被风吹歪的路标、留在石阶上的苔痕、以及一行被雨水泡胀的字。我们沿着它往上走,像在读一封迟到多年的信。

行高压到 1.25,还两端对齐到全宽——汉字方正,这样排会糊成一面墙。
✓呼吸的段落

雾散之后,山谷把昨夜藏起的东西一一交还:被风吹歪的路标、留在石阶上的苔痕、以及一行被雨水泡胀的字。我们沿着它往上走,像在读一封迟到多年的信。

行高 1.85、行长限在 34 字。同样的字,立刻能「读」了,不再只是「看」。
No.04

强调的分寸

一段话里只该有一处强调。网页里下划线是链接的领地,强调请改用字重或颜色;中文没有用斜体的传统,屏幕上更应避免。选一种方式试试:

试一试

一种强调,四种画法

one at a time

山风把字吹得很轻,但每一行都站得很稳。

No.05

样例小径

段落 ·《长夜》进入用例 放大细看 ↗
为什么这样设计行长 36 字、行高 1.95、段距行高之半——眯起眼睛看,段落即灰面。
短语 ·《口令》进入用例 放大细看 ↗
为什么这样设计动词开头、数字说话、省略号示意——界面的话越短,用户走得越远。
词 ·《字衡》进入用例 放大细看 ↗
为什么这样设计W9 的词是宣言,W4 的词是平常话——一个词的字形,决定品牌的嗓音。
引语卡片进入用例 放大细看 ↗
为什么这样设计楷体承载引语的手写气质;行高放到 2.0 让短句有悬停的余地;引号与署名退成配角,只留金色一点。
No.06

本站行囊

  • 一页一到两户字体:管气质的,和管耐读的
  • 字号全部来自字阶,禁止随手定
  • 中文正文:行高 1.7–1.8,行长 30–45 字
  • 强调一处就够;下划线留给链接,斜体别用