下载掌阅APP，畅读海量书库
立即打开
在互联网上大家会注意这样一个现象：国外网站大部分以非衬线字体为主，而中文网站基本上是宋体。其实不难理解，衬线字体的笔画有粗细之分，在字号很小的情况下细笔画会被弱化，受限于计算机屏幕的分辨率，10px～12px的衬线字体在显示器上是相当难辨认的，同字号的非衬线字体的笔画简洁而饱满，更适于做网页字体。
如今随着显示器越来越大，分辨率越来越高，大家经常会觉得网页中12px大小的文字看起来有点吃力，设计师也会不自觉地开始大量使用14px大小的字体，而且越来越多的网站开始使用16px甚至18px以上字号的文字做正文。
虽然在网页上字号不像字体那样受到多种客观因素制约，看起来似乎设计师可以自由选择字号，但这并不意味着设计师可以“任性”了，出于视觉效果和网站用户体验考虑，仍然有一些基本的设计原则或规范是需要注意的。
提示
在一个网站中，文字的大小是用户体验的一个重要部分。随着网页设计潮流的不断变化，文字大小上的设计也在不断改变。如果网站上的文字无法阅读或者用户根本没有兴趣，这个设计就是失败的。文字也并不是仅仅放在网页上就可以了，还需要合理的布局和样式搭配才能起作用。
这里通过观察和实战总结了几条网页中字号应用的规范，可以使网页设计更加专业。
（1）字号尽量选择14px、16px、18px等偶数字号，文字最小不能小于12px。
（2）顶部导航文字为12px或14px；主导航菜单文字为16px～20px；工具栏文字为14px或16px；一级菜单使用18px、二级菜单使用16px，或一级菜单使用16px加粗、二级菜单使用14px；版底文字为14px或16px。图2-6所示为网页中文字大小的设置。
图2-6 网页中文字大小的设置
（3）正文字体大小：大标题文字为24px～32px；标题文字为16px或18px；正文内容文字为12px或14px，可以根据实际情况对字体加粗。图2-7所示为网页中正文文字大小的设置。
（4）按钮文字：例如登录、注册按钮或者其他按钮中的文字通常为16px～20px，可以根据实际情况调整字体大小或加粗。图2-8所示为网页中按钮文字大小的设置。
（5）同一层级的字号搭配应该保持一致。例如，同一层级的版块中标题文字和内容文字的大小的一致性。
此外，随着网页设计开始流行大号文字设计风格，一些品牌网站、科技网站、活动网站以及一些网站产品展示栏目的文字的字号给人非常棒的视觉体验，如图2-9所示。
图2-7 网页中正文文字大小的设置
图2-8 网页中按钮文字大小的设置
图2-9 大号文字在网页中的应用
（6）在广告语及特殊情况中，需要根据实际的设计效果来选择文字字号。图2-10所示为网页广告中的文字大小效果。
上面分享的规范只是作者根据长期项目总结的最佳实战经验，在实际网页UI设计中，还需要设计师们根据网站特征和具体情况灵活设计。
图2-10 网页广告中的文字大小效果