2016 Web设计趋势之六：生动的排字_【25号】

生动的排字就是无论从哪个角度看上去，都是杰出的设计。...

按：这篇可能是这一系列文章最不那么web的部分。Typography原意指印刷排字，但自从数码印刷淘汰了铅字印刷以后，这一技术更多的是指排字艺术本身，无论是使用电脑设计软件，还是手工或借助工具。

先解释几个单词：

Letterform 字形是指在字体印刷、书法、古字体和碑文里文字的图案形状。

Type/Font 字型/字体是指字号、字重、样式一定的某种字面（字态），有时也指某一系列风格的字面集合。比如兰亭粗黑，兰亭细黑。

Typeface 字面/字态是指一类有着共同特点的字体的集合。比如方正兰亭。

字体、字号和效果作为一种风格样式正在成为网页界面的主角，排字不仅仅是关于易读性，无论繁简、大小，如今网站文字已经与过去有很大不同了。在这一篇章中，我们将探索如何设计字符效果，流行什么以及为什么流行，还有要小心哪些误区。

什么是生动的排字首先，要明白的是，生动的排字和简单的排字两者之间并非独立。实际上，后者往往是前者的常见形式。要定义什么是生动的、吸引人的排字，我们只能说，那就是无论从哪个方面来看，它都是杰出的设计。

作为一种流行趋势来讲，可以概括一下它的常见表现：

极端尺寸（超大或超小）
叠于图上
对简单字形的创意用法
自定义字型
艺术字体

这些形式常常互相组合出无限的可能。

排字基础排字实际就像它看上去那样，这就解释了为什么我们最近发现，看起来简单的和无趣的排字都同样会吸引注意力。

字体类别是由情感、结构和字体的影响来区分的。最大的分类是衬线字体(Serif)和无衬线字体(Sans Serif)，无衬线字体是简洁化趋势中的“当前最爱”。衬线字体在一定字母线条上有一些附加的装饰线。Sans就是“无”的意思。

字族（type family）是一系列选定字体的简单集合。它们的不同形式包括正常、加粗、斜体、压缩等等。

在排字中，笔画（Stroke）是指每根线条的宽度，在同一字族中使用统一笔画宽度目前相当流行，因为统一的宽度会在不同的设置和对比度中有更好的易读性。

字体的可用性排字背后的驱动力是增加字体的可用性。

有很多字体不用花多少钱，甚至像Google Fonts都不用花钱。在所有的Adobe创意云套餐中，也都包括了Typekit云字体服务。

这种可用性，也使得像Wordpress这种基于设计模板的用户，在成长型网站上有了同样多的选择。而对于字体渲染，现在的浏览器和界面的进步已经让这个问题成为了过去。

另外，套装字体也提供了非常好的选择，你不必只选择主流字体，以下这些字体非常常见：

无衬线字体：

Proxima Nova
Futura
Avenir
Open Sans
Helvetica Neue

衬线字体：

Caslon
Garamond
Freight Text
Minion
FF Meta Serif

下面让我们来看看各种排字的方法。

超大字号一旦你选好了一种字体，字号是首先要考虑的。最新的流行趋势是走极端：超大和超小。

1. 大字符

当与大的头图结合时，大字符能传递有力和确定的信息。

这种形式一般都遵从相同的规则：

大小比例和字重与其它屏幕元素相比都更大
字号超过85点
大写或超粗笔画

我们也注意到这种流行趋势中的另外一些东西。通常情况下，文字都撑满了整个屏幕；文字的颜色通常是白色——为了和图片或鲜亮的背景色形成强烈对比；有时会添加较细的衬线字体来与粗的笔画形成一种动态对比；字的大小也会交替出现，不过仍然是非常大！

这种做法太流行了，所以不妨来点小创意，比如不同的对齐方式。而且当字号很大时，你的信息必然显得很重，所以字母大写不再是必须的。最后，自定义的颜色也能给网站独特的个性。

你可以试着这样做来确定到底该用多大字号——先从随意一个比较大的尺寸开始，然后再慢慢缩小到合适的大小。这种办法会让你挑选出一个比之前猜想的更大的字号。

2. 小字符

就像声音可以既洪亮又温柔一样，一些设计师转而使用超小字符。只要屏幕上的其它元素不干扰影响，小字符也可以获得跟大字符一样的效果。

在大与小的策略背后有一点点不同，小字符常常是黑色，并与相当大的负空间结合在一起，而两者都经常使用粗笔画字体。

