想提高作品层次感？先学会这12个字体运用技巧！

@喪心病狂十六夜貓 ：本文是对前两篇关于「对比设计」和「字体组合设计」这两篇文章的总结，整理建议同学们读完前两篇文章之后，再来看这篇，对于设计中层次感的把握会更进一步。

对比设计篇：《实例教学！利用「对比原则」做出抢眼设计的20个方法》

字体组合设计篇：《实例教学！10个帮你运用好字体组合的设计原则》

实例教学系列：

1. 《实例教学！12种透明背景的万能设计方法》
2. 《实例教学！设计网页时选择配色的八个要点》
3. 《实例教学！10个用好模糊效果的超实用设计技巧》

字体视觉上的层次感（英: Visual Hierarchy），究竟意味着什么呢？

因为对设计项目有着致命的影响，所以我们需要好好的研究讨论。当你这样做了，我们可以让用户很方便的了解到你所想要引起注意的要点，让说明变得通俗易懂。

在没有利用阶层的情况下，文字、单词或文章看上去都差不多，用户想要获取对他有用的信息是非常困难的。

那么接下来，我将会为大家介绍，如何使用文字的阶层效果，来让用户方便的获取到他所需要的信息，制作出充满魅力的网站。

详细从以下开始。

文字是设计素材的一部分，有意识的思考特定的构造组合是有必要的。首先，文字有着什么样的意思，我们需要仔细思考运用是否得当。

大小

这是最能将设计要素强调的技术。人的视线自然会被那些大的东西所吸引，文字如果使用大尺寸的字体，用户自然就会去阅读那些内容了。

缩小字体，让他与其他字体不同，仔细调整是很有必要的。在你使字体变大或者变小的时候，他并不会完全按照我们的预期变化，你需要时刻保持着细心。（例如你在使用装饰性的字体的时候）

字体大小没有统一感，会有种非常业余的感觉，也会让文字变得难以阅读，尺寸的调整也会变得不可能。下面这个样本使用了Open Sans这个字体，这样优雅的字体用在标题这里是再合适不过的了。【Open Sans是一个由Google委托Steve Matteson设计的无衬线字体。根据Google的说法，它是以“诚实的重要性、开放的表现形式、及一个中立但具亲和力的外观”的理念设计的，并且“针对打印、互联网、行动设备的可读性所最优化。” 】

在调整字体大小的时候，你需要验证这个大小是否合适。首先从正文而不是标题开始，先确定他们的主字体。将字体的特点引发出来，让用户看到有魅力的效果。

调整字体大小需要注意的几点

正文用的字体大小，最好在14pt以上。（19px）

标题大小，最好控制在35pt以下。（约为正文的250%）

小标题的大小，最好控制在25pt以下。（约为正文的175%）

导航菜单的大小，最好控制在23pt以下（约为正文的165%）

导航菜单上的字符大小，最好控制在20pt以下（约为正文的140%）

重量

文字的重量，就是指文字的厚度，以及该留出多少空白空间的意思。明显和尺寸的重要性不同，特别是采用了独特的字体时，可以更加突出一些重要内容。

一旦你决定了文字的尺寸和重量，接下来就让我们想想该使用什么字体吧。粗体和细体一起使用，可以很好的表现出层次感。为了传达出文字的重要性，有一个非常著名的设计方法，就算是小屏幕画面状态下也能将文字表现出来的技术。

斜体

斜体也是非常有效的强调手段，有时也比粗体更容易引人注意。因为视觉差异比较小，对特别的字体是十分有效的。

小写还是大写？

所有的文字都使用大写，有人会这样主张这样可以起到令人震惊的效果，对于网页设计来说也是同样的。在项目中使用大写，就可以增强层次感，可以防止字号小的文字与背景互相混合在一起。

配色

文字的重量也依赖颜色，让我们来制作一个易于使用的配色方案吧。因此我们需要学习一些美术的基本原理，例如冷色与暖色的不同，流行色与自然色等，学习一些配色的基本原则是非常重要的。

将配色应用到文字上时，也需要注意他的层次感。使用明亮鲜艳的颜色，则表明他比其他的元素都重要，你需要知道一些颜色和对比相关的一些知识。

对比

如同字面意思一样，对比能在配色、重量、尺寸等各种各样的地方使用。正文与标题的对比，可以说是最常见的技术了。

留白

在文章的段落和文字之间留下空白的空间，可以很好的提高阅读效果。但因为有需要调整字符宽度，所以使用时需要小心。

首先第一个需要考虑的便是行距，不同的尺寸与颜色，我们需要选择合适的风格。

使用了留白之后，因为也会影响到阶层的顺序，如果是使用了风格相似的字体，留白能稍稍降低他们之间的关联性，创造出让人耳目一新的效果。但是，如果有想让人注意的部分与别的文字做比较，你需要仔细的调整他们之间的平衡性。

方向

方向（英: Orientation），就是指在布局中文字的表现形式。虽然看起来是显而易见的事，但在层次表现上却是一个重要的过程。在大多数情况下字母与数字，在屏幕上以水平直线放置，这样会整洁易读。

如果文字垂直放置，不仅会成为重要的设计要素，所有的视线也都会被集中在上面。尽管这种技术能扭转你的设计，但作为设计师，你还是需要充分理解自己的设计意图后再去使用。

质感、纹理

文字的纹理质感，是需要花费大量时间来掌握的一种技术。这种难，并不是指字体自身的质感，而是指在页面上所有文字的样式。使用合适的纹理，变化设计的元素，打破原有的设计规律吧。明确意图或概念，让你的设计不会矫枉过正。

层级

不管是怎样复杂的项目，都可以利用文字来分成三层，将网站上重要的部分完整的区分出来。这里的利用的阶层分为：主层（英: Primary）、副层（英： Secondary）、三层（英: Tertiary）。

主层（英: Primary）上的文字，是页面上最突出的元素。一般会使用大尺寸和鲜艳的颜色来使用，表现出与其他文字不同的魅力。但是，因为文字对层级的影响过多，使用会有限制，例如只在标题中使用。

副层（英： Secondary）上的文字，并没有主层那样的影响力，却能很好的让用户的注意力转向正文的内容。利用配色、尺寸、留白等这些不同的要点，区分主次，可以用在小标题，导语和摘录上。

三层（英: Tertiary）上的文字，是利用在主要内容上的，没有什么特点的要素。在这里使用的字体并不需要多么的引人注意，可以选择一些简单的，没有什么浮夸的效果的字体。不要干扰到主要内容，从而让用户的视线转移到别的地方。

最后

在网页设计中，尤其是需要展现很多内容的时候，所有的要素对于用户的视觉体验是非常重要的。这次介绍的利用字体使你的网页变得更加有层次感的技术就到这里了，希望大家好好使用它们，做出更棒的作品吧。谢谢大家~一起感受设计的乐趣吧。

欢迎大家关注我的微信~

「技多不压身的设计师才有高薪资！」

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：photoshopvip

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量150万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com