创意之前，使用2款字体设计高大上的网页

经常浏览各种网站的人知道，中文文字网站上目前使用的字体基本分为两类：宋体、微软雅黑。还有很少量的网站会使用黑体文字或其他特殊字体。

Windows7普及之前，中文网站上字体几乎是清一色的宋体。除了中文字符文件大的局限，还有下面几个原因：

阅读习惯：中国人长期阅读纸质书本和杂志，大量宋体文字培养了一种固定的阅读习惯。

操作系统默认：Windows操作系统本身自带字体有限，如果没有指定字体，操作系统默认使用宋体渲染。

不同操作系统、不同版本的兼容性：近几年国内Mac使用人群在增长，不同系统、不同版本预装的字体几乎没有交集。即使是有限的常用字体，比如宋体、仿宋、楷体，在Windows和OS X展示也有一些视觉差异，而为了尽可能减少这些差异，大家一般会选择“安全字体”，比如宋体、黑体。

Vista系统出现后，Vista和Windows7默认微软雅黑字体，当用户逐渐接受这种美观大方的字体后，设计师也开始在网页设计中大量使用微软雅黑。

在专业的网页设计里，除了Banner图、广告语等特殊情况可能会用到特殊字体，网页中使用的字体以不超过2种为准，并且最好采用标准字体，比如中文的宋体、微软雅黑，英文的Arial、Verdana。

只有使用这些系统自带的字体，才能让前端开发人员在排版时高程度地还原设计稿的文字效果。

说到这里，设计师们可能觉得字体选择性少，不过先别急着哭！本文以国内优秀中文网站字体应用及我们的实践经验为案例，分享如何只用宋体和微软雅黑这两款中文字体，同样设计出高大上的网页。

一、整站只用1种中文字体

悦读FM是一个汇集阅读、播音、音乐、摄影爱好者分享交流的平台，主要面对的人群是年轻人。这个网站上所有页面的文字，包括Logo的文字、导航、按钮、文章标题、正文等，都采用了微软雅黑字体，它们的区别只是在不同栏目和不同层级采用了不同字号。

在上一篇介绍文字性格的文章中，我们曾描述过微软雅黑给人的感受包括平和、干净、简单、平静、专业等。

在悦读FM网站中，我们能看出这个网站整体设计风格就是干净简单，不论是网页布局还是图片搭配，都看起来清晰明了。这个平台定位是“倾听文字的声音”，用户在这个网站上的行为主要是听，文字则倾向于一种辅助作用。

用户在听的时候，可以时不时看看文字内容，微软雅黑这款字体很好地向用户展现出一种干净感，很符合网站想要传递的安静、清新的意境。

知乎网是一个网络问答社区，整个网站构成以文字为主，社区内的问答通常通过大篇幅的文字进行互动。

这个网站整站采用了宋体，文字标题与字号和正文有明显的区别，这些设计突出了标题，也促进网站整体设计满足最高质、最深度、最有收获的阅读体验。

对字体的感受不那么强烈？那咱们试试把网站字体换成微软雅黑：

一眼看上去，换过字体后的网页好像没有什么大变化，似乎让网站还有了一种科技感。

但假如像下图这样呢？

大段的微软雅黑字体排列略显厚重，如果是在网页上长时间浏览，会让人的眼睛产生不适。相比而言，衬线字体装饰性强，具有易读性，所以宋体更适合知乎网站这种大段文字网站，它们看起来更舒适，并且宋体文字还能让用户注意力集中在文字内容上，更专注于信息而不是字体本身。

AnyForWeb为杜卡迪设计开发的公司网站中，除了图片中的特殊字体，整站中文字体采用了微软雅黑。

与悦读FM网站的清新风格不同，我们能明显感受到这个网站传达另一种感觉：现代化、速度与激情、酷炫，同时还有一种力量感。

我们再试试把网站字体换成宋体：

呃，怎么看都觉得哪里不对！

宋体在这里看起来太轻了，完全不能表达文字阐述的“释放”“动力”“速度”的感觉。而微软雅黑虽然不像某些特殊字体那样传达强烈的速度感，但如果要选择网页中文字体，干脆利落的微软雅黑是一个很好的选择。

二、2款中文字体灵活搭配

如果你觉得只用一款中文字体太单调，还可以灵活搭配两款字体，提升用户的阅读体验。我们以优秀案例说明：

简书是一个让用户专注写作和阅读的平台，它为用户提供了两款字体选择模式：宋体、黑体。

头部的筛选标签文字在两种模式下都是微软雅黑字体，用小字号仍然确保了显示的清晰度。

在黑体模式下，整站就只采用微软雅黑字体，文章详情页的标题以加粗突出展现。这时候我们感受到的就是简洁干净。

为了避免长篇文字带来的厚重感，简书采取自动分段功能，并且正文有固定的字号和行间距，这种排版布局让写作者和阅读者都感到舒适。

在宋体模式下，首页文章标题是加粗宋体，作者名称和文章发布时间的小字也是宋体，下面的阅读和评论部分使用了微软雅黑。

文章详情页的标题使用了楷体，正文内容则是宋体。这种模式下浏览网页，我们可以感受到一种文艺和优雅。

如果只使用宋体，这个页面可能会略显普通，所以不要小看了这一处楷体的应用，这款俊雅字体的应用让整个页面散发出一种书卷气息，可谓是点睛之笔。

而且大家不要忘了，楷体也是系统预装的字体之一，设计时不用顾虑排版问题。

另一个案例是AnyForWeb为汉路律师事务所设计开发的网站。

在看到图之前，我们先想一下：律师行业网站应该给人什么感觉？

传统、专业、公正、官方、权威？没错！而具备这种特征的字体非宋体莫属。我们来看网站展示：

在这个网站中，Logo本身已经传达了传统文化的感觉，如果文字全部采用宋体肯定会让网站显得呆板不生动。所以设计师在导航栏应用了黑体，标题部分则使用了微软雅黑加粗，这样搭配起来，既展现出专业的特征，又让网站显示出一种小小的独特。

经验提炼：

根据网站定位、整体设计风格以及文字性格选择字体。

可以通过加粗、增加字号、文字颜色突出标题。

从这些案例中我们就能知道，在分析了网站定位、用户人群，确定了设计风格后，只用常规的几款字体，我们一样可以设计出高客户满意度的作品。

本文就先介绍到这里，下一期我们为大家分享网页设计最佳实践经验分享之字号篇。