首页 » 科技 » 打造你自己的字体(III)实例研究:Joules

打造你自己的字体(III)实例研究:Joules

Joules 手写体的诞生过程。

永远都在寻觅字体设计的灵感。夏天过后,我买了一套便宜的书法钢笔,说服自己,它会让我的鸡爬字产生脱胎换骨的变化。在浪费了一个星期和几打白纸之后,我还是没得到什么有趣的或是有稍微艺术气息的东西。最后,在一天晚上,疲倦而失望的我,在用完了黑色墨水之后,插入了一支红色的笔芯,然后写下了下面这一套字母表——之后它变成了我的 Joules字族。我想,如果我在这个案例研究中把它如何变成字体的过程写出来,大家也许会感兴趣。

下面是那天晚上我写下的好多张草图之一:
ilovetypography.com_Joules initial drawing_joules-sketch

特写:
ilovetypography.com_Joules initial drawing, closeup_abc

 
超级特写:我迫不及待想使用的一个大写A。
ilovetypography.com_Joules A closeup_a
从草图到字体

从草图创建Joules字体的过程,一如我之前的 两篇文章中所写的,我将草图扫描输入,下面是扫描稿在Photoshop里面转为黑白位图模式之后的样子。
ilovetypography.com_Joules A black-and-white_a-bw
注意原稿位图中包含的粗糙杂点:
ilovetypography.com_Joules A rough spots_a-closeup

ilovetypography.com_Joules A black-and-white rough spots_a-closeup-bw

通常,我会把这些位图处理干净之后才导入Fontlab,但这次例外。下面是第一个步骤,将位图导入ScanFont:
ilovetypography.com_Initial pass in ScanFont_a-scanfont

ScanFont中的一个特写:
ilovetypography.com_A in ScanFont_a-scanfont-closeup

我把这个新字符复制到FontLab中的正确位置。为了给你体验一下在FontLab中是如何进行调整的,下面放大显示了导入进来的粗糙的A。我选择了一个有问题的部分。
ilovetypography.com_Closeup in FontLab_a-fl-closeup-select

然后开始删去那些令人不快的节点:
ilovetypography.com_Closeup in FontLab_a-fl-closeup-select-p
FontLab中调节字符的时候,我们必须在两种诱惑中做一个平衡:一方面要使得轮廓尽量的平滑,另一方面,又应该尽可能的留下一些粗糙的节点,以保留字体的趣味。我发觉,对书法字体而言,不应该平滑掉所有的粗糙节点,在某种程度上,那等于剥夺了它们书法的感觉。

救人危难的字符合成

FontLab的一个便捷之处,是它可以自动的合成字符。本例中我先创建了一个A,然后又建了一个“重音符”:
ilovetypography.com_A plus Grave_a-plus-grave

然后我双击这个“A-重音符”的小格…
ilovetypography.com_A plus Grave double click_a-plus-grave-dblclick

FontLab就创建了一个合成字符:
ilovetypography.com_A plus Grave composite_a-grave-grey
这时候,如果你编辑这个A或者那个重音符,变化会立即的自动更新到那个合成的“A重音符”上。

 
侧架

我前面几篇关于字体设计的文章中也提到了,设置合适的侧架是一个重要的步骤。(一个原因是,恰当的侧架会让字距调整变得简单!)先为字符做粗调,我粗略设置了一个很小的、正的侧架。在初始编辑时,这个y的侧架显示如下:
ilovetypography.com_y sidebearings_y-pos-sb
 
这样设置会有什么问题,在初始字距设置中看a和y的配对就能看出来了。
ilovetypography.com_a-y sidebearings with kerning_ay-pos-sb

其实我可以保留这个y的侧架不变,然后在字距配对调整中,调节y靠近a,然后依此类推,在每一个字距配对中都调节y靠近其他的字符。但很明显,为这个y的左侧设置一个负的侧架的做法要更简单,也更明智:
ilovetypography.com_y negative sidebearings_y-neg-sb

下面就是改进后的留白设置在默认字距调整情况下的样子:
ilovetypography.com_a-y negative sidebearings with kerning_ay-neg-sb
 
 
Kerning 字距调整

天,为这个字体设置字距花了我几个小时的时间!其中的烦人细节…我还是放过你好了。但这里还有另外一个字距调整的实例。在调整前是这样的:
ilovetypography.com_A V pre kerning_A-V-pre-kern

调节后:
ilovetypography.com_A V post kerning_A-V-post-kern
 
Ligatures 连字
 
