行高与字距

同一段文字，为什么有的"挤成一团"、有的"散得拉胯"？秘密不在字本身，而在字之间——行高管"行与行"的间距，字距管"字与字"的间距。把这两个间距调舒服，文字就"好读"了。

文字好不好读，藏在"字之间"

上一节（字基础）讲清了"字本身长什么样"。这一节讲字之间的两处间距——它们是常被忽略、却决定"舒服度"的细节。一管上下、一管左右：行高管"行与行"的间距，决定文字"整不整"；字距管"字与字"的间距，决定文字"疏与密"。两个方向互不干扰，排版要舒服，上下（行高）先调对，左右（字距）再微调。

间距是设计，不是随手留的空：先调上下（行高），再微调左右（字距）。

行高 Line-height：管"行与行"的间距

行高是相邻两行文字基线之间的距离，决定每一行之间留多少空隙。中文正文通常行高 ≈ 字号 × 1.5：比如 17px 字号，行高约 25px。行高太小 → 行与行"贴脸"，挤成一团，读几行就累；行高太大 → 行与行"脱节"，散得拉胯，目光跳来跳去。所以行高必须比字号大，正文约 1.5 倍字号才透气。

中文正文行高 ≈ 字号 × 1.5：17px 字号 → 约 25px。

字距 Letter-spacing：管"字与字"的间距

字距是相邻两个字之间的空隙。它该怎么调，取决于字号大小：小字号适当加字距——字小时本就难辨，加一点字距让每个字"分开站"，可读性更好；大标题常收紧字距——标题字大，字与字之间天然显得空，略微收紧更紧凑、更利落。注意：加和收都是微调（几像素内），别过量——字距太大，一句话就"散架"了。

小字号加字距、大标题收紧字距；字距是几像素内的微调，过犹不及。

分寸来自场景：中英差异与何时调字距

中英文的行高标准不一样，根源在字形。中文字形方正、笔画密，天生"满"，需要更大行高（约 1.5 倍字号）才透气；英文字形有上下伸出的"小尾巴"（如 g、y），字本身已留了更多空，行高紧凑些也行（约 1.2–1.4 倍）。规则：界面以中文为主时，行高往 1.5 靠；中英混排看最密的语言——中文说了算。字距也不是一刀切，要在具体场景里拿捏。

何时调字距：

场景	字距怎么调	原因
小字号正文（≤15px）	适当加字距	字小难辨，松开更清楚
大标题（≥24px）	适当收字距	字大天然空，收紧更紧凑利落
全大写（英文）	通常加字距	大写字母连成一堵墙，加字距才认得出是单词

微信实例：17px 正文怎么调

微信字体的行高与字距取值：

场景	字号	行高	字距	为什么
朋友圈长文	17px	约 25px（≈1.5 倍）	0–1px	长文一行行展开，读得舒服
聊天消息	17px	约 22–23px（较紧）	0px	气泡短、信息密，不需要松散
大标题	—	—	略收紧	大字利落、紧凑

看懂了为什么，再看微信怎么"抠"每个像素。正文 17px，行高约 25px（≈ 1.5 倍）、字距约 0–1px。不同的场景，同一位"设计师"会给出不同的取舍：朋友圈长文行高拉到 25px，让几百字一行行展开、读起来不累；聊天气泡行高较紧（约 22–23px），因为气泡短、信息密，不需要松散；标题字距略微收紧，让大字标题更利落。一句话：间距是设计，不是随手留的空。

微信正文 17px：行高约 25px（≈1.5 倍）、字距约 0–1px；聊天气泡行高较紧约 22–23px。

深度

在 Penpot 里怎么设行高/字距？

1. 选中文字图层 → 右侧「文字 Text」面板。
2. Line Height（行高）：输入 字号 × 1.5，如 17 字号填 25.5。
3. Letter Spacing（字距）：小字号填 0–1，大标题可收成负数（如 −0.5）。
4. 摆一段中文长文，把行高从 17 拉到 25，亲眼看看"挤"变"舒服"。

