跳到正文
笔记库
阅读3 分钟萌芽

760px 是怎么算出来的:中文长文的行宽

阅读列宽度不该靠感觉调。中文每行 34–42 字,配合 17px / 1.8,宽度落在 680–780px。现在是 760。

"正文要多宽"这个问题,我见过最多的答案是"差不多 65ch"。但 ch 是西文的字符宽度单位,用在中文上会直接偏窄 30% 以上。

先从字算起

中文排版的通行建议是每行 30–40 字,偏舒适区间在 34–38。

超过 40 字,眼睛回到下一行时需要重新定位,容易串行;低于 30 字,换行太频繁,句子被切碎,阅读节奏被打断。

那么宽度就是简单的乘法:

每行字数 × 单字宽度 = 列宽
 
17px × 36 字 = 612px   ← 只有字宽,还不含字距

严格来说还要加上字间距和标点挤压。实际渲染里,17px 的中文单字加上默认字距:

  • 一行 36 字,宽度落在 650–670px
  • 一行 41 字,宽度落在 750–770px

为什么现在写 760

最早定的是 680,取 34–38 那个区间的中点上、能被 4 整除的整数。后来整站容器从 1120 放宽到 1280,回来重新看这一列,发现 680 在 1232px 的内容区里显得单薄——左右两栏被推得很远,正文像一条窄带浮在中间。

于是上调到 760:

列宽每行字数(17px)感受
620px33–34略密,长句要换行两次
680px36–37原值。稳定,但放在宽容器里偏窄
760px41现用值。一行读完一个完整长句,回扫靠左右两栏定位
820px44–45开始串行,眼睛回扫吃力

760 承认了一件事:41 字/行确实超出了那份"34–38"的通用建议。这不是发现原值算错了,是一次有代价的上调。

为什么 41 字在这里能接受

那条建议的前提是"纸面上只有这一列字"。这个站不是:

  • 左右两栏形成水平锚点。 左侧常驻目录、右侧常驻元信息,眼睛回扫时有参照,不需要凭空定位。
  • 垂直分层比纸质清楚。 行高 1.8(30.6px)、段距 1.2em,串行的代价被压低。
  • 屏幕分布变了。 1440 是现在的下限,2560 也不少见;容器放宽之后,正文再停在 680 等于主动制造空旷。

代价是真的:41 字时,特别长的句子回扫比 36 字要吃力一点点。所以这是上限,不是起点。

三栏怎么排

阅读页用三栏,但只有中间那栏是内容:

┌────────┬──────────────────────┬────────┐
│  目录   │     阅读列 760px      │ 元信息  │
│ 130px  │                      │ 104px  │
│ sticky │  正文 17px / 1.8      │ 成熟度  │
│ 弱化    │  段距 1.2em           │ 修订    │
└────────┴──────────────────────┴────────┘

左右两栏的信息密度必须明显低于中间,否则读者会在三栏之间来回跳。所以目录用 13px 弱化色,元信息只放成熟度、更新时间和标签——不放"相关推荐",那会把注意力从正文拉走。

字号只留两档字重

中文在屏幕上,font-weight: 700 会让笔画粘连,尤其是小字号。所以正文体系里只用 400 和 500:

  • 400:正文、次要说明
  • 500:标题、强调、按钮

需要更强对比时,用颜色和字号,不用第三个字重。

一个反例

我最初想把阅读列做成"响应式宽度",在宽屏上放开到 820px,理由是"屏幕这么大不用浪费"。

试了两天就改回来了。宽屏的空余不应该由正文去填,应该由留白去填。 读者的视线移动距离和屏幕宽度无关,只和每行字数有关。

这次从 680 到 760,只走了这条线的一半:够到"不再显得单薄",没到"用字把屏幕填满"。820 那条线仍然不碰。

列宽定完之后,还有三样东西会跟着读者走:目录、进度条、相关阅读。它们各自的克制点记在 三样辅助,三次克制。

接着读