网页设计中字体和文字搭配的技巧

本文格式为Word版，下载可任意编辑——网页设计中字体和文字搭配的技巧网页设计中字体和文字搭配的技巧

字体是网站最根本也是最重要的一个元素，选择一个群众化的字体，符合视觉美观的大小，设置恰到好处的颜色其实是一个不能忽略的网站优化要点，下面我就为大家介绍网页设计中字体和文字搭配的技巧，来看看吧，就跟随我一起去了解下吧，想了解更多相关信息请持续关注我们我!

上网在线阅读，是大多人获取信息的重要途径。用户会在网上阅读到大量的新闻及各类文章，更加是网络小说，这些页面表示的主体就是通篇大段的文字。对于这种看似简朴的文字堆砌的页面，有没有人怨恨过："这样的页面还需要出效果图啊?'作为网页设计师的你是怎样处理这样的界面的?

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

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

熟悉网页设计中的"字'

首先，我们简朴将网页里的文字分为可替换和不成替换两个片面。

可替换的文字也就是能通过后台管理举行编辑的文字，例如博客文章、产品说明等。不成替换的文字是在网页制作过程中所定下的，后台管理并不供给文字的编辑条件，通过网页代码才能修改，例如导航、Banner等。不成替换的文字并非完全不能修改，只是修改一次会花费确定的本金，因此修改的间隔时长，譬如导航的修改需要经过代码，而Banner里的文字的修改也需要重新设计Banner图片。

可替换的文字只能使用网页所允许给定的字体，因此中文字体的选择面较窄。但不成替换的文字那么可以通过图片等方式表示，将其制作成通明背景的`图片，这时，字体的使用和排版都是生动的，设计师就会有足够的创作自由度。

下面这个设计中所使用的字体就经过了确定的设计，字体更换并不特别轻易。

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

字形的查看

字体首先是一种图形，然后再是可承载信息的文字，因此，当你挑拣一款字体来搭配图片的时候，你需要集中去查看文字的形态特征是否和图片协调。

在挑拣字体之前，首先查看图片里的形态特征。假设配图是以插画的方式呈现，那么插画里的风格细节，以及此类风格所表达出的年头感和空间空气，都供给给你挑拣与其所搭配字体的依据。譬如英文中的无衬线体通常较为现代，而衬线体较为古典。

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

如下设计里的配图都是零散的矩形，因此与此相应采用的字体为graphik，这个字体的特点也是表现出分外明显的几何边缘。

以上的字形所带来的形态特征与配图相响应即是一个能让图文实现完备搭配的方式之一，此外，我们知道一些特殊的风格化字体也能表达出更加的空气。

网页设计中字体和文字搭配的技巧

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

从这几款英文字体的实例图文配中，我们需要配以对"形'的查看解构才能。也同时需要对字体所承载的风格特征作出确定的归类。非但英文需要精挑细选，中文也需要专心的斟酌，而不能以期望偶遇一款好看的字体，以好看为目的举行设计，最终结果都是失败之作。

字体还可以经过确定的设计，在原有的字体根基上举行确定的"变形'，这当然就更不能频繁更换。根据主题而举行确定的"微调'，让空气表达得更加充实立体。

如将圆圆的字母中空的片面填实增加了心爱感，与配图的角色形象也分外搭配。

字距和行距

查看字形，用你敏锐的设计师的眼光来识别不同字体的特征，这是挑拣对比大的字体时需要具备的才能。因此，分外适合用在首图、Banner等需要将文字做成图片所表示的处境下。而我们的字体还有形成段落举行表示的时候。这时，形的特征逐步隐去，我们更多关注字与字之间的关系，即字距。

一般处境下，字距的选择总是根据字体本身以及其和空间的关系来抉择，当字距较小时，传递出一种紧凑感，而字距宽松又能表达出一种轻松感。

譬如大型表示字体的距离总是以相互靠近为佳，由于字体本身已经占据了足够的空间，假设再在字体间增加空间就会让整个空间被填满。因此，我们也可以说，字距根据整个空间举行调整确定。与此同时，配图也是以较为集中感的方式表示，全体箭头真是"万夫所指'，因此字距缩小，略有集中感。

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

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

当字体变为垂直表示时，更理应拉宽上下字距。这是由于我们人眼并不熟谙上下依次的阅读习惯，假设字距较近那么轻易形成字与字的视觉粘连。

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

较大的行距和较大的字距一样都能传递出紧凑和轻松的不同之感，同时，行距也关联着字体本身的色调、字距以及字体大小以及字体最终的形态。英文的行距可以以1.5倍作为标准尺度，然而一切规矩都是依靠