排版优化八大技巧：8分钟提升网站美观度与可读性

排版并非只是单纯地挑选字体，也不是仅仅去判定标题以及正文所采用的尺寸。它能够被视作自成一家的科学类别分支。它不单单只是科学范畴，它是属于科学跟艺术相互融合的一种存在。

可是，对于这个议题，我并不打算在这篇博文中展开探讨。的确，去打造美观且独具创意的版式，是要耗费诸多时间以及精力的，然而，要是您没有充裕时间呢？要是您期望在短短几分钟内迅速优化网站的排版情况该如何是好呢？

当下，心里想着要向着您去呈现，怎么样能够于不到八分钟的这段时间以内，借助八个微技巧达成，使得您的排版变得杰出，好了，赶紧就开始吧！

1. 在深色背景上减轻字体粗细如何提高美观性和可读性

紧挨着的这段时间之内，设计这个行业领域当中流行着两种比较特别的东西，分别是可以切换色调的深色模式，和能够进行多种变化的可变字体。但是呢，数量占比多数的网站在增添可以切换色调的深色模式的时候，都会犯下这样一个错误。他们依然维持以往的一种状态，把字体的粗细程度保持在不变的情形之下。要是标题在那种色调比较浅的模式里被设置成了粗体样式，那么等到用户将其切换到那种色调比较深的模式之时，标题将会具备相同的粗细程度。

这存在着一个问题，深色背景之上的浅色文本看上去显得更为厚重，它呈现出未经修饰的样子，甚至是会对文本的可读性产生影响，就如同图1里左侧的示例那般。我的提议是思索采用可变字体，并且在深色模式下调节字体的粗细程度，把它降低50。所以，要是在浅色模式下将字体设定为粗体，粗体等同于700，那就把它降低到650，如同图1中的右侧示例那样。此刻，您的文本看上去更为精致，而且阅读起来更加容易，这也就意味着它更便于阅读。

2. 为什么降低标题的行高可以显着改善其外观

以下是标题存在的问题，它们一般都很短，通常是一行文字，有时是两行，在极端情形下会分成三行，不过也就如此。建议正文行距设置为140%左右，这样段落才完整，而当同样情况用于标题时，看上去线条好像在逐渐分离，仿佛它们不应在一起，比如图2中左侧的示例。把标题行距降低到110%至120%之间，标题会显得更紧凑、更内聚且更优美，如同图2中右侧的示例。

3.如何使用开放式功能让你的字体看起来更原创

开放性的功能，其受欢迎程度是越来越高了。这是很棒很棒的事情呀，因为这同样意味着，能够支持它们的字体数量，也是越来越多的啦。我个人最为喜欢的风格当中，有一种风格是交替的那种风格哟。对于设计字体的那些字体设计师而言呢，是能够让您有着可以选择去使用替代符号这样的权利哒。最为常见的，乃是字母“a”、字母“g”还有字母“t”的替代设计呢。

不要运用该字体，鉴于它是开箱即用的那种。对是否存在能够运用的开放式设置予以检查，以便让其看上去更具原始的样子。下面，我于左侧使用开箱即用的中本聪（图 3），在右侧采用风格替代。

4. 不要害怕使用大写字母，但是当你使用字母空格时

所有人都清楚，以大写字母书写的单词不易阅读。因而好像每个人都彻底不再使用它了。少量运用大写字母是可行的。它有助于区分内容或UI的不同部分。这是一种不借助粗体或斜体来突出某些内容的很棒的方式。

往下，我会以大写字母去表示文章的类别（看下那图4）。请一定记着注重左边不存在字母间隔的示例跟右边存在字母间隔的示例二者之间的差异之处。字母间距设置成大写单词，这对提升可读性是有帮助的，并且还能让您所做那设计在外观看上去显得更精致些。我给出的建议是字母间距最大设置为5%。一直都是这样，始终要把字母做空格大写处理。

5.利用旧式图形的微妙之处，让你的文字不受干扰，更容易阅读

假如果然字符显得太过突出，那么哪怕是经验最为丰富的设计师，也会拒绝在正文中运用字体。我来给你讲个例子，曾经我拿定主意不采用某种字体，原因便在于小写字母“g”有着一个不同寻常、十分奇怪的下降部分，也就是字母的底部位置。它实在是太能够吸引目光了，让人不由自主就会留意到它，它会使得注意力分散开来。你肯定不希望这样。你期望自己的读者能够完全被内容深深吸引住。

这同样适用于文本里的数字，当把它们设置成衬线图形时（这通常是字体中的默认样式），它们会显得过于突出（就像图5中的左侧示例那样），当读者一行行地阅读文字时，他们会不由自主地留意到这些数字，然后就会分心，进而使得阅读变得愈发困难。

替代方案是小写字母的旧式数字，它们和小写文本搭配得不错，且不会显得突出，很少有网站及应用程序能处理这种印刷细节，所以要是您这么做，您的网站在排版方面会得到改进，会因其微妙之处而脱颖而出，是只有打字极客才会注意到的微妙之处，不过您的读者会在毫无察觉中欣赏到 。

6. 使用小型大写字母使首字母缩略词与文本相符

这跟上面第五条提示是一样的，只是适用于字母，或者更确切地讲，适用于缩写词，让我们来试试看，我会给CIA写信以证明我的看法，我百分之百确定，当您开始读这段的时候，您在某个时刻留意到了“CIA”，也许您没注意到它，不过您的眼睛肯定会在几分之一秒内移到它上面。

这会儿还太早了些，要是这部分全是这类缩写词，那就会致使让人分心，你的眼睛会不由自主地留意到它们且被其吸引住，所以，你正在读的那段文本就变得更不容易阅读了，要是你的字体能支持它们，那就采用小型大写字母去消除文本里的干扰并让其更便于阅读 。

图6中，我于下方使用Meta Serif Pro，左侧示例里不存在小型大写字母，右侧示例当中启用了小型大写字母， 。

如有额外提示：别用“假小号大写字母！” 要是字体不支持小型大写字母，然而您却强行启用它们，那就会使用假小型大写字母。假的小型大写字母仅仅是调整了大写字母的大小，跟文本的其余部分相比较，看上去太浅了。这比单纯使用普通大写字母还要糟糕。

使用连字来提高文本的美观性和可读性

8. 将图标与标签的行高对齐

这个错误我是经常看到的。设计者常常会去试着把图标底部和标签的基线进行对齐，（就是图8里左侧的那个示例）。所有内容在排版之中想这样对齐，是这般吗，对不对呀？你所使用的网格就是基线。不，并非如此。当说到将图标跟文本对齐这件事的时候，最好是让图标的高度跟文本的行高相匹配然后对齐，（像图8中的右侧示例那样）。要是做得准确无误，图标的垂直中心应当与大写“X”的中间实现完美对齐。 }。

继续浏览有关 排版优化网站美观度 的文章