我在Joules中创建了相当数量的连字,使用者在排版时可以手动选择应用它们。
ilovetypography.com_Joules ligatures_ligs

下面举一个实例说说我是如何创建这些连字的。首先,我们先来看看这个z和a原始的连排效果。
ilovetypography.com_z and a_z-a

其实我可以在字距配对的时候让它们以一种时髦的方式漂亮的重叠在一起,但更负责的做法还是做一个z-a的连字。第一步,创建一个空白字符,然后把z和a复制进来:
ilovetypography.com_z and a, pre-ligature_za-nonlig

第二步,切开它们的轮廓,让它们能在合适的位置结合:
ilovetypography.com_z and a, pre-ligature..._za-lig-making-1
第三步,删除多余的部分:
ilovetypography.com_z and a, pre-ligature..._za-lig-making-2
第四步,移动字符让它们靠近:
ilovetypography.com_z and a, pre-ligature..._za-lig-making-3
第五步,连接节点:
ilovetypography.com_z and a ligature_za-lig-making-4
智能连字

Joules的第一个版本中并没有包含智能连字:这种技术是我最近才学会的。(这意味着TrueType字体的末日,因为智能连字技术必须在OpenType字体中才能实现。)其中的细节我就不唠叨了,但可以告诉你的是,需要在Fontlab中打开一个特殊的OpenType面板,并且通常还要写一些脚本,这样才能在一些能够识别连字的软件中激活你所创建的连字。大体上看起来是这个样子:
ilovetypography.com_Ligature definitions_open-ligs-def

 
完成
这就是经过了无数次修整和字距调整之后的最终结果:
ilovetypography.com_Joules_joules-page

我后来又接着给它做了一个意大利体的版本(好吧,其实更象是一个斜体,你们这些吹毛求疵的家伙),然后是一个粗体、粗意大利体,然后是大黑体。如果还有人感兴趣,我可以继续说说其中的细节。

[Alec Julien居住于美国佛蒙特州,是一个网络开发人员和业余字体设计师。他的梦想是有一天能搬到一个温暖的地方,为一部小说做排版。]

【本文翻译仅为外语学习及阅读目的,原文作者个人观点与译者及译言网无关】

1

