网页设计中16像素的字体才是王道

 

我知道你们在想什么，“16像素？太大了，对大多数网站而言，12像素是最理想的。”

至于为什么要16像素，我之后就会解答你们的疑惑。

编者提示: 本文针对的是英文字体, 由于中文和英文在Web编排中略有不同, 故读者请勿将这里说的具体数值在中文设计编排中对号入座!

专家Oliver Reichenstein在《百分百易读》（原名：《The 100% Easy-2-Read Standard》）一书中说到，“16像素其实不大的，这是浏览器显示的默认尺寸。一开始看起来确实很大，不过一旦当你自己用过后，你就会明白为什么这么多浏览器开发者会选16像素作为默认尺寸了。”

在这篇文章中，我会解释清楚——在如今网页设计中，为何要以16像素作为字体的最小尺寸。

大部分情况下，在设计一个网站时，如果字体大小设为10-15像素，那就是在浪费你客户的钱，为什么呢？我会证明给你们看。

读者数量=盈利

你为客户或者自己建一个网站，目的就是要赚钱。

你的客户也许仅仅需要通过网站卖一种产品、提供服务又或只是提供信息，无论什么情况，生意就是生意，是要看投资回报率的，终终是要实现盈利。

所以，每个设计元素都必须按照这个目的来设计。这就包括文案。尤其要特别重视文案，因为这是吸引用户最有力的武器，先不管你要让他们在网站里干什么。

设想一下，如果你不告诉用户进网站要干什么，或者为什么要进来，用户自己是不会主动点击进来的。所以唯yi的方法就是，用文字告诉他们。这样他们才会浏览网站的内容。

和阅读有关的重要常识

这里有几个很关键的因素，做文案需要特别注意的，比如读者人数，文章的可读性以及文章的理解度。如果用户不想看，或者根本无法看，又或理解不了，怎样解决这些问题呢，有几点需要了解下。

1. 40岁时，人的视网膜接受到的光要比20岁时下降一半，到了60岁，视网膜接受到的光只有20岁时的20%。
2. 差不多有9%的美国人的视力是有问题的，即弱视或者完全看不见，这就意味着他们即使戴了眼镜，也没用。
3. 在阅读一篇文章时，我们一次能看多少，是由我们的理解力和阅读速度决定的。阅读范围越大，内容理解起来就越容易。影响阅读范围的关键就是字体设置的大小，想想近期看过的广告牌吧，字体小吗？
4. 在坐姿舒服的前提下，大部分人和电脑屏幕之间的距离是20-23英尺 。事实上，28英尺是很好距离，因为这样有助于避免视觉疲劳。这比一般我们看书之类的还要远，大部分人看杂志什么的都不会有一臂之远的距离。
5. 电脑屏幕上16像素大小的字体，和一本书或杂志里的篇幅大小是差不多的，之所以设置16像素的字体大小，是根据人们的阅读距离而测算出来的。当字体大小只有10磅时，我们看书就会凑得很近，经常只有几英尺的距离 。如果你放到一臂之长的距离看看，你会发现就需要放大到12磅了，这个大小放到电脑屏幕上就差不多是16像素。
6. 在2005年的一项网页设计问卷调查中，字体大小的问题票数最多，比排在第二的多了2倍的票数，2/3的参与者都一致抱怨：网页的字体太小了。假想，情况已经好转，会是什么样的情况，就不会有这么多抱怨了吧。我在SiteInspire上，随机抽取一些博客，发现文本的大小还是12像素，甚至还有10像素的，反正是没有超过14像素的。同样的，如果你在热门的Elegant Themes和ThemeForest上，随机抽选一些文本，你会发现，每个主题的文本大小都是12或者13像素的。

图1为：24英寸的屏幕上显示的16像素的文本字体，请点击此图片看看12磅的大小是什么效果

图2为：15.4英寸的屏幕上显示的16像素的文本字体，请点击此图片看看12磅的大小是什么效果

 

大部分网页用户，不喜欢“正常大小”的字体

根据以上的分析，我会问：你们客户的用户中有多少是40岁左右的？要知道，相比20岁的年轻人，他们得多花一倍的功夫看东西。如果用户是近60岁的，那就要花4倍的眼力才行。

你的读者中几乎有1/10的人是视力有问题的。剩下那些视力没问题的呢，大部分都不得不吃力地看着比16像素小的字体，甚至他们还不会发现这是个问题。（你会到什么时候才发现自己看电脑看的腰酸背痛呢）如果靠屏幕越近，他们会很不舒服，而且发现不符合人体工学。要知道，最自然舒服的坐姿，是眼睛距离屏幕至少一臂之长呢。

简而言之，对一般网页用户来说，逛网站可不是一场视力考验。你的文章读起来越吃力，看得人就越少，让人理解的也就越少。10像素的文本肯定是没有意义的，12像素依旧小。如果读者有很好的选择的话，甚至15像素也不行不通。所以结论就是，如果你想要吸引很多的读者，来看并且理解你的文章，进行互动，你就必须设定字体的大小不低于16像素。

“但是，用户自己可以放大字体的大小”

如果你代码使用正确，有视力问题的用户则可以通过其他选项及“+”键放大文本。

因此，在与网页设计师讨论时，我将它列为了重要的讨论项目。

但事实并非如此。那些最需要调整字体设置的用户，通常不知道该如何操作。而他们最擅长的，则是点击“返回”按钮。你或许会认为，在没有把网站设计的能另用户有完mei的使用体验之前，不该收取客户的钱。因为在实用性方面，我们的个人品味远不比很好实践效果来的重要。

网页设计不仅仅取决于设计师的喜好。而是关乎于用户的选择，什么最能达到客户的标准。

如果客户的网站是以提高产品/服务的收益为目标的，作为设计师的我们就得尽可能的利用某些方法达到这一效果。采用大多数用户习惯的字体大小，但终终需要考虑到成本的问题。

在打印方面，考虑到开支，8 磅的字体大小是兼顾可读性与成本的一个理想选择。在网上，你无需支付任何多余空间的费用，所要做的就是提供吸引用户浏览的文案。当然，如何让读者通过点击而非转换的方式快速且便捷的找到目标文本，则需要一定的费用。

因此，问题在于，你是准备将客户的资金投入进你所谓的“看起来不错”，还是以用户为导向的“看起来不错”？

16像素是不大的

作为设计师，我们的品味与审美观远远强于我们的认知范围。“这看起来不错” ，有这样的反应，是因为我们预想的结果与其他设计师不谋而合。

然而不幸的是，如今我们浏览的大多数网页的文本都很小，这是因为以前屏幕都很小，所以不得不匹配小号的文本字体，以至于到现在大家都习惯了小字体。

在这篇文章中，我把TeX Gyre Schola的大小设置为19像素。因为16-18像素对我来说，看上去太小：如果我舒舒服服的背靠着椅子，距离电脑屏幕28英尺，我就需要眯起眼睛才能看得清字体。如果把字体设置成为Georgia 或Verdana，16像素可能刚好：较大的宽度，字体才比较清晰。

下面这段文字是12像素的，看看你是否会不自觉向前倾，眯起双眼，皱起眉头。如果你还不同意，就请在评论中提出你的意见吧！

---