西文字形结构虽然远比汉字简单,但正是因为简单,反而设计时使其达到协调却变得复杂,牵一发而动全身。轻易改变一个西文字形却不影响 其辨识度是极其困难的,因此品牌标准字基本都是在已经有的辨识度高的字形基础上进行调整设计的。
视错觉与视觉平衡
不同的字形因为笔画与结构的不同,字面所占据的体积与形状就产生了差异。字与字之间若要统一调性、消除差异,就必须进行视觉上的调整,以消除视错觉的影响。
视错觉就是当人观察物体时,大脑会形成一些错误的判断和感知,是观察者在客观因素干扰下或者自身的心理因素支配下,对图形产生的与实际不相符的判断。
下图左侧图中,圆形外侧的负空间很多,而方形则充满了空间,因此圆形看起来相对小很多。右侧图中,将大小一致的蓝色横竖线进行对比可以发现,横线更具扩张感,因此看起来更粗。所以在字形设计中,表达横竖线均衡,一般会将横线相应调整得略细。
当 E 与 H 调整成等宽后,可以明显看出 E 看起来更宽,这是因为我们的阅读顺序和字母排列都是横向的,因此对横笔形成了线的引导性,最终导致了横向线条更长的视错觉。F、L、E 这种单侧开放的字母就会引发这种视错觉;而像 Z、T 这种字母虽然有横笔向侧边延展,但是两侧都有,所以形成了平衡和互相抵消的效果,因此不需要进行相关调整。
以字体Helvetica Neue 为例,下面的黑字是把每个字母的字宽机械地调整为等宽,我们会明显看到 E 看上去很宽,C、A、M、W 则看上去很瘦,字母看上去宽度不一,极其不协调。字形的宽度必须考虑到它的内部及两侧形成的负空间。因此,要做到视觉平衡,就必须对字形结构与笔画进行相应的调整,这样才能让不同字母之间形成融洽、和谐的关系。
下面来看看 W 和 M。如果没有进行研究,很多设计师大概会同左侧一样设计,将矩形直接组合在一起。这样设计的话,我们会发现组合后,形状交错的地方看起来会特别厚,而且在等宽的情况下,M下侧的字怀部分比F狭小了很多,形成了严重的失衡。最右侧是调校均衡的 M,在蓝色的 M 图例中可以看到,笔画相交处进行了错开处理,使其变薄。这样M的字怀也变得均匀合理,相交处也变得厚薄适中了。
如果仔细放大查看我们常用的经典衬线体,就会发现像V、W、X、Y这些具有交叉笔画的字母,还会对距离笔画交叉部位近的地方进行逐渐收窄的处理,以达到笔画粗细在视觉上的均匀和谐。
X 的笔画交错处同样也会形成视错觉,可以看到黑色 X 的红色箭头处有膨胀感,也就是蓝色 X 的红线侧有扩张的错觉。右侧调校后视觉均衡,对红线处进行了逐渐向内收窄的处理 ,使交错处扩张的视错觉得到矫正。
常规字型的这种交错处都会进行收窄处理,以得到视觉上的均衡。
负空间与字间距
我们知道了西文字形的字宽需要以其字面的负空间与其他字进行均衡为考量,那么字间距该如何把控呢?这个问题,在我早年学习西文字形的时候,给我带来了极大的困惑。
与方块汉字不同,如果一股脑儿使用等间距的话,西文会立马显现出非常突兀的视觉上间距失调的问题。因为相比更接近方形轮廓的中文字形,西文字母的形状外轮廓的差异悬殊且字宽都不尽相同,字间距更是不能刻板地使用一个尺寸的距离去处理。
负空间:字宽与字间距的关键
《老子》有云:“埏埴以为器,当其无,有器之用。”意思是揉和陶土制作器皿,因为有了器具中空的地方,才有器皿的作用。用这句话来概况字形设计的核心关键,再适合不过,西文字形的字宽、内部空间以及间距控制问题的症结就在“当其无”的负空间(白空间)中。
以flickr的标志的标准字为例,将其进行相等间距处理后,从第一排右侧中可以看到字间距看起来时松时紧。我们看第二排是对其进行了字间距把控,这种把控就是对字怀,也就是互相之间形成负空间的考量。
西文的字间距对于字形设计来说是尤为关键的,不协调的间距,让文字阅读起来因为节奏混乱而让人感到十分吃力,大大影响到可读性和美感。
拉丁字母大小写,如果对外形进行笼统的分类,可以大致分类为方形、圆形、三角形这三种。我们以这三种与方形的间距为基准,得出上图的间距由大到小排列,可以看到三角形比圆形的侧边空间更大,因此需要更近的间距安排。字母结构实际情况更加复杂,很多字母是非对称结构,因此两侧的间距计算是不同的;况且字怀形状也不同,同样影响间距大小。
字间距的关键:字形之间的蓝色空间与字形内的红色空间的平衡。
对字间距的影响最大两点:①字母的侧边形成的负空间形状。②字形左右开放结构中负空间的影响。下图可以看到字形中有左右侧开放结构的字母对字间距的影响(上下侧开放的部分,则被视为内部空间如图中的K、n)。
以大写字母为例,字母一侧的侧边类型可以分成方形、圆形、三角形。它们又可以细化成下图的六种形式,并进行字间距由大到小的排列分类。
第一种的字母单侧接触面是封闭的,间距空间相对是最大的。第二种是下侧或上侧(也适用于小写字母 m、n、h)拥有圆角边缘的字母 ,因为间距间出现了这样的小缺口,因此间距比第一种方形的绝对垂直边缘的字母间距略小一点。第三种的以D、B为典型,它们都属于圆形侧边类型,但具体的距离还要视字形实际占用的空间进行微调。第四种的是三角形侧边类型,是间距中最小的类型,因为侧边形成的负空间最大,所以间距要更紧一些。
通过此图可以大致理解间距的关系,接下来看字的正负空间对间距的影响。
下图为三种形状的侧边开放空间对视觉间距引导的示意图。
拥有三角形侧边类型的大写字母,如T、V、A、W,有时候会与小写字母形成更复杂的关系,因为它们有一侧或两侧的开放式空间,因此与一些小写字母的字间距甚至是负值,小写字母会进入它们的内部。以下图为例,注意红色箭头处及T下方开放空间的处理,以进行视觉上的均衡。
在设计间距的时候通常以侧边类型为方形的字母为基准,设置一个所需的间距值,然后以此为基准去调校其他字形间距。下图示例中可以看到,H、 M、N这种两边的侧边类型都是方形的字间距是一样的。E、D都是右侧开放边缘,红色的开放字白部分都对间距起到了消减的影响。
值得一提的是,不少小写字母都拥有升部(b、d、k、h 等 )和降部(g、j、 p、q 等 )。以下图为例,虽然 k 的左侧和 m 一样属于方形侧边结构,但是 k 的升部加强了其厚重感,因此间距需要微调得更大一些。
字形设计与间距其实是一个非常精深的课题,这里只能抛砖引玉,做个基本的介绍和发散。
——