sanxiegang.com

网页中用到的对比原则（二）：字体对比

浏览：93 发表时间：2017-05-08 10:00:33

在上一篇文章当中，小编给大家分享了色彩对比在网页当中的运用，今天小编来给大家分享字体对比的几种常用表现手法。

字体有很强的识别性和可读性，因此字体在整个界面上的设计也相当重要。字体设计得好，可以为整个网站锦上添花。网页中的字体对比体现在：字体大小的对比、字体粗细的对比、字形的对比、字体颜色上的对比、字体动静对比和字体的方向对比。

1、字体的大小对比。

文本是网页中最为重要的设计元素。对于一个网站而言，了解和掌握网页设计中的文字排版设计就显得尤为重要。

在网页当中，字体的大小可以起到一定的识别作用，字体大小的组合方式，这也是网页当中最常用到的对比效果之一。

在通常情况下，网页当中的主标题和重要信息会被做放大处理。假设网页当中经常用14px像素大小的字体，标题类可以大于16px像素，这样的组合方式比较能凸显标题，也可以建立起清楚的视觉层次，让浏览者清晰的知道各个版块的功能特点。

给大家举几个字体大小搭配的例子，字体大小对比在网站当中随处可见，也比较好理解。

在武汉武商集团这个网页当中，新闻区块的标题用了红色放大的字体，起到了概括总结区块的作用，使得网站建立起清晰明了的视觉层次，可以缩短浏览者的阅读时间，方便浏览者在最短的时间内找到相对应的区块。

除此，网页当中除了标题常用到字体对比之外，字体对比在网站的幻灯片中更被广泛的使用。简单用蝉知官网的幻灯片来给大家分析一下：

可以看到幻灯片上的标题跟小字一样大小的时候，这个幻灯片看起来就比较奇怪，找不到主次关系。第二张突出“蝉知，专注企业营销！”这句话的时候，这个幻灯片的主次关系就出来了，视觉层次结构也出来了，这样的幻灯片看起来也会舒服一些。

2、字体的粗细对比

字体的粗细对比跟大小对比一样，运用都比较广泛，两者可以搭配起来一起使用。字体的粗细对比出现的一般情况都是为了突出某一个元素，通常情况下这个元素相比较其他元素会比较重要一些，而把这个元素字体加粗，使得这个元素在其他元素当中形成鲜明的对比，达到浏览网站的人能第一时间先看到这个元素的目的。

Spa矿泉水这个网站的幻灯片用了字体的粗细和大小对比，字体的粗细和大小对比搭配起来使用会比较灵活，也更容易出效果，所以很多设计者在设计幻灯片的时候基本都会这么搭配使用。

3、字形的对比。

这个不难理解，就好比界面上有些地方用黑体，有些地方用宋体，这样两者间可以形成一定的对比。这样的情况大部分还是用在幻灯片上，比如中英文结合形成的对比。

字体对比这块给大家再举一个例子，这个例子就将字体的大小、粗细、颜色等对比很好的融合在一起。

Photler创建摄影网站上幻灯片的字体就是采用了不一样的字体系列，同时也用到了字体大小、字体颜色上的对比。这样的幻灯片醒目、主次结构清晰。

当然小编只是用幻灯片来给大家讲解字体的对比的运用，事实上网页当中还有很多地方也用到了字体的对比，你可以随意打开一个网站，仔细看看。

4、字体颜色上的对比

字体颜色对比顾名思义就是两种或两种以上字体不同颜色形成的对比。字体的颜色搭配可以多种多样，总的原则来说就是设计者有意识的给字体加颜色，使该颜色字体在其他字体当中起到增强或是减弱的作用。

这个网站幻灯片大标题加了绿色和橙色之后，整个界面特别明亮活泼。这样的字体设计可以