网页设计对字体设计和布局

我们在经常浏览各种网站的时候会发现，我们所接触到的中文网站上目前使用的字体基本分为两类：宋体、微软雅黑。当然还有很少量的网站会使用黑体文字或其他特殊字体。这类网站大多具有鲜明的个性或是为了做局部的突出效果，这里暂不做讨论。

我们知道在Windows普及之前，中文网站上字体几乎清一色的实用宋体。除了中文字符文件大的局限，还有下面几个原因：

• 中国人长期阅读纸质书本和杂志，大量宋体文字培养了一种固定的阅读习惯。
• Windows操作系统本身自带字体有限，如果没有指定字体，操作系统默认使用宋体渲染。
• 近几年国内Mac使用人群在增长，不同系统、不同版本预装的字体几乎没有交集。即使是有限的常用字体，比如宋体、仿宋、楷体，在Windows和OS X展示也有一些视觉差异，而为了尽可能减少这些差异，大家一般会选择“安全字体”，比如宋体、黑体。

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

在专业的网页设计里，除了Banner图、广告语等特殊情况可能会用到特殊字体，网页中使用的字体以不超过2种为准，并且最好采用标准字体，比如中文的宋体、微软雅黑，英文的Arial、Verdana。只有使用这些系统自带的字体，才能让前端开发人员在排版时高程度地还原设计稿的文字效果。说到这里，网页设计师们可能觉得字体选择性少，不过先别着急，我们以国内优秀中文网站字体应用及我们的实践经验为案例，分享如何只用宋体和微软雅黑这两款中文字体，同样设计出高大上的网页。

整站只用一种字体

悦读FM是一个汇集阅读、播音、音乐、摄影爱好者分享交流的平台，主要面对的人群是年轻人。这个网站上所有页面的文字，包括Logo的文字、导航、按钮、文章标题、正文等，都采用了微软雅黑字体，它们的区别只是在不同栏目和不同层级采用了不同字号。在悦读FM网站中，我们能看出这个网站整体设计风格就是干净简单，不论是网页布局还是图片搭配，都看起来清晰明了。这个平台定位是“倾听文字的声音”，用户在这个网站上的行为主要是听，文字则倾向于一种辅助作用。用户在听的时候，可以时不时看看文字内容，微软雅黑这款字体很好地向用户展现出一种干净感，很符合网站想要传递的安静、清新的意境。

知乎是大家比较熟悉的一个网络问答社区，整个网站构成以文字为主，社区内的问答通常通过大篇幅的文字进行互动。这个网站整站采用了宋体，文字标题与字号和正文有明显的区别，这些设计突出了标题，也促进网站整体设计满足高质、最深度、最有收获的阅读体验。如果我们试试把网站字体换成微软雅黑，一眼看上去，换过字体后的网页好像没有什么大变化，但假如像下图这样呢?

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

两款中文字体混合使用

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

简书是一个让用户专注写作和阅读的平台，它为用户提供了两款字体选择模式：宋体、黑体。头部的筛选标签文字在两种模式下都是微软雅黑字体，用小字号仍然确保了显示的清晰度。

在黑体模式下，整站就只采用微软雅黑字体，文章详情页的标题以加粗突出展现。这时候我们感受到的就是简洁干净。为了避免长篇文字带来的厚重感，简书采取自动分段功能，并且正文有固定的字号和行间距，这种排版布局让写作者和阅读者都感到舒适。

我们再来看看汉路律师事务所设计开发的网站。律师这个行业，传统、专业、公正、官方、权威?具备这种特征的字体非宋体莫属。

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

超实用的文本处理技巧

超实用的文本处理技巧当下社会的快餐文化，直接的使得我们的各种习惯随之改变，人们越来越不愿将时间花在长时间阅读上，我们永远不要做逆势而为之的事情，用户习惯读图，那么一定是读图比读字更符合他们自身的使用习惯，我们要做的，不是强行没收对方读图的权利，更不是将过多的精力花费在如何将文字从众多图片中脱颖而出。而是考虑如何使图片准确的传达出我们希望表达的意思。

以下根据本文中提供一些方法。经过如下方式处理的文字，会比普通文字更易被重视。

方法一：

最吸引人的，排在第一位的，永远是颜色，通过放大字号，其实就是放大了整体文本的色块面积，来与较弱色彩进行区分，来达到吸引眼球的目的。但只通过简单的字体放大，会给人造成内容粗糙的弊端。因此建议放大后的文本，选择带有衬线的字体，来弥补文字形式上的粗糙感。可参见下图。

通过复杂字体的笔画，一来可以解决视觉上内容粗糙的问题;二来，由于较为复杂的笔画，其实又无形中增加了颜色的面积。

方法二：

通过调整字体的颜色，从而使原本单调的单色，变成醒目的多色文本。但如果色彩搭配杂乱无章，除了增加阅读难度外，也会给阅读者造成文字内容粗糙的感觉。因此，建议参考下图。

通过颜色的有序渐变和将文字内容进行刻意的色彩区分，这样两种方式可以摆脱原有杂乱色彩带来的廉价感。另外将原有杂乱的点状色彩，变为面积更大的面状色彩，无形中同样加大了色彩的可视比例，从而起到吸引视觉的目的。

方法三：

将文字反白处理，将色彩面积增大。也可使用下图方式。

在以上的举例中，其实是在反复论证色彩的重要性，通过最简单的方式增加色彩的面积，从而起到专注视觉的目的。但是需要注意的是，并不是颜色越多越亮就越好，错误的色彩搭配有时候会适得其反的使文字信息变得失去阅读者的信任。下面继续举例。

方法四：

在同等色彩与字体字号的情况下，人最容易注意到的，就是文本中的数字与英文，因为在人的阅读习惯中，数字与英文是作为图形去理解。因此通过阅读文本的内容，我们可以将文本中的某些信息，通过符号化的方式去表达，从而吸引人的注意力。

但是如果遇到了文本中的信息实在不好找到符号化处理怎么办呢?那么可以参考下面的处理方式。

看到了吗?其实我们可以通过人为增加符号的方式，使得整段文字更加吸引人!另外，其实标点符号我们也是作为符号来理解的哦!同理采用这样编辑方式的还可以在文字中间加入一些较萌的QQ表情，效果也会差不多!

方法五：

事实证明，人们除了在吃药的时候会刻意的阅读说明书外，其余的时候是不会阅读长篇大论的文字，因此当文本信息过多时，需要充分的考虑阅读者的习惯，我们能做的，是通过工整的版式，让阅读者在阅读前就充分的知道这段文字阅读起来很容易，而不会出现串行等情况。只有他愿意读，他才会读下去。

接下来继续完善。

看到了没，虽然从整体上增加了文本的尺寸，但是从断句和行距上，更加切合阅读者的阅读习惯。这就好比让一个人一次步行10公里，和分5次来步行10公里的区别。而且放大了的文本，更加的增加了色彩的面积。

方法六：

再给大家一个最简单，但是却是最有效的方式。

没错，那就是调换文字与图片之间的位置，事实证明，文字摆放在图片下方，会比放在图片上更加让人愿意阅读。其实以上的举例，只是在证明我始终在做一件事，那就是尽量将文字图片化的处理，让文字给人的第一感觉更像是颜色或符号，从而消除观看者阅读前的心理障碍。

文章标题：网页设计对字体设计和布局
分享地址：/news13/163913.html

成都网站建设公司_创新互联，为您提供软件开发、App设计、品牌网站设计、微信公众号、微信小程序、网站收录

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联