improving-online-reading-experience

如何提高网页中文字的阅读体验,这是可以写一本书的问题,仅仅是粗略的搜索一番,也是众说纷纭。我倒认为这是一件很主观的事,即使是同样的排版设置,在不同的设备,不同的系统甚至不同的浏览器中表现都不一样,也可以说在网页设计中排版是极其自由的,加上每个读者阅读喜好不同,关于如何提高用户阅读体验这件事,自然没有统一的标准。

对于自建网站,尤其是博客网站来说,如何排版完全取决于站长,最不济的情况下自己看着舒服就行。但我认为网页作为表达你想法的媒介,让看的人有一个过得去的阅读体验其实是件很重要的事。

这里推荐一下 B 站 UP 主 oooooohmygosh 的视频合集——有趣的设计,非常生动形象,特别是其中讲文字排版的几期视频,应该会对你有所帮助。引用一段他在 几件小事,快速拯救你的排版 这期视频中的话:

也许你并不是一个平面设计师,也许你只是撰写一个博文,或者只是发布一条朋友圈。但你也应该或多或少从读者的体验来思考,优化你的排版毕竟你并不只是自己看,而是想要别人来读,你为此付出的这些努力,都是所谓设计的一部分。

具体该如何设置,我没有经过专业学习,不能道出一二。只能狭隘的说说经过一些初步认识和学习后,在自己博客字体选择与正文排版上的一些选择与取舍,也谈不上抛砖引玉,只是主观感受,仅供参考。

* 以下内容默认讨论的是电脑网页端情形,更专业的参考,推荐阅读 孔雀计划:中文字体排印的思路

字体选择

其实这几年也研究过很多次关于网站字体的选择,尝试了很多方案,但都不尽人意。同时这也是一个被很多博友反复研究过的事情了,例如:

这里不再重复啰嗦各个字体的区别,哪个字体更好看之类的问题,你需要做的是选出几个自己喜欢的字体,在考虑到对网页加载速度造成的影响、多数读者的观感等因素之后,进行对比取舍。

衬线字体与非衬线字体

就个人的感受来说,衬线字体是更加好看的,特别是中文衬线字体看起来相当地优雅。不过考虑到电子屏幕上特别是低分屏上,需要有所妥协,一个直观的感受是:

- 电子屏上非衬线字体阅读会更加轻松,较小的字体也能清晰的辨别,对设备的显示要求也更低。

- 在纸质或者墨水屏上衬线字体阅读会更加舒适,甚至对于小说这一类书籍,衬线字体会让我更容易读下去。🧐

字体家族

分为西文字体和中文字体的选择。

先说说西文字体。在尝试 Inter 字体之前,我是坚定的 Open Sans 爱好者,也一直用了很多年,但在用过 Inter 之后就更换阵营了,Inter 适配性更广,观感也更加自然,唯一的缺点也是不少字体的通病,大写的 i (I) 和小写的 l (L) 不分 (Il)。

opan-sans-vs-inter

Open Sans & Inter

还有一个小问题是,Inter 字符集比较全,官方提供的字体文件比较大,单个字重的 woff2 文件大小在 100kb 左右,网上没找到只包含拉丁字符的精简版本,之后想到使用 Google Fonts,Google Fonts 有国内节点(谷翔),大多数地区速度都很快,但不幸的是我以前碰到过几次抽风,加上国内环境的不确定性,所以考虑换一个方案。后来用了一段时间 360 奇舞团维护的免费 CDN 服务 75CDN,提供了 Google Fonts 的本地 CDN,速度很快,体验很棒,但 Inter 字体目前只有常规字重,略显可惜。

然后又开始自己反代谷歌字体使用,但体验不尽人意,提前高优先级加载会阻塞网页加载,异步加载使用 font-display: swap 属性也会加载后重新渲染网页造成明显的 CLS 问题。在我多次考虑要不要放弃使用 Inter 字体转而直接用系统自带的字体时,偶然发现了一个提供谷歌字体本地化服务的网站 google webfonts helper,可以非常方便的下载 Web Fonts,单个字重的 woff2 文件大小只有 25kb 左右,通过使用 preload 预加载几乎不会对网页造成 CLS 影响。

再来谈中文字体。考虑到中文字体的体积,即使使用一些字体工具只提取常用字符来进行精简,仍然不小,本地化几乎不考虑。其实中文如果用 Google Fonts 的话是不错的选择,按需加载,在有国内 CDN 的情况下体验很不错,不过我最后还是更倾向于从系统自带字体中选。

Mac OS 上几乎不用担心,默认的苹方效果相当不错。Linux 上不少发行版也内置了不错的中文字体,而且考虑到 Linux 用户大概率会自己装字体,问题也不大。到了 Windows 上就有些为难了,默认的微软雅黑只能说中规中矩,但也能用。所以有相当一段时间我的中文字体设置如下:

font-family: 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;

