对于文本信息占据主要比例的站点来说，文本显示效果对整体外观和用户浏览体验的影响很大。文本样式的设定是设计师不容忽视的一个重点，看似并不复杂，但仍需要进行诸多方面的考量，经验不足的设计师偶尔会有些拿捏不准。前两期内容里，小编对网页设计中文本字体设计规范进行了总结，本期将继续讲述另两项内容，文本大小、文本颜色的设计规范总结。

字体大小

网页设计中，设计师通常有习惯使用的字号，比如常见的一种规范：使用 14px 作为标准字体，16px 作为中等字体，18px 作为较大字体，12px 作为偏小字体。

但网页的实际应用中，文字大小不只与px数值有关，与设备分辨率和视距都有一定关系。

首先，Px单位其实是一种相对大小单位，例如，同样的12px大小的文字，在低分辨率的屏幕上会比在高分辨率的屏幕上显得更大一些。

另外，当设备屏幕越来越小时，用户使用的时候可能会拿得更近，这样视角更大，减小了小字号带来的不便，典型的例子就是手机，把手机放在笔记本屏幕旁，对比可以发现手机上文本的物理尺寸比电脑上小得多，但用户并没有感觉异常。

基于以上这些因素，设计师在设定字号时，需要把目标用户的设备情况、使用场景都纳入考量；必要时，可以用JS实现不同屏幕分辨率下自动调整字号。

字体颜色

粗略地说，在界面中的文字分为三个层级，主文、副文、提示文案；在白色的背景下，字体的颜色层次其实就是黑、深灰、灰色，例如一组常用的色值：#333333，#666666，#999999。

如百度贴吧页面，贴吧标题填充#333333；帖子列表中，帖子标题填充表示可点击的链接色，内文摘要属于描述文字，填充#666666，作者、发帖时间等更次要的信息填充#999999。

以及一到两个链接色，链接色为站点根据主题风格设定的颜色，没有固定的色值，一个常见的链接色是蓝色#0000cc（百度搜索结果页面上的链接颜色）。

值得注意的是，纯黑色#000000在网页中的应用比较少，一般以近似黑色的深灰代替，如#333333等；原因是纯白背景上直接放置纯黑色字体，在屏幕上会略显刺眼，尤其是大段文本。

实际应用中，有的网站会在主文中以微妙的明度差别，区分不同信息的层次，如知乎的问题页面，问题标题填充颜色更深一些的#1e1e1e，问题补充文字内容填充稍浅#262626。类似的做法在其他站点中也很常见，色值并没有一定之规。

啰啰嗦嗦说到最后，在这里推荐一款浏览器书签栏工具，Whatfont，安装后点击图标开启插件，再点击网页上的文本，就可以告诉你所指字体的属性，字体名称、字体大小、字体颜色等，非常方便，目前可以支持的浏览器包括chrome、safari、firefox。使用这款插件，设计师朋友们可以在平时浏览网页时随时关注一下页面效果和对应的文本属性，总结出自己常用的文本设计规范。

Whatfont下载地址：http://www.chengyinliu.com/whatfont.html