译者:

原文:

Font Creation Case Study: Joules

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

原作者 Alec Julien 的其他文章:

本周热门

其它收藏服务:

Yahoo书签 QQ书签 百度搜藏 Del.icio.us Google书签 和讯网摘 天极网摘 添加到饭否

推荐阅读:

他集心狠手辣的竞争者,寡廉鲜耻的抄袭者和永不道歉的垄断者于一身,也正因为如此,比尔·盖茨为推动计算机工业的繁荣发展所做出的贡献才无人能及。


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

2262个读者 译者: snlchina  12/17/2007 原文 引用 双语对照及眉批

永远都在寻觅字体设计的灵感。夏天过后,我买了一套便宜的书法钢笔,说服自己,它会让我的鸡爬字产生脱胎换骨的变化。在浪费了一个星期和几打白纸之后,我还是没得到什么有趣的或是有稍微艺术气息的东西。最后,在一天晚上,疲倦而失望的我,在用完了黑色墨水之后,插入了一支红色的笔芯,然后写下了下面这一套字母表——之后它变成了我的 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居住于美国佛蒙特州,是一个网络开发人员和业余字体设计师。他的梦想是有一天能搬到一个温暖的地方,为一部小说做排版。]
继续阅读
  • 13个在线web2.0风格生成器

    貌似这篇post根本就不值得翻译,却耗了我很长时间 作为第一篇,这就当是我的hello world了 感谢译言,让我找到了学习e文的动力之所在 现在,只要看一些web2.0应用的目录,你就会发现,无论...

  • 如何提高页面响应速度

            访问速度缓慢的互联网已经成为过去,但页面能瞬时呈现也只是未来才会发生的事情. Christianheilmann的一些技巧,现在就可以令你的网站访问起来更为流畅。         页...

  • 标海观潮(完整)--2007标志设计趋势

         在LogoLounge.com这个近水楼台,自然有机会领略标海里的各种潮流涌动,弄潮儿挥舞着唯美、概念、文化的旗帜立于潮头。而作为互联网上最大的标志库(超过5万的标志),我们也总是会注意到...

  • 美国设计师:关于中国设计的10大荒诞说法和事实

    一个在美国12年的中国设计师眼中的今日中国设计业.

  • 十大网站设计错误

      自1996年以来,我曾经指出了很多网站中的设计错误,参见底部我的系列文章列表,本文将重点介绍的是,这些问题当中十个最为严重的网站设计错误。   1、搜索引擎不友好   搜索引擎对于难以处理和识别...

  • 字体圆滑术、锯齿消除术与亚像素显示技术

    苹果和微软就如何在电脑屏幕上显示字体的问题一直意见相左。今时今日,两家公司都通过使用亚像素显示技术令字体在日常的低分辨率屏幕上显得更清晰。它们的区别则是理念上的。 -苹果基本上认为,算法应该尽量保留...

  • 一张白纸

    【零七年四月七日更新:订正了错字(「模版」之前被误植为「模板」,并对文字作了细微修改。】 乔·楚特说 : 我总是能很快分辨出--不是猜测,是确定地分辨出--以 WordPress 为后台程序的博客或网...

  • 可用性第一法则:不要听用户的

    在过去的几年里,最伟大的可用性壁垒是奇酷无比的设计所具有的优越感。大部分的项目在可用性上更喜欢采用复杂的法则而不是简单,结果,大量的美刀花在了耀眼但难用的设计上。 第一次互联网泡沫的破碎带来的主要好...

相关小组

标签:

内容有问题?请与我们联络。

译作评分

  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5
 5.0  |  1 个评分

19条评论    0眉批

  • 1.

    pestwave 大学士 | Blog

    很漂亮,哪里可以下载啊?

    12/18/2007

  • 2.

    rokia 贡生

    赞snlchina的坚持!加油。准备试用一下这套字体。

    12/18/2007

  • 3.

    rokia 贡生

    哦。。是收费的啊。。19$。还是等着用snlchina的吧。:)

    12/18/2007

  • 15.

    snlchina 榜眼 | Blog

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

    01/01/2008

  • 16.

    petit 童生 | Blog

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

    01/01/2008

  • 17.

    bighigh 童生

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

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

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

    01/09/2008

  • 18.

    snlchina 榜眼 | Blog

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

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

    01/09/2008

  • 19.

    sea 童生

    感谢您的分享

    04/06/2008

添加评论

欢迎访问译言网。在这里,您可以。。。

阅读
发现
翻译