小字符能与大头图良好配合，因为对比能创造出情节，而字母占据超小空间也让图片内容有了更佳的欣赏体验。

有时候小字符需要一些额外的装饰才能被注意到，一点对比色或简单的动画就能确保它被发现了，在字符旁边环绕负空间也能起到相同效果。

叠于图上文字与图片本是不同的东西，但将文字叠于图上却能让两者都更有张力。

这种风格的主要考量对象是对比和易读性。文字在图片上的位置会同时影响二者，设计师必须对不同设备上的断点非常敏感。要测试文字的位置，以求其最易读又不遮挡图片的重要部分——比如人脸或产品/品牌的位置。

另一个要注意的是两者在一起不会混淆原意。如果一个体育摄影师把自己的名字叠加在其摄影作品上——一张人物肖像的照片上——这种混淆不言自明。

简单字面的创意用法像其它设计元素一样，尝试不同的文字和排字可能带来意想不到的收获。举例来说，我们刚提到图片上的文字，但是文字里的图片呢：

你不必追随潮流，事实上，发明出自己的创意用法，才是确保杰出的最好方法，只要你的主意靠谱并测试了用户可用性。要记得可读性是终级目标，所以不要做影响原意表达的设计。

自然的创意性的排字本身是有趣的，这也是为什么它最好与一些不起眼的背景相结合，比如上图的单色色块。不要让太多吸引注意力的元素来打乱你的屏幕，这会影响用户的注意力。

自定义字面自定义字面能与创造性的使用简单字型取得一样的效果——偶尔更好——考虑到品牌识别度和字符的长远发展潜力。设计你自己的字型系统是一个确保你与众不同的安全办法。

然而，你会发现，要实现你自己的字型比表面上看起来要难。

首先，关于字体真相是：它必须符合你的品牌个性及网站气氛——要不然有什么意义？接下来，它得非常谨慎的使用，过度使用自定义字型会稀释它的意义。试着，只在标题、价值主张、口号等地方用它，要避免沉重的文本块。最后，记住兼容性：自定义字型必须要在不同设备和浏览器上都能运行。

艺术字体一些字体是专为具体项目而设计的，这种字型的文本块在网页排版中看上去会更像是图案元素而不是文字。对于一些站点来讲，这可能也正是它们想要的。

这种策略在排字中相当典型，在广告海报的排版中也用了几十年。其代价是易读性和降低了信息的重要性。然而，从审美上来看，还是值得的。

作为不错的妥协，你也可以用一种易辨、易读、装饰性的字体来做艺术字体，比如上图Vimeo网站中的这个“Cameo”单词。

尽量避免使用常用的艺术字体，比如单词云或边缘形状被浸蚀这样的创意字体。这种老套的做法会影响你达成目标，而且因为艺术字体有它们自己的缺点，你必须确保这么用真的值得。

结合技术上述技术都不是相互排斥的，如果你知道如何正确的互相结合，就能利用它们的优势取长补短。

结合技术要遵循常识。比如，把图片放到文字里面，就要让文字保持高对比度，否则图片就会将文字淹没掉。

同样，也要考虑哪些技术是不能放在一起的。比如，艺术字体天生就华丽，所以它们最好直截了当地用。不要把图片放到装饰性的衬线字体中。想像一下，一个草写字体的标题里还填有一张模特图片的样子。

Send a Message网站以可行的方法结合了几种技术。它先以小而简单的文字开始，让用户把注意力集中在图片上，在与站点发生交互时，文字信息即网站的关键文字才出现——大字号字符叠加在图片上——这两种策略把用户的注意力从图片上抓回到文字上来。

未来展望排字没那么像是流行趋势，更像是每几年重新使用的一种战略战术。上面描述的技术只是许多设计师正在使用的排版方法的当前迭代状态。

一般来说，好的排字艺术要满足这几点：

传达文字信息
与其它设计策略结合使用
与技术要求相匹配（比如浏览器兼容性和响应式设计）
创造难忘的印象

如今的排字设计都达成了这些目标，但是它们如何适应新时代的设计呢？

几乎可以肯定，设计师们会继续使用夸张的文字，然而，有时他们可能会做得更过头一些。比如，我们可能会看到更多彩色而不是白色的字符，有些设计师可能会在字符设计上选择透明或3D效果。可能不再是超细而是略粗一点点的笔画，字态中也可能包括更多简单和基本的动画，或者是作为一个更大滚屏交互规划的一部分来运作，或者只是作为其它的用户交互元素而存在。