中文字体在网页设计中的排版

张婧雯

【摘要】在网页设计中，字体的存在并不是仅仅在传达文本本身含义的简单符号。它就像平面构成中的点、线、面一样，是构成网页设计的最基本的元素。所以，文字的应用也是一种艺术，需要我们的设计和调整，漂亮的文字排版也会成为我们网页设计作品中的最吸引人的亮点。

【关键词】中文字体；网页设计；排版

在科技信息高速发展的今天，新鲜的事物不断进入人们的眼球，我们对生活的追求也不仅限于实用。所以，总是需要一些应运而生的新事物让我们的生活变得更加美好，是更快的网速，更简洁美观的设计，更智能的电脑，更美妙的歌曲……从来没有人满足于当前自己的生活现状，总要有新的事物不断带给你一些更好的体验，例如网页设计中更漂亮的中文字体的应用。

每位设计师在进行创作的过程中都会面对一个问题——那就是字体排版。同一份设计作品，如果把作品里的英文字体换成中文，会对设计作品本身产生很大的影响，而且想要表达的效果也会大不如前，那么问题出在哪里呢？

除了设计师自身缺少对文字驾驭的能力，更重要的问题是缺乏对中文字体的了解。为了排出更漂亮的中文字体版式，下面我将带大家去了解中文字体。

在网页设计中，字体的存在并不是仅仅在传达文本本身含义的简单符号。它就像平面构成中的点、线、面一样，是构成网页设计的最基本的元素。

当中文字体作为一个点存在的时候，它不同于英文字体的简洁。每个中文字体单独来看都能显示出足够的视觉效果，值得人们细细品味。

但是，当中文字体排成一行，作为一个线的元素运用到网页设计中的时候，和英文字体比较起来，效果就会差的很多，缺少整体性。中文字体的字间距太宽，显得文字的笔画紧凑，加上每个字的个性又十分突出，会显得留白很大，不够匀称。之所以会出现这样的状况是因为中文字体欠缺了一个重要的设计概念：x-height。

x-height的意思就指的英文字母的最小高度。在英文字体的设计中，一个字体的高度体包含三部份，以基准线为中央，以上称之为上部，基准线内称之为x的高度，基准线以下称之为下部。所有英文字母的视觉着重点都位于这一核心地带中，英文排版之所以能整齐匀称，就是因为它的核心x-height。拥有了核心地带就能很容易的引导用户的视线流动。

正因为缺少这个元素，在中文字体排列成的行构成了面的时候。行与行重复排列也是构成设计节奏的一个重要原因。由于行的不匀称，大面积的中文字体构成的面会显得比较刻板。而且笔画繁多占据了大量空间，控制不好会比较压抑。而英文字体由于上部、下部的存在，在黑色和留白之外增加了一个灰度的层次，在排版中显示为黑白灰三个渐变色，页面显示的效果也更为舒适。

所以，文字在网页设计中的应用是一门艺术，一个合格的设计师不应该把这个任务完全交给电脑，我们应该通过自己对字体的了解去调整它的细节，弥补其中的不足。

一、对常见的中文字体进行分析

想要在网页设计中排出好看的字体，首先我们要了解一些常见中文字体，例如：

宋体：宋体是在发明印刷术以后的明代出现的字体。最初是在印刷临安书棚本时，将原有的毛笔字的笔划加以直线化，使原来看上去柔和的字体变得更加硬朗。在1553年，刊刻的《墨子》中宋体已经基本成型。在明朝后期随着万历年间刊本印刷数量的上涨，促进了书籍制作的分工化。

黑体：黑体又被称为方体或等线体，黑体与宋体不同没有衬线的装饰，字形庄重，笔画横平竖直，笔迹粗细全部一样。汉字的黑体是在西方的现代印刷术流传到中国以后依据西文的无衬线体所改变创造的。

微软雅黑：微软雅黑顾名思义，它是国北大方正电子有限公司受美国微软公司的委托而设计的一款能全面支持ClearType技术的字体。负责字体Hinting工作的是Monotype公司。它属于OpenType类型，文件名是MSYH.TTF，字体本身的设计上更近似于黑体，也是一种无衬线的字体。

