有人说，中文网页的设计其实没有字体设计这一环节，由于在网页中能用到的中文字体特别有限，能用的也只有黑体、宋体、微软雅黑等，这给中文网页的美感提供了折损。相比英文对字体的斟酌，网页上的中文字体显得太随意。

当然，这种说法有一定的正确性，但咋们应该换个角度看。中文的网页中的字体的确是局限在这几款字体中，但不代表中文网页就没有字体设计这一环节。

认识网页设计中的“字”

*先，咋们简单将网页里的文字分为可替换和不可替换两个部分。

可替换的文字也便是能通过后台管理开展编辑的文字，例如博客文章、产品表明等。不可替换的文字是在网页制作过程中所定下的，后台管理并不提供文字的编辑条件，通过网页代码才能修改，例如导航、Banner等。不可替换的文字并不是有效不能修改，只是修改迅速会耗费一定的成本，因此修改的间隔时长，比如导航的修改必须要经过代码，而Banner里的文字的修改也必须要重新设计Banner 图片。

可替换的文字只能使用网页所允许给定的字体，因此中文字体的选择面较窄。但不可替换的文字则可以通过图片等方法呈现，将其制作成透明背景的图片，这时，字体的使用和排版全是灵活的，设计师就会有足够的创作自由度。

下边这样的设计中所使用的字体就经过了一定的设计，字体改换并不十分简单。

这里所谓的与图片的搭配，也是指的这类可以经过设计的文字。

字形的观察

字体*先是一种图形，然后再是可承载信息的文字，因此，当你挑选一款字体来搭配图片的时候，你必须要集中去观察文字的形态特征能否和图片协调。

在挑选字体以前，*先观察图片里的形态特征。假如配图是以插画的方法呈现，那么插画里的风格细节，以及此类风格所表达出的年代感和空间氛围，都提供给你挑选与其所搭配字体的依据。比如英文中的无衬线体通常较为现代，而衬线体较为古典。

下边的页面中的配图经过曲线造型，因此，与此搭配的文字采用了Adelle无衬线体，可以看出字体中的圆弧处置和配图中曲线的流转造型相呼应。

如下设计里的配图全是0散的矩形，因此与此相应采用的字体为graphik，这样的字体的特点也是表现出特别清晰的几何边缘。

以上的字形所提供的形态特征与配图相呼应即是一个能让图文实现好搭配的方法之一，此外，咋们知道一部分特别的风格化字体也能表达出特别的氛围。

例如下图中的机器看上去特别有80年代的机械感，而这种造型也营造一种技术世界里的怀旧感，因此像素文字较适合与此相搭配。

从这几款英文字体的实例图文配中，咋们必须要配以对“形”的观察解构能力。也同时必须要对字体所承载的风格特征作出一定的归类。非但英文必须要精挑细选，中文也必须要认真的斟酌，而不能以期待偶遇一款好看的字体，以好看为目的开展设计，较终结果全是失败之作。

字体还能够经过一定的设计，在原有的字体基础上开展一定的“变形”，这当然就更不能频繁改换。依据主题而开展一定的“微调”，让氛围表达得更加丰满立体。

如将圆圆的字母中空的部分填实增加了可爱感，与配图的角色形象也特别搭配。

字距和行距

观察字形，用你敏锐的设计师的眼光来差异不同字体的特征，这是挑选比较大的字体时必须要具备的能力。因此，特别适合用在*图、Banner等必须要将文字做成图片所呈现的情况下。而咋们的字体还有形成段落开展呈现的时候。这时，形的特征逐渐隐去，咋们越来越多关注字与字之间的关系，即字距。

一般情况下，字距的选择总是依据字体自身以及其和空间的关系来确定，当字距较小时，传递出一种紧凑感，而字距宽松又能表达出一种轻松感。

比如大型呈现字体的距离总是以相互靠近为佳，由于字体自身已经占据了足够的空间，假如再在字体间增加空间就会让整个空间被填满。因此，咋们也可以说，字距依据整个空间开展调整确定。与此同时，配图也是以较为集中感的方法呈现，所有箭头真是“万夫所指”，因此字距缩小，略有集中感。

而相对较小的字体，略带轻松和闲适，与此搭配的图片也是一堆木材，联想到木匠的当然惬意感。

在中文的世界里一样适用，然而不同的是，中文字体的距离应该更加远一点，以保持单个字体的独特呈现度。由于中文的每个单字都可以看成一幅图画，拥有一定的意境，因此，保持字距是中文呈现能保持美感的一个关键。

当字体变为垂直呈现时，更应该拉宽上下字距。这是由于咋们人眼并不熟悉上下顺序的阅读习惯，假如字距较近则简单形成字与字的视觉粘连。

而行距则不同，当你考察行距时，这时字体已经变成了段落，成片出现的字体则是段落，你要关注的就应该是整个段落的灰度值。所谓灰度值便是字体的疏密。

较大的行距和较大的字距一样都能传递出紧凑和轻松的不同之感，同时，行距也关联着字体自身的色彩、字距以及字体大小以及字体较终的形态。英文的行距可以以1.5倍作为标准尺度，然而一切规则全是依靠条件而存在，假如在特别的场合，依然可以选用更大或更小的行距呈现。

这一段落的字体等部署配合了配图中所传递出的儿童的教育成长这一主题，选用较为圆润的字体，字距较宽松，表现出轻松的氛围。字体自身采用和LOGO一样的色彩，比黑色字体更透露出趣味。

后记：

厘清字体的字距所创造的疏密，行距提供段落的灰度几何，配合字体自身的呈现形态，你才能更好的选择与此相称的配图。多清楚字体，对不同风格的字体的形态有大致的清楚，在使用时才不可能手忙脚乱去盲目找寻适合的字体，平时对字形的积累极为重要。记得为自个建立一个字库，才会在图文搭配时得心应手。