网页字号对用户体验有什么影响？

题外话：中秋节快乐，首先祝大家气质高雅、香肌玉肤、花颜月貌，多吃月饼！

宽屏电脑屏幕的不断发展，让互联网的网站也逐渐趋向于宽屏，由此带来的文字大小需要网页设计师们重新考虑不同客户端的浏览体验。字号也就是字体大小，是用户体验中的一个非常重要的不可分割的一部分，不同尺寸的显示器，不同的分辨率下，甚至不同的浏览器设置，都会对最终网页展现给用户的文字大小产生重大影响。

当然有人会说，现在浏览器可以任意缩放页面，但用户增加了额外的操作成本，总归不是那么方便，更何况用户们并不一定都知道如何缩放网页。最好的办法还是根据当前用户的主流分辨率，给出一个比较合适的默认字号，那么什么样的字体，多大的字号才是适合我们网站的呢？

12px？14px？15px？16px？ 还是压根就不应该使用px这个单位呢？

问题的根源，在于屏幕上的一切字号单位（px，pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。

    相关研究人员曾证实字体影响我们的感受：差的字体使人无意识的反感，好的字体使我们感到高兴。如果字体能够影响我们的情绪，那同样会影响用户体验。

    字体影响读者的情绪

    字体通过两种方式影响我们的情绪。

    认知偏见

    首先，我们会自然而然的赋予某些字体及字体形式一定的内涵。好比我们对身边事物的看法经常受到认知偏差和生长文化的影响。例如，在美国，无衬线字体经常被用在政府书文上，而在英国，无衬线字体常被用在小报上。

    用户感受到的信息经常会因为文章字体的变化而变化。由于使用字体的不同，相同的内容传递着不同的信息。

    可读性

    事实上，一些字体本身比其他字体更具可读性。如果阅读一段文字时，我们的眼睛和大脑负荷越重，那我们对字体的感觉就更糟糕。

    衬线字体最早用在印刷上，因为衬线有利于眼睛更快速的区分字母。电脑刚问世时，分辨率还很低，衬线字体又必须用矢量创建，而矢量在早期的低分辨率屏幕上无法很好的显示。这使得早期的设计师默认使用位图创建的无衬线字体。

    在过去的几十年间，屏幕分辨率不断的发展。现在近距离也很难看见屏幕上的像素点，像Georgia这样的衬线字体也越来越流行。

    字体测试

    测试开始前，我们最想知道是：哪种字体最适合我的网站？不妨在一篇文章上进行了3种字体的对比测试：Georgia、Arial、 Verdana.我们通过文章的点击次数结合页面的跳失率和页面停留时间等行为来评估每种字体的表现。

    我们估计Georgia的可读性很强，应该比较适合网站。Verdana最不适合。结果如此，但是Verdana字体并不是最差的那个。使用Verdana字体时文章的点击量比使用Arial字体时多29.1%。同时，使用Georgia字体时，平均页面停留时间更长，这表明用户阅读文章的内容更多。这点已经通过热点图得到证实。

    字号测试

    在证实了Georgia最适合我们的网页后，我们同样想知道，几号的字体最适合用户阅读。苏州网络公司觉得字号越大，也具有可读性。于是测试了12px、14px、 16px这组字号。在网站上使用上述相同的方法测试，结果显示，14px的字体最适合阅读。

    字体优化的魅力

    根据测试优化字体后，我们网站的用户体验有多大的提升？

    自从我们整个网站使用14px的Georgia字体后，我们网站的平均跳失率（Bounce Rate）从88.0%下降到80.9%，7.1%的优化。每个页面的平均访问量从1.21上升到1.43，18.18%的优化；页面的平均停留时间提高了10分钟。

    中文字体推荐 

    线上中文字体推荐使用 思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑。其中 iOS 系统默认中文字体是「苹方 (PingFang)」，Android 系统中文字体使用「思源黑体 (Noto Sans CJK)」。

    介绍下「思源黑体」这款字体，它是由 Google 和 Adobe 合作开发出来的，风格介于现代和传统之间，可以广泛用于多种途径，比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体验，并且是免费的。

    咱再继续说字号规范吧。

在目前网页设计中，虽然没有明文规定文字的标准字号，但设计师应该都知道网页上12号和14号字体非常常见。这也是由于一些客观因素的制约：

>   设计软件。设计师使用的设计软件，比如PS等，大多数是偶数，这是一种习惯的延续。

>   浏览器。  在某些浏览器上，奇数字号会被自动渲染成偶数，比如IE6。

>   美观度。  偶数字号的文字，比如12号的“中”字，去掉1像素的间距，填充了像素的实际宽是11px，文字的中竖线左右是平分的，显得均衡，具有美感。

>   实际应用。Windows自带的点阵宋体从Vista开始只提供12、14、16px三个大小的点阵，在13、15、17px下，虽然每个字的空间大了1px，点阵却没变，但视觉上显得稀疏，显示效果不佳。

不过这些因素都可以酌情考虑。比如豆瓣和知乎等网站采用13号、15号也达到很好的效果，不过总的来说，偶数字号更“安全”。

另外，网页设计上著名的Smashing Magazine曾调查了50个流行的网页界面，发现这些网站通常都是采用标题大小18—29px，与此匹配的文章主体文字大小采用12—14px。虽然调查主要针对的是英文字体，不过我们也可以从中估算和对比出一些中文字号适用的规范。

综合以上种种原因和我们的最佳实践经验，我们总结了以下几条规范，它们可以让网页设计更专业：

1.文字的字号尽量选择12、14、16等偶数字号，文字最小不能小于12号。

2.导航文字及头部底部文字的字号：Header导航文字12号或14号；Menu导航文字14—18号；Sidebar文字12号或14号，一级菜单使用14号、二级菜单使用12号，或一级菜单使用12号加粗、二级菜单使用12号；Footer文字12号或14号。

【小结】：无论是什么样的排版和字体，文章都是让用户去阅读的，如果自己都感觉太刺眼或者字体大小有些突兀，那肯定影响用户的体验。要想提高用户体验度，首先自己得看的舒服，自己都感觉文章怪怪的，就不要怪用户不给流量了。