[译]The perception of black & white and the effect of contrast

CONTRAST,老生常谈。

原文地址:https://www.fontshop.com/content/perception-of-black-and-white

原文作者:Ferdinand Ulrich


一些设计师与字体设计从业者坚持认为,无论是被字母围绕的空间(字怀)还是围绕着字母的空间都需要在字体排版与设计中值得注重,而事实上这些的确是字体(typeface)设计中最重要的方面之一。因为我们无论在对一个页面的文本进行数字化还是实体化设计时,都需要对其整体的粗细对比有一个清晰地掌控。我们知道字体周围可以搭配在任何颜色上,但在下面的讨论中我们只针对『黑色』和『白色』展开。而这篇文章实质也只是讨论,并不是做任何硬性的定义。

我的同事Yves在他的Adventures in Space系列文章中已经谈过许多关于单词与字母的空白空间的话题了,但总的来说他的文字同样也适用于粗细对比概念的一种侧重点解读。下面让我们把『黑色』作为字母的笔画构成元素,whitespace——或者简单说『白色』作为被笔画包围或者包围着笔画的代用语。这一观点的核心理念在于黑色与白色本是平等的,但在数码设计的过渡过程中渐渐迷失了这一点。现代HTML网页设计顺序问题很明显:当我们开始设计一个页面时候,首先出现的是大量的留白,然后我们会在这些白色上添加上黑色的元素。然而在以前的凸版印刷时代,对于刚开始使用哪种颜色和用多少其实都是尚且未知的(nothing)——至少黑色与白色是被平等地思考并且使用的(在一块很大的金属板上),思维过程与现在很不同。

Reading black and white

『外部形状与字怀形状之间的关系,正如在书写时落下的黑与白的联系,这是字体感知的基础。』这是Gerrit Noordzij老先生在他的畅销书 The stroke (London, 2005) 的第一章所说的话语。他用一种简单的图示来解释这些关系。图中的第一行表示的是,如果你改变了哪个字母的黑色部分,那么其字怀大小也会随之改变。第二行则是在字母搭配上矩形背景后,第三个矩形的外部空间对比第一个矩形其字怀部分能吸引更多的注意力。

mini_magick20160825-2802-lf2klz
Gerrit Noordzij: The stroke. Theory of writing, London 2005, p. 13

在下一幅图中,虽然第一行和第二行的留白空间几乎是相等的,但我们对第二行两个字母中白色的感知有些许分歧(译注:字偶间距),而在第三行中(外部)留白的减少便可以解决这个问题。

mini_magick20160825-2802-jv6ya2
Gerrit Noordzij: The stroke. Theory of writing, London 2005, p. 14

Experiencing black and white

在浅色背景『移动黑色的方块』(Moving black squares)是针对这种黑白关系感知中最早练习的方法之一。我不想直接把包豪斯学校拿出来作为例证,但是如果你看过Johannes Itten的 Design and form (London, 1975) 你会发现其中也有相似的练习方式。在我的第一堂基础课程中我就被教授了这种方法,而且我会在我自己的字体排印课程中继续传授——并且通常是处于所有课程之前的第一个练习:用一组正方形来直观地解释一些形容词,例如轻与重、快与慢、简单与复杂等等。他们可以在给定的网格中规矩的安排正方形的布局,也可以混乱地去无视网格排版。为了制造一些额外的困扰,我会着重使用黑色背景上的白色方块作为搭配,以希望这样的练习可以让学生们对黑色与白色理解有一个新的平等的认知。

mini_magick20160825-2802-1euz7p3
Visual interpretation of the term ’dynamic‘ using 7×7cm squares. Designed by students in my typography class at Burg Giebichenstein University of Art and Design Halle, Germany. (Photograph by Norman Posselt)

Designing black and white

Erik Spiekermann在一次采访中曾透露过:『其实你不必特意去设计黑色的部分,你只需要去设计白色——内部的留白与外部的留白。』这种设计思想你可以在Spiekermann的字体 FF Meta® 中明显的感觉到。如果你细看FF Meta的字母,你会注意到光滑的外边缘与偏方形的字谷之间有一种神奇的张力,以使字体的清晰性与可读性有所提升。bold的字重比正常多出15%,但在小尺寸场景也会给予内部空间足够的余地。

Hermann Zapf在他的报纸用字体Melior® (D. Stempel/Linotype, 1952)运用了与之相反的想法,后来在其第一款数码字体Marconi® (Hell, 1974)时又重新引入这个概念——字母内部曲线虽然是光滑缓和的,但外部是基于超椭圆(基于矩形与原型之间的图形,圆方)理念,这种于外部结构与字怀结构的调和想法在FF District™中得到了极端的展示,它有着几何一般规整的矩形字怀。Roger Excoffon也是把字母中的粗细对比规则逐个颠覆并设计出Antique Olive™ (Fonderie Olive, 1962)的——一种被认为是头重脚轻式(top-heavy)字体。

mini_magick20160825-2802-933bsg
Different counterform concepts from left to right: Erik Spiekermann’s FF Meta, Melior by Hermann Zapf, FF District by Albert Boton and Roger Excoffon’s Antique Olive

Using contrast

当你为一个设计页面考虑字重时,基本所有观察的因素都要考虑进去。人眼喜欢清晰的对比。一些设计师表示的『让灰色色调构成页面』想法其实并不是你真正想要的。一旦你使用了『灰色』,文本的权重便会大大下降。一般字族除了Regular之外,大多数字体设计师还会提供一款带有Book字样的字体,也可能是别的不同名称字体但同样可以显示突出文本,Book字重通常在正常的黑白对比上比regular更粗一点。Mike Abbink的FF Milo® Regular有一个字重叫做Text比regular整体更高一些以增加辨识性。Lukasz Dziedzic的FF Good®可能拥有更好的字重表现,这字体在新闻报道文本方面比较受欢迎。Fred Smeijers的著名字体Arnhem (OurType, 2002) 的粗细对比已经设计的非常棒了,但他还是设计了一款更轻量细化的字体Arnhem Blond

mini_magick20160825-2802-1ck6xlo
Regular weights and their text weight counterparts, from top to bottom: FF Milo Regular and FF Milo Text, FF Good Regular and FF Good News, Arnhem Blond and Arnhem Regular
mini_magick20160825-2802-v6zs2z
Regular weights of typefaces and their text mates in comparison.

FF Transit®是上个世纪90年代由Lucas de Groot在MetaDesign为为柏林运输公司(BVG)以Adrian Frutiger的Frutiger®为基础精炼而成的字体,由于应用场景繁多而修整多次,所以FF Transit®在同一字重下依然会分为几种字形。例如在实体服务场景中FF Transit®为正负反色都做出了不同的调整,当字母为亮色发光时,黑色的背景下光的蔓延会使笔画的宽度视觉上增加,选择FF Transit Back Negative是使之降低干扰。相反黑色字母处于白底时,你则需要FF Transit Back Positive

mini_magick20160825-2802-1a2j858
The various styles of FF Transit Regular from top to bottom: FF Transit Print, Front Positive, Front Negative, Back Positive and Back Negative. The “negative” weights should only be used in reverse, i.e. white on black, but they are displayed as “positives” for better comparison of the stroke weights.

当然这样的字体解放方案成本有些略高,这里说只是作为一个例子来证明:我们看到的Regular并不一定是你想象中的Regular,我们需要去谨慎的选择一款字体放在文本中是否合适。

mini_magick20160825-2802-w91yvf
In-use cases of the various FF Transit weights in the signage system of the Berlin transit authorities BVG. Have a look at this infographic, that explains which purpose each of the weights serve.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s