以上介绍的这些字体都是我们在设计工作中常见的字体。其中，老式的字体，如：

宋体，是有衬线的，反映出传统字体的设计特征。线条的粗细往往也特别明显，这是早期篆刻文字时，凿子类工具所留下的特有的痕迹。而且宋体的字形方正，笔画粗细均匀，既有硬笔书法的横平竖直，也有毛笔字的棱角分明，结构合理，整齐均匀，有极强的规律性，从而使人在阅读时有一种舒适亲切的感觉。所以，在网页设计中，宋体更加适合于一些比较偏女性化的网站，或者一些有古风古韵的网站。宋体，在众多字体中最为柔和，更加能表现出网站所要表现的情怀。

还有处于老式字体到新式字体过渡时期的，如：

黑体：在中文字体中中，称为黑体的字体往往是没有衬线的字体，这个词的包含的字体和无衬线字体是类似的。所以，在西方中通常称这种字体为“无衬线字体”。黑体的字型厚重，所以更适用于标题或着需要引起注意的醒目标语或批注，因为笔画过于粗壮，所以不适用于网页设计中的正文部分。

而微软雅黑，也是无衬线黑体的一种，只是不同于传统黑体，它的字形圆滑，笔画纤细舒展，阅读起来更容易。这款字体的优雅的外形着实给人留下了十分深刻的印象。在大小为12px或14px的系统默认大小的情况下，微软雅黑的显示也会十分清楚，中英文的搭配使用也非常的和谐。相对于老式的宋体，微软雅黑的字形不是方方正正的，而是略微扁宽，字间距更小，这样的处理使得系统默认的行间距更为更加工整；同时微软雅黑的核心更为饱满，在同样的字号下，微软雅黑的单字面积就显得更大，更容易识别，用户阅读起来也更舒服。所以，它的应用范围更加广泛。

二、在实际应用中遇到的一些问题

在了解了中文字体的各种细节之后，在实际应用中也会遇到很多的问题。随着各种设计软件的出现，电脑会自动决定文字的间距和每行的长度。但是有经验的设计师会给正文和标题专门设计间距，包括每个字前后的留白。关于行的长度，一个合适的长度要适应人们的阅读习惯，不宜过长，控制在39到45个字符之间为宜。

（1）案例一

在对带标题的多行文字进行排版时，在系统默认的状态下，中文字体的排版会显得行与行之间的间距太近，使得构图不够饱满，给人一种小气的感觉。所以我们要对文字进行调整，增加行间距，选用更细的字体，调整标题的字体大小。这种文字排列方式的运用使整体显得不过于呆板，而且主次分明（详情参见图1、图2）。

（2）案例2

在网页设计的过程中使用的字体太过单一会使页面变得没有层次感和阅读的着重点。所以，我们更习惯使用混合字体。混合字体就是指一些有联系的字体可以避免视觉上的错乱，同时又能找的着重点。这些字体及不相同，又能相互协调，形成统一，适当留白设计可以在视觉效果上突出重点，让设计作品更有层次感。（详情参见图3、图4）。

综上所述，中文字体的应用在网页设计中占有很重要的位置。在我们看来，优秀的排版一定要有比较好的可读性，文字和内容在阅读效果上是统一和连贯的，并且有适当的留白，这样可以增加整体的空间感和层次感。布局、内容摆放和板块设计都会对文字的可读性产生影响。网页设计中的文字排版必须要实现促进视觉展示的效果，增加设计的可读性。在设计师的眼中文字是会说话的图形，我们要在设计中强调它的美学效应，好的文字排版能以更富創造力的形式表达出更有层次感的设计思想，能够克服内容的的枯燥与平淡，从而更容易打动用户。

【参考文献】

[1] [美]Laura Franz（劳拉·弗朗茨）. 字体之美：从传统印刷到Web排版[M]. 石 岩， 吴 宁， 译. 北京： 电子工业出版社， 2015.

[2] [美]阿历克斯·伍·怀特. 字体设计基础[M]. 徐 玲， 尚 娜， 译. 上海： 上海人美， 2013.

[3] 苏 克. 新概念字体基础&应用[M]. 陕西： 太白文艺出版社， 2015.