当我们使用中文字型时,横排是最大宗的排版方式(想想你打报告、刷手机,或看网页的此时此刻,也正阅读着横排的中文字串)。但你可能不知道,正在阅读的这些中文字之所以横排时阅读顺畅,没有特别的违和感,都是费尽千辛万苦调整后的成果。
反过来说,如果设计中文字型不注意,忽略一些设计原则,排起来读的时候,就会让读者有遇到乱流的感觉。直接看范例比较快:
金梅歪体美工国际码(字如其名啊)
以金梅歪体美工国际码为范(ㄈㄢˇ)例,可以挑出来讲的东西实在太多了,这次先着重在文字重心的部分。大家可以实际阅读看看,第二行出现的「不太平衡」这四个字应该可以非常明显地感到乱流吧?
大概像这样:不↑ 太↓ 平↑ 衡↓
如果有好好调教过文字重心的话,阅读起来就会平顺许多:
信黑体W2
为什么会阅读起来观感会如此不一样呢?我们这篇来好好谈一下文字重心
究竟文字重心是指「什么」的重心?如何判定每个文字的重心呢?
字体设计第一课:训练观察几何图形(大小、距离)的眼力
我在日本读研究所时,旁听了鸟海修老师帮设计系大一上的 Typography 必修课,还记得第一堂课的课题就是几何图形的调整练习。什么?几何图形的调整跟字体设计有关?也许说了你才会惊觉,△◯▽ □可以分别对应到拉丁字母的「AOVH」字母的外轮廓,也可以对应到中文字的「上永下国」的外轮廓。
中文字虽没拉丁字母的外轮廓那样几何及明显,但是稍加观察后约能对应到15 种甚至更多的几何图形,像是:方形、长方(站立)、长方(横躺)、圆形、正三角形、梯形、倒三角形、倒梯形、菱形、五边形⋯⋯等。
字体设计第一课课题:几何图形调整练习
当我们在设计中文字,必须懂得判断出每个中文字大致对应到的几何图形,个别调整到适切的大小后,就要来面对重心、处理重心了。
重心的意思是:几何重心(吗?)
还记得国中教过图形的重心吗?正圆形与正方形的重心当然是在中心点的位置,而三角形的重心是这样找的:
三角形的几何重心
假使今天我们要做的四个字是「上永下国」那他们所对应到的图形如下:
※这四个图形的高度与宽度都设定为一样
首先方形无论是面积或是视觉大小都太大了,需要稍微缩小一点:
接着我们用红点标出这些图形的重心,我们会发现三角形不调整几何重心不行,重心摆荡太激烈了:
所以该如何调整呢,我们要改变三角形的底线摆位:
如此一来几何重心就会趋近一致后,文字的阅读效果就会顺畅许多(无须调整至一致,否则字会太小):
大家可以用电脑输入一些外轮廓明显不同的字,可观察出笔画的摆位有考量到几何重心,其实「上」「下」「国」三字是展开一套新字体设计时蛮重要的基准字,无论是几个字的标准字设计,或想延伸造出一套几千字的字型都建议优先制作这三个字,这样一来就能定义出一些很重要的参考线与框架。
光是外轮廓的笔画摆位恰当就足够了吗?何谓视觉重心呢?
其实,影响我们阅读文字时的高度观感不单是上面所提到的文字外轮廓与几何重心而已,就算是框架一样但透过文字笔画的摆位不同,也可以做到改变文字的重心。
一样的框架设定下,藉由笔画的长短变化营造出不同的文字重心:
(临时手边没白纸所以拿卫生纸示范ww)
结论
所以说影响我们对于一个文字重心高低的观感不单只有外轮郭及几何重心,还包括所有笔画的摆位(文字结体)的影响,综合之后会产生一个文字的「视觉重心」,视觉重心的一致才是我们调整文字重心时的目标。
视觉重心的确有点抽象,是一种感受而并没有一个确切的点,需仰赖设计师造字经验累积后所磨练出的眼力,以及多将自己所造出的字,进行各种尺寸与不同排列组合的排版测试,才能察觉到重心的偏移异状并加以调整。
让我们一起加油吧,设计师朋友们~这是一条漫长的练字之路。
题外话之一:为什么我看了那么多字,也写了那么多字,却没留意过中文字有重心这回事呢?
最主要的原因是由于我们日常生活中所见所使用的内建字型,都已经是花费人力经年累月的经验与调校下的成果了。只要是字型公司出产的字型,都已针对横排与竖排的排版需求细心调整过不同文字的重心,让读者横排阅读时不会忽高忽低,直排阅读时不会忽左忽右。
此外「书写」跟「设计」中文字两者在构筑骨架时与最后取得平衡的方式不太一样。对书法与文字造型有长期钻研的艺术家徐冰这样说过:
「书写一个中文字时,所下的每一笔都被前一笔所影响,必须灵活的改变笔的角度与调整位置,而最后一笔最终平衡了整个字。」
我蛮认同这个说法的,其实我们在进行书写时,都没有意识到自己正在进行微妙的视觉调整呢。
题外话之二:重心不同也是一种风格的表现方式
字型要能够阅读,重心稳定是很基本的要求。但如果对字的要求不是易于阅读文章,而是强调风格表现,我们也依样可以从重心下手营造特殊的美感。
新艺术运动(Art Nouveau)的著名设计师 Rennie Mackintosh 所设计的字体,就是利用特意拉高文字重心,营造出独特的张力与风格:
著名的美剧《美国恐怖故事》就是以 Mackintosh 字体作为标准字
设计师廖小子透过高重心的文字设计,营造紧张与恐怖的气氛
本文载自Medium 仅供交流学习
转载请注明出处
「Gray Design」致力于品牌形象 ∕ APP ∕ 字体设计