返回正文评论

      呵呵,当然是商业字体了。英文字体如此发达,也和老外比较注意知识产权的保护有关。当然,任何东西都有两面性。所以,wiki和开源以及免费字体也一样的兴盛。

      不过作为商业字体,也自然有比免费字体更优秀的地方,比如文中提到的大量的kerning pair和连字,以及完整的字符集等等。

      翻完这篇,对汉字的设计有了一点不同的想法。在英文字体设计中,给字符做间距设定是非常重要的一个环节,不管是Side-bearing还是Kerning或是连字,都是为了更完美的控制这个间距。这个间距,在很大程度上决定了一个字体是优秀还是拙劣。

      然而在汉字设计中,竟然完全没有这个环节的设定。所有的汉字都是同样的大小,同样的间距。其原因可能是:

      1、汉字的数量太多,如果给所有汉字做kerning pair,那最少就是6000或者30000的平方。这是一个恐怖的数量。那么,作为弥补,就只能靠设计师在使用的时候自己做间距的微调了。 对一些书法字体来说,比如启体,在使用的时候,如果不进行这种大小和间距的微调,其结果是很糟糕的。 对于中文字的微调,设计师一定要有一点书法的基础才好,因为不同的字的组合,以及出现在哪个位置,情况都会有所不同。

      2、操作系统和设计软件都不是为汉字而设计的。从一开始设计的时候就没有考虑到汉字的特殊性。如果有一些最基本的考虑,那现在的汉字排版就会完全不一样。比如说,汉字为什么要占用同样的高度和宽度?从汉字的历史来看,从最古老的甲骨文开始,汉字都是大小错落有致的,也正是这种错落造成的灵动的空间,才形成了汉字独特的魅力。现有的字库中,笔画简单的字比如“了”和复杂的“雾”都是强行设置等宽的。等宽的结果,就是笔画细小的字笔画被生硬的放大,加粗。而笔画复杂的字,容易黑成一块。而英文字体设计中就完全不是这样,字母的宽度和高度完全根据字母本身的情况而定,一个W和一个I的字宽就是完全不同,e、h、p、j等字母的高度完全不同。如果汉字能够定义不同的宽度,那么排版的时候就是完全不同的一种局面。汉字的版面就有可能会更均匀而灵动。

      3、汉字字库是为了横排而设计的,但是又必须兼顾纵排。所以最后只能在两者中妥协。妥协的结果,很可能就是两者的效果都不是最好。

      从以上来说,所有汉字字库的设计都是一种妥协的产物。在西文为导向的显示系统上的妥协。

      但是,如果中国人自己设计汉字显示系统,那应该怎样做呢?或者说,应该具备哪些要求呢?

      对于怎样才是最适合汉字的中文系统,我的考虑还不太成熟,以上的想法也仅仅是一个开始,希望能够抛砖引玉。但是,仅仅是宽度和间距的变化,就会产生一系列完全不同的变化。所以我想,汉字字体设计完全能够有更好的表现。

      呵呵,文泉驿的字体我没有仔细研究过。如果我的理解不错的话,都是点阵字库,在如此下的尺寸下显示汉字,本来就是不容易的。即便是象微软花大价钱请专业字体公司制作的雅黑(方正开发的字形,MonoType做的hinting),依然有很多人说它的文字有对不齐之类的bug。一个开源项目,由多个志愿者进行开发,那么必然会存在一个水平参差不齐的问题,需要有一个人做最后的把关,以及多次的修改抓虫的步骤。所以我想文泉驿字体的完善,也应该要经历一个比较长的过程。

      snlchina:
        很喜歡你的BLOG,我收藏她很久了。
        snl也有自己的漢字字體計劃嗎?“從設計師的角度考慮字體”即是怎樣,不準備做一套完整的字庫嗎?
        我也是很期待有多點像snl一樣的懂設計的人加入“文源驛”一類的計劃,可以早點一套更好的漢字字庫出來。
        現在的win平台宋體的點陣太差了,個人認為沒有一個好的字庫在排版上做的更好也彌補不了(當然排版也是極其重要)。
        另外,文泉驛不是只做點陣的,現在也開始做矢量字了。但我覺得漢字的話在中小字號時還是一個高質量的點陣來得舒服,呵呵。

      呵呵, lrk是文泉驿的主要成员吗?佩服你们的努力,我也希望能够为你们做一些力所能及的事情。

      我的目标就是让中国拥有更多优秀的中文字库。所以,对于文泉驿字库,或者说对于整个中文字体设计领域的发展,我有一些建议。

      一、需要有更多有专业知识的字体设计师。字体设计是一个巨大的工程,不是一两个优秀设计师凭自己的力量能够完成的。所以就必须有大量的了解字体设计的人来参与,或者,让参与者尽可能多的学习字体设计方面的知识。

      一方面需要掌握通用的字体设计知识,这方面我们可以从目前已经非常系统而成熟的西文字体设计理论开始入手。相对于软件技术的掌握,我觉得更重要的是要掌握字体设计的基础理论,培养自己对字体的敏锐的目光,比如说对于字体的间距、节奏、平衡和协调、负空间等,有非常高的敏感。就比如rokia说的,感觉有些字不太好看,但是说不出原因,其实原因往往就在于这些细节之中。不管将来的软件如何优秀,设计师敏锐的眼光是永远无法替代的。

      另一方面,作为汉字,其设计就必然有不同于西文的独特的属性。所以,我觉得中文字体设计师应该多学一些书法,增加对汉字的领悟和理解。很难想象一个汉字写的一塌糊涂,对汉字没有什么理解和感情的设计师能做出很优秀的汉字设计。

      二、应该开发出一套汉字专用的字体设计软件。开发汉字字库最大的麻烦就是工作量巨大,一套完整的字库要包含6000-30000个字符。作为汉字字库设计软件,最亟待解决的就是解决这个工作量问题,通过软件的智能,来大幅度的减少设计师的机械劳动。目前字体设计领域比较专业的软件是Fontlab开发的AsiaFont Studio,但说实话也就是一套支持大字符集的Fontlab Studio而已,本质上仍然是一套以西文字体设计为导向的软件,对于如何大幅度的提高汉字的造字效率,丝毫没有改善。如果设计师真的用AFS来自己造字库,那么做一套雅黑可能就差不多花费其一辈子的时间了,我想真正有才华的设计师也不愿意采用这样的方式。文泉驿的解决方案是增加人手,用人海战术的方法来造字,我觉得这也不是最佳答案。

      据说,字体设计公司有一种技术,可以只要做出几十个字,就可以用软件自动生成其余的汉字。虽然未经证实,但我觉得这种思路是可行的。我们知道汉字如果拆开来看,也就是点横竖撇捺折这几种笔画,再加上不同的骨架结构,就组成了一个个汉字。那么,各种字体,实际上也就是不同的骨架,加上不同的笔画特征。汉字的骨架其实并不是很多的,特别是对正文字体而言。骨架可以从现有字库中采集,比如宋体、黑体、圆体、楷书、隶书等,也可以由设计师自己设计,或者用手写板书写。这样,对于一套新字体,设计师只需要定义好笔画的特征,然后就可以迅速生成不同的字体。然后设计师再凭借自己的肉眼的敏锐对这些自动生成的汉字进行细调和校正。

      我无法想象,在汉字输入法发明以前,中文的输入是怎样一件繁琐而恐怖的事情。而汉字字库设计目前正处于这个阶段。我们需要的是一套真正适合汉字的高效率的造字软件。我觉得这就是中文字体设计的真正瓶颈。一旦这个瓶颈得以突破,我们将迎来一个超乎想象的汉字设计的盛世。

      我觉得这才是文泉驿,或者说中国的字体设计公司目前最应该做的事情。

      呵呵,我不是 文泉驿 的人哦。不过由于对字体的关注,所以也对文泉驿有所关注。我是来学习的啊。你的意见很好,特别是关于书法,我也是这样想。
      snl,你是否也有一批志同道合的朋友在做着一样的事?
      另外,关于汉字字体设计,分辨率在目前来说是否是一个硬伤?

      呵呵,我曾经以为我是孤独的,但是后来逐渐发现有越来越多和我一样志向和爱好的朋友。

      关于分辨率。字体,不管是英文还是中文,从功能上可以笼统的分为两大类:正文字体和特排字体(display type)。对于正文字体,最重要的考量指标是易读性,而设计上的美观或者个性,其实是不太强调的。在屏幕上,不管是用于界面还是网页显示,我觉得基本上都可以归于正文字体的范畴。所以我觉得目前的分辨率的问题影响不是很大。

      我觉得首先应该确定常用字体数目,最好是中日字体设计组织一起来确定汉字的常用字库。这样可以为后来的工作节省大量时间,毕竟不是每一个汉字都有很高的使用率。

      偏旁部首排列法应该成为主流,但汉字内在建构的(术语我忘记怎么说了)也是重要的而且这部分并不能形成,或者说现在还没有形成标准,简单点来做个实验就是,用方正黑体和微软雅黑体排一大段文章,微软的阵列颜色会更黑。

      汉字虽然是中国人发明的,但吸收各国对于汉字的理解,同样是使汉字更完美的理性做法。所以以汉字设计最发达的日本经验来学习,是必要的。另外还有一个瑞典人写的《汉字王国》也可以作为资料书目,可怜我国自《说文解字》以来,没有任何砖家叫兽写过这样的书,想必他们也是很忙的,就不用靠他们了。

      《说文解字》是东汉许慎写的,当时还没有甲骨文的出土,因而有些推测是有局限性的。现代在大量甲骨文资料出土后,对汉字的解析是越来越精确的。你说的瑞典人写的《汉字王国》我听说了但没有看过,不知道有什么独到的观点?据我所知,大陆一个叫唐汉的人写了几本关于汉字的著作,据说是大量推翻了前人的观点。 但我还没看过。http://www.douban.com/subject_search?search_text=%E5%94%90%E6%B1%89&cat=1001

      唐汉的书翻过几下,没有仔细看,觉得并没有说什么有别于其他汉字书籍关于汉字解释的。感觉这些书籍只要买一本就可以了。其他的大同小异。瑞典人的那本,是有甲骨文、金文和现代汉字对比图的。也许以一个外国人的看法,会有点更新的东西。另外有个叫做刘涛的人写的《字里千秋》,是研究书法史的,描述了汉字各种字体的历史和笔画特点,可以作为辅助性文献来看。

      推荐几个关于字体和印刷术语的资源:

      台湾CLE的李果正老师整理的:
      http://edt1023.sayya.org/fonts/resources.html
      图文并茂的术语表:
      http://redsun.com/type/glossary/
      http://www.linotype.com/816/a.html

      都是e文的!看的我头大;-(

      很好的资源,谢谢分享:)

      为什么这篇文章的回复如此之多,而同一系列的其他文章可能一条也没有?看来文章之间也存在马太效应的。

      很好 ,可是 有没有谁 看到或翻译了 fontlab studio的 使用手册啊??
      跪求哪位高人指点一二!!!!!!!
      谢谢了