边界：中英混排到底听谁的？

界面以中文为主时，行高统一往 1.5 靠；中英混排时看最密的语言——中文笔画密、字形满，是约束更紧的那一方，所以中文说了算。英文可紧凑些（1.2–1.4 倍），但别为了英文的紧凑牺牲中文的透气。

误区

误解	正解
"行高 = 字号就是对的"	错，会挤。行高必须比字号大，正文约 1.5 倍字号（17px 约 25px）
"字距无所谓"	错。小字号字距影响可读性，调错字就糊成一片
"行高和字距是同一回事"	不是。行高管"行与行"（上下），字距管"字与字"（左右）
"字距越大越清楚"	过犹不及。字距只是微调，加太多一句话就散架
"英文字行高和中文一样"	不同。英文字形自带"小尾巴"，行高可紧凑些；中文方正，行高要拉到 1.5
"大标题也要加字距"	大标题通常收紧字距，小字号正文才加字距

练习

即时题 Q1：行高管"什么之间"的间距？字距管"什么之间"的间距？Q2：中文正文 17px 字号，行高大约多少？为什么不能直接等于 17px？Q3：下面哪个场景应该加字距——a) 大标题　b) 小字号正文　c) 聊天气泡？

模块题 Q4：行高和字距的区别是什么？调排版时先调哪个？Q5：为什么中文正文行高普遍比英文高？微信用了约多少？Q6：朋友圈长文和聊天气泡，行高一样吗？为什么？

答案 Q1：行高管"行与行"（上下），字距管"字与字"（左右）。Q2：约 25px（17 × 1.5）；行高 = 字号会"挤"，行与行贴脸，读起来累。Q3：b——小字号字难辨，加字距让每个字分开站更清楚；大标题通常收紧。Q4：行高管"行与行"（上下），字距管"字与字"（左右）；先调行高（让整段透气），再微调字距（让字疏密舒服）。Q5：中文字形方正、笔画密、天生"满"，需要更大行高才透气；微信正文 17px 行高约 25px（1.5 倍）。Q6：不一样。长文行高拉到 25px 让人一行行呼吸、读得舒服；气泡短、信息密，行高较紧（约 22–23px）让信息紧凑。间距是设计。

迷你案例 下面这段 CSS 有两个问题，找出来并改对：

p { font-size: 17px;      /* ① 字号 17 */
    line-height: 17px;    /* ② 行高 = 字号，太挤 */
    letter-spacing: 0; }  /* ③ 字距 0 */

问题：② line-height: 17px 等于字号——行高必须比字号大，应改为 25px（1.5 倍），否则行与行会挤；③ 小字号正文字距 0——可给 letter-spacing: 0.5px 微调，让字更容易辨认（可选优化）。

改对后：

p { font-size: 17px;         /* 字号 17 */
    line-height: 25px;       /* 约 1.5 倍字号，行间透气 */
    letter-spacing: 0.5px; } /* 小字号微加字距，更好读 */

体验 打开微信朋友圈，看一条长图文，感受正文行与行之间的距离；再打开任意 App 的标题，对比它和正文的行高、字距，感受哪里"紧"、哪里"松"。

素材

本知识点抽象度低（1 分），不做素材——文字 + 表格 + 微信案例已足够，无需图示或交互演示。

• Type Scale 排版阶梯：知识点 05，看字号从 12 拉到 24 时层级怎么变（行高跟着字号走）。
• 微信/微博：对任意一条长图文，数一数行与行之间的距离，感受 1.5 倍行高。
• Lea Verou 的 CSS 排版笔记（英文）：排版的像素级细节，进阶可查。
• 下一节 08 间距体系：本知识点讲了"字之间"的间距，下一节把"元素之间"的间距（margin / padding）讲成一套体系。

---