知识向站点的核心是长文内容,而长文的阅读体验直接决定了用户是否愿意停留、是否愿意翻页、是否愿意转发。很多团队把精力放在视觉设计上,却忽略了字号、行距、段距这些"看不见的细节"。本文把我们在 3000+ 长文页面中验证过的阅读参数整理成一份可落地的清单。
一、正文字号:16px 是底线,不是上限
中文正文字号的最小推荐值是 16px,低于这个数值在移动端会明显增加阅读疲劳。对于知识向站点,我们建议正文统一采用 16-18px,标题层级按 1.25 倍比例递增。
需要特别注意的是,字号不是越大越好。当正文超过 20px 时,单行字数过少,反而会破坏阅读节奏。我们曾做过 A/B 测试,18px 在桌面端的阅读完成率比 20px 高出 12%。
阅读友好的本质是"减少眼睛的工作量"。字号、行距、段距的每一个参数,都应该服务于"让眼睛在最小能耗下完成阅读"这个目标。
二、行高:1.75 是中文长文的黄金值
行高(line-height)对阅读体验的影响甚至大于字号。中文因为字形方块、笔画密集,需要的行间呼吸感比英文更多。
- 行高 1.5:过于紧凑,长文阅读 3 分钟后明显疲劳。
- 行高 1.75:呼吸感与紧凑度的平衡点,适合 800 字以上的长文。
- 行高 2.0:过于松散,破坏段落整体感,适合短句引用。
三、段距与段落宽度
段距应明显大于行距,让用户能快速识别段落边界。推荐段距为行高的 1.5-2 倍。段落宽度(即单行字数)建议控制在 35-45 个中文字符之间,过宽会导致回行时找不到下一行的起点。
四、阅读参数速查表
以下是我们推荐的阅读参数完整清单,可直接作为前端实现的参考基准:
正文字号 16-18px
桌面端推荐 18px,移动端 16px 起步,确保最小可读性。
行高 1.75
中文长文黄金值,兼顾呼吸感与段落整体性。
段距 28-32px
约为行高的 1.5-2 倍,让段落边界清晰可辨。
段落宽度 35-45 字
单行中文字符数控制在此区间,避免回行困难。
字间距 0.02-0.05em
轻微增加字间距,提升中文方块字的呼吸感。
文字颜色 #44544B
非纯黑,降低对比刺激,长时间阅读更舒适。
标题与正文间距 32px
二级标题上方留 32px,让章节切换更有节奏。
引用块缩进 24px
blockquote 左侧留 24px 缩进,强化引用语义。
五、移动端的特殊调整
移动端字号可维持 16px,但行高建议提升至 1.8-1.9,段距缩减至 22-26px。同时段落宽度受屏幕限制,单行字数自然会减少到 18-22 字,这是可接受的。
需要警惕的是横向滚动。当正文容器没有正确设置 padding 或 max-width 时,长 URL 或代码块会撑破容器,破坏阅读体验。建议为正文容器统一设置 overflow-wrap: break-word。
结语
阅读参数看似琐碎,却是知识向站点最值得投入的细节。把每一篇长文都当成会被认真读完的内容来排版,是对读者最基本的尊重,也是知识沉淀能被传播的前提。