最近喜欢上了设置一些奇奇怪怪的子重,如 Medium, SemiBlod 等,Windows 上中文字体多字重的缺失对我来说是个不小的问题,而且一旦配合上西文字体,即使同样的字重放在一起也会粗细不均。

经过漫长的探索与尝试,我放弃了治疗,最后决定将选择还给用户,直接使用用户的系统默认字体,不过西文字体我还是再坚持一下 Inter。由此我的网页字体最终设置如下:

font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

Updated 2024-02-19:

最近发现了一个关于是否使用 system-ui争议,简单来说就是在 Windows 中文系统(特别是旧版本)中,使用 system-ui 可能会出现非预期的显示效果,当然 system-ui 本身没有任何问题,只是某些情况下 Windows 系统的默认字体会比较抽象。如果你想确保在极端环境中网页字体也能呈现出你想表达的效果,可以考虑手动指定字体。

字号

随着高分屏的普及,文字变得更加“高清”,同时也变小了。

字号的选择首先要看单位,常用的单位有 px, em, rem, % 等,我更倾向于使用 px,似乎略显老套,不过更加稳定可控。目前 Chrome 以及绝大数多浏览器默认字体大小为 16px。但不知道大家有没有注意,现在很多国外网站的默认字体都越来越大,例如 Github Blog 为 18px,Medium 为 20px,还有一些网站如 Google Web Dev 是根据当前窗口大小动态设置的,font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); 当然英文和中文不能一概而论,也不是说字号小就不对,如果排版适当反而会有一种精致感,但我更倾向于稍微大一些,读起来会更加轻松。

考虑到目前使用 24 寸 1080P(92 ppi)显示器的用户仍占主流,而 4K、5K 等高分屏用户也大概率会开启缩放,于是我将网页的字体设置为了 18px,但最后还是取决于你网站的内容和风格,只要整体协调,都是好的选择。

* 下文排版讨论默认为 18px 字体情况下

排版设置

一旦谈到页面排版就会比较复杂了,但对于博客文章来说并不会涉及到过多,只需要考虑一些简单的页面宽度、间距以及书写规范即可。

正文宽度

正文宽度会直接影响当前文段内容的信息量,但如果不加以控制,每次读到行尾进行行间跳转开始找下一行时就会不太轻松,在大屏幕特别是带鱼屏上甚至会频繁的转头才行提前治疗颈椎病,当然,一些专业性的文章自然不可避免。我认为在 24 寸 1080P 分辨率下,对于普通文字内容来说一个舒适的阅读宽度在 640px ~ 800px 区间(也和字体大小有关),随着分辨率的增加可以适当增加正文宽度。

正文宽度换一个名字叫行长,一般情况下建议一行的行长为文字尺寸的整数倍,各行的位置尽可能头尾对齐。多数中文网站会使用两端对齐,确实看起来会更加舒适,不过我个人更加喜欢参差不齐的感觉,没有指定对齐方式,同时在中英文夹杂的情况下能避免很多问题。

段距与行距

字间距一般情况下不用调整,字体在设计的时候设计师就已经进行了精细的调整,绝大多数情况下已经是最优的显示效果了,因此主要关注段距与行距。

行间距作为一个影响排版的重要因素,过大或过小都会导致阅读体验下降。西文的行间距一般是 1.2 倍左右,中文在 1.5 ~ 2 倍之间体验会比较好。

段距的话按网上推荐的说法是取一个空行的高度(行高 + 行间距)或者为行间距的 1.25 倍。在以文字为主的网页中,如果参照我设置的 18px 字体,1.8 行间距,段距设置在 25px ~ 30px 之间是不错的选择。

网页阅读不只有文字,常常还有多级标题,图片和代码块这些,它们的行距可以和文字一致或者稍微高一些用以突出,这个就看个人的喜好了。

中英文混排

中英文混排是一个老生常谈的问题,不过据我观察,不少博主并没有特别在意这件事,Github 上有一个比较热门的中文文案排版指北,这里也简单谈谈中英文混排要不要加空格的问题。

虽然里面在中西文之间添加空格只是一个折中的办法,但确实能在一定程度上提高阅读体验。不过也有部分朋友反对这种做法,在 v2ex 上也是个月经话题。显然,从本文就可以看出我是属于支持的那一派,因为实在不喜欢中英文挤在一坨。但也确实会在某些情况下出现排版问题,如下图中谷歌搜索页面会去掉前一个中英文之间的空格。

mixed-typeface

Google 贴心的去掉了前面的空格。

客观来看,归根结底还是一个习惯问题,我是认为如果大多数人都认为加上阅读起来会比较舒服,那加上也无妨,而不是纠结这件事应该是交给渲染器去做(例如 iOS 和 Microsoft Word 中会自动留空)的,自己该不该做。虽然不优雅,也更不应该去推崇,不加上没毛病,加上也只是在当前的 Web 环境下的无奈之举。

如果你认为这篇文章还不错,可以考虑支持作者