By Metaphox
|
January 22, 2010

于一月21日发布的 Mozilla Firefox 3.6 版本提供了对于 WOFF (Web Open Font Format) 字体格式的支持。关于这一字体格式的意义,本站之前的《字体数字化简史与 WOFF》一文已有提及,而我们今天将简单地演示 WOFF 格式的具体使用及其效果。对于网页设计者来说,使用 WOFF 格式与使用此前已经被支持的 TrueType 或 OpenType 格式在方法上并无不同,都是通过 CSS 的 @font-face 等规则完成的。首先是通过指定 WOFF 格式的字体文件之 URL 来定义一个 font-family 名称:
@font-face {
font-family: myfontname;
src: url(link/to/the/woff-font/fontname.woff) format("woff"),
url(link/to/the/ttf-font/fontname.ttf) format("truetype");
}
通过以上代码,支持 WOFF 的浏览器如 Firefox 3.6 将自动下载 link/to/the/woff-font/fontname.woff 这一字体,不支持 WOFF 但是支持内联 TTF 的浏览器则会自动下载 link/to/the/ttf-font/fontname.ttf。(Internet Explorer 两者都不支持,对应解决方案请参见这里。)由网页设计者自行决定的 myfontname 则是这些字体的代称,设计者可以在接下来的 CSS 中使用它来定义页面元素所使用的字体,例如:
#content{
font-family: myfontname, Georgia, serif;
}
此外,仅限于 Windows、Linux 平台的 Firefox 非标准 CSS 属性 text-rendering 同样可以用来控制 WOFF 的渲染方式。其可取值及对应效果是:
- auto
- 默认值。浏览器会自行猜测应该优化字体的渲染速度、可读性还是精准度。对于基于 Gecko 引擎的浏览器如 Firefox 而言,取此值也就意味着对尺寸大于20像素的文本会使用
optimizeLegibility,否则使用 optimizeSpeed。
- optimizeSpeed
- 优化速度。Gecko 将尽可能快速地渲染字体,而不保证字体的可读性和精准度。Kerning (字母间距微调)和 ligatures (连字)将被禁用。
- optimizeLegibility
- 优化可读性。Gecko 将强调文本的可读性而不是字体渲染的速度和精准度,Kerning (字母间距微调)和 ligatures (连字)也会被启用。
- geometricPrecision
- 优化精准度。Gecko 将强调字体渲染的精准度而非速度和可读性,目前其效果与
optimizeLegibility 相同。
请注意这一属性会被 Mac 平台上的 Gecko 引擎忽略,渲染效果将总是 optimizeLegibility。
具体用例如下:
/* make sure all fonts in the HTML document display in all its glory,
but avoid inadequate ligatures in class foo elements */
body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }
根据 Mozilla 的这篇文章,字体业界对 WOFF 的支持也已经开始。FontFont 甚至提供了一个免费的 WOFF 字体展示,其中除了包含本文所介绍的内容,还有 WOFF 的 MIME Type、防止字体外链的方法等。我们在这里给出一个略经修改的在线版本,当然需要使用 Firefox 3.6 来访问。Windows 用户请注意浏览时不应禁用 ClearType。
By Colourphilosophy
|
December 15, 2009
在西文中(英文、法文、德文……),要在一句话中突出表示一个单词,或者一句引语,往往可以采用 Italic。如:I love you. 或是:He said I love you. 随着电脑时代的到来,几乎我们所有使用的文字处理软件,都天然地带有2个功能:斜体和加粗。包括我此刻正在使用的 WordPress。然而说到中文,我们的书写历史上,似乎从未正式出现过使用斜体和加粗的办法来强调某个词语或者某句引语。
SWX 做一个有趣的收集和比较。让我们来好好探讨下,在中文语境中,我们该不该使用不同字体作为强调?以什么样的形式?中文的语言,是不是非得借助于字体的强调?我们如何从语言和文字的层面进行翻译?
By Colourphilosophy
|
October 1, 2009

Typo 是什么?让我们来看韦氏词典在线版的解释:
Typo
noun,名词
A mistake in printed matter resulting from mechanical failures of some kind.
由于机械故障所造成的一个印刷错误。
计算机领域中,指排字错误。
同意词:
erratum (排错),literal error(文字错误),misprint(误印),typographical error(排字错误)
typo 在90.91%的情况下,作为单数使用。在1亿个口头或书面出现的词语中,typo约有11次。以typo开始的词语有:typograph(铸排机),typographer(排印工),typographic(排印学的),typographical(排印学上的),typography(排印学),typological(类型学的),typologically(类型学地),typologies, typologist(类型学家),typology(类型学)……

By Rex Chen
|
June 19, 2009
前文提到对于 Michael Bierut 对《纽约客》恒久不变的“慢设计”态度的赞誉,很多设计师也对于它即便缓慢的变革而痛心疾首。然而,对于固守传统持否定态度,主张设计上激进变革的人也大有人在。在2007年的一篇 AIGA 的文章中,与 Bierut 同在 Pentagram 工作过的 KT Meaney 强烈地批评了《纽约客》逐渐老化的设计。他表示,仅仅重复从前的排版并不能证明它的优越性,其在功能性上已经无法满足当代读者的需求。他笑称《纽约客》没有专门的设计部,因此会出现连续两行末尾使用连字符(hyphen)、Caslon 斜体和 Irvin 体混用、行首单字(Orphan)的种种细节错误。因此他提出了一系列更新方案。有趣的是,如此“革命性”的重设计提案仍然最大的保持了《纽约客》原有的风格,只是从实用主义出发修改了细节的排版和字体,并没有出现近年来流行的天翻地覆式的推到型重设计。
作者/ Author: KT Meaney © 2007 AIGA
原载于/ Original from:
AIGA, 2007
图像/ Images:
AIGA, 2007
翻译(有删改)/ Translation (with modifications): Rex Chen
1. 杂志头
首先要批评了杂志头的设计。1980年代电脑重绘的经典 Irvin 体的杂志头与早期的手绘设计比较(如图),过于棱角分明,过于冷酷,失掉了原有的味道。但新的重绘还是改进了一些字距的问题,比如“T”和“H”,以及“Y”和“O”。(译者注:另外价格和日期的字体也出现了不同,原来设计中的字体只在整本杂志中出现了这一次,因此也为很多设计师做诟病。杂志社2000年将这两行的字体也使用 Irvin 体,虽然解决了字体纷杂的问题,但被批评降低了杂志头的突出性。)

By Rex Chen
|
December 12, 2008

1926年24岁的 Jan Tschichold。Photograph: Thames and Hudson
最近忙完之后,重新读 Jan Tschichold 的《The Form of the Book》。现根据其中的部分论文,将主要的一些传统排版和字体使用的规则和 Tschichold 的观点归纳成系列。保守派设计爱好者比如我,对于这些规则十分钟爱,但设计至上者们也许对条条框框不屑一顾。无论何种情况,领会精神或者循规蹈矩,都仅供参考。
中世纪之前,段落的分隔使用“¶”符号(Pilcrow,“段落符号”,如今天的“§”)。尽管当时文字并不分成“段落”,因此该符号在文字中间,通常用红色,表示意思的转折(很像中国小学语文的“分段”符号)。中世纪,段落开始形成,但仍然保留了使用“¶”段落符号的习惯。由于要保持红色,因此该记号由专门的工人(rubricator)在排字印刷结束后专门标记上。因此排字工通常将每段开头空下来,留位置给分段符号。由于负责做记号的工人经常缺席,人们发现段首的空格(em quad indention 或 indent)作为标记,不用红色符号也已足够,这就形成了我们今天段首的缩进,一般大小为1 em。(由此推想,中文当初开始横排,开段的空两格也大该由此西文习惯而来。)

1498年:《The Golden Legend》。Image:
gregorcles@Flickr
顶格与加大行距无法取代缩进
对于前人的花哨风格扑之以鼻,人们开始简化这些“花样”。于是在19世纪末,英国排字者首先开始摒弃段首缩进,开始使用顶格的段首。这一风格因为一些主要书商的采用,逐渐推广开来,并被报纸、小册子、杂志等低廉印刷品大量采用。Tschichold 认为此法并不能代替原有缩进的功能,不值得效仿。报业的排字者通常在两段之间的行距随意加多两到三点,取代缩进的作用,这样破坏了文字整体的美感。有时一段的末尾刚好是句号,他也会不分上下文的将其分段,加入行距;有时则会疏忽而忘记增加行距,影响了整个理解和阅读。
Tschichold 进一步阐释,读者通常比起段首,读到段尾时已经相对没有那么兴致勃勃。顶格段首会让读者觉得自己仍然在阅读类似的内容,因此不仅使读者逐渐失掉兴趣,也掩埋了作者良苦用心的分段。这一看似使文章整齐一致的开端方式,却影响内容的理解和传播,成为顶格分段的最大缺陷。Tschichold 也提到另外两种尽管少见但更加令人心烦的分段方式:一是用一条长线分隔,这样不仅粗暴的打断了文字,也会迷惑读者;二是段末一行右对齐——纯粹的无聊和无谓。
Tschichold 感叹到:“为什么这样具有明显缺陷的风格还需要解释?”
参考
Tschichold, J. ‘Why the Beginnings of Paragraphs Must be Indented’, The Form of the Book, 1991, Lund Humphries
By Rex Chen
|
September 18, 2008
好的。信贷危机(Credit Crunch)如火如荼的本周,爱字体的人(OK,我是学经济的)仍然可以给自己找乐子。实在忍不住全文翻译下 Noisy Decent Graphics 这篇文章。
作者/ Author: Ben Terrett © 2008
原载于/ Original from: Noisy Decent Graphics,2008年9月18日;
图片/ Images: Noisy Decent Graphics
翻译/ Translation: Rex Chen
现在大概无人不知银行界产生的危机了,所有家喻户晓的大银行都受到牵连。危机正逐渐吞噬我们并且一天一天逼近我们的家园。尽管很长一段时间以来,我都尽量避免这个话题,但我现在实在不能再等了。
女士们先生们请让我介绍——字距危机(Kerning Crunch)。
让我们先看看雷曼兄弟(Lehman Brothers)。字体设计大气、强壮、信心十足。仿佛在船头直挺挺地站着,紧盯着对手们的脸:伙计放心,这儿没问题!

但离近一点看,尤其是字母“A”。

这能接受吗?靠近一点寻求安慰?有关部门是不是该过来查一查有没问题?

“O”和“T”倒是收敛一点,但我觉得还是有点太亲近了。字距危机的问题在于它让我们对自己的价值观产生质疑。我们是不是乘风破浪的时候离风太近的太久了?我们到底还要多亲近?

劳埃德(Lloyds)大概是这些倒霉蛋里面比较好的。他们成功解救了“O”、“Y”和“D”,但他们还是救不了所有人。
犯规最明显的已经被主流媒体忽视了,但我们不怕,有尊严的 blog 就是做这种事的。所以我们靠近点看看巴克莱(Barclays)的“L”和“A”吧。

前面都是艰难险阻,朋友们。
这些银行中的一些的名字本身就是自己最大的敌人,调好“L”、“A”、“Y”和“S”的字距从来都不是什么容易的事。但这些人还真是喜欢冒风险,是不是?
By Rex Chen
|
August 13, 2008
仍然继续一些“基础系列”的指引。不知道是不是知道一些 Typography 的人都有或多或少的强迫症,日常看到一些 Typo 错误就会抓狂,于是生活痛苦不堪。在回国一段日子之后,强迫症终于迫使我写下这个注意事项的系列文章。这个指引针对西方文字的排版,部分规则对中文排版有借鉴作用。
注:本文原文为十条,写下后发现漏洞较多,激烈争论后决定将后七条比较复杂的分开详细写,以不致草率和业余。
1. 避免错误的拼写和翻译
这一点无需多说,可笑的例子太多太多。最近极端的例子是一间叫“翻译服务器错误”(Translation Server Error)的中国餐馆。想说 Chinglish 是一个新文化的另当别论,但对于严肃的英文使用场合,翻译的错误是致命的。
另一个是拼写问题,比如左图消失的空格,或者无数名片上的 “Http:www.xxx.com”,以及莫名奇妙的忽然大写和小写,都是英文排版里的硬伤,不但影响阅读,而且影响理解。对于名字的翻译,中国的标准应该是:Beijing、Hu Jintao、David Zhang 和 Heping Road,而不是 Bei Jing、Jin Tao Hu、David zhang 和 HE PING Road。因此要避免翻译和拼写错误,唯一的建议是在使用英文前请尽量请专业人士校对,至少绝对避免用软件直接翻译。
2. 避免挤压或拉长字体

很多情况下英文由于配合空间的需要,被任意的挤压或拉伸,这都是非常不可取的。事实上,很多常用的英文字体大多已经精心设计了不同宽度的字型,比如较窄的 Condensed 系,和较宽的 Extended 系。这些特定的系列都是设计师最大化地保留了字体的特色,以及对于可读性、识别性等等上进行了优化所生成的,比设计软件机械地缩短拉伸的结果要理想得多。这一点对于中文字体也同样适用。
3. 避免 Windows 系统自带的中文字体的英文部
具体参见之前的文章。
By Rex Chen
|
April 22, 2008
如果说在中国大陆公共设计中想看到一些比较好的英文设计,鉴于政府根本没有设计的概念,就只能在半商业的环境如地铁和机场这样的现代化交通设施寻找了。即使在这样的地方,英文设计的杂乱和低质量也是不堪入目的。本简评系列旨在搜寻一些大城市包含英文的公共设计,当代中国设计对细节的追求也可见一斑。(要说明的是,由于说的是中国的英文设计,免不了各种各样的翻译笑话,这个各位权当乐子,我们不做评论)
今天看广州地铁的用字。

Images: Flickr
Helvetica、Times New Roman和宋体英文混用,很难说出标准字是哪一种(注意在这三个例子中,中文字体亦不同)。在广州地铁自豪的电子显示系统上,英文字尺寸不一,松紧不规律,可读性差,视觉上十分混乱。

Images: Flickr
左下为广州地铁的标准logo,其中英文字体在其视觉系统里都罕见使用。上图同样的设计,左边的设计进行了简化,可笑的是地铁的logo被简化为V。虽然这三个例子中都用了无衬线,但无论从字体、字距、尺寸和与中文搭配都做的相当差。

Images: Flickr
以上是东京地铁类似用途的设计,设计的美观度、可用性和一致性显然更胜一筹。
By Rex Chen
|
September 5, 2007

这个新闻有N个属性,首先是个好消息,然后是个老消息(迟了4个月,消息来自Allen.Blog),最后我希望是最后一个关注PC的文章,希望尽快转到Mac平台。anyway..
在Windows上迟迟没有没找到优秀的字体管理软件,因此一直在被迫用Adobe Type Manager。版本老的不行,功能也很差,只能用来安装和分类,预览很麻烦。不知道Adobe为什么停掉了ATM的研发。而好消息是,由字体商LinoType开发的著名的字体管理软件FontExplorer X已经提供了PC版的下载,网页中还列明了一系列可能出现的问题。尽管该版本在3月份就已经发布了Beta1版,但至今没有更新的版本。软件使用了仿Mac的界面,提供现在购买。具体大家使用看看了,我试用了一下感觉很棒。
——————————————–
PS. 最近由于两位作者都很忙,一个在弄签证学车二人世界,另一个在弄签证找工作,因此TIB更新有一些慢,希望大家谅解。另外TIB的系统已升级到WP 2.3,加入了新的Tag系统,这样查找相关文章将会更方便,内容架构也会更加清晰。
By Rex Chen
|
June 27, 2007
作者/ Author: Michael Bierut
原载于/Original from:
Design Observer,2007年5月12日
翻译/ Translation: Rex Chen
在我事业的头十年,我为Massimo Vignelli工作,他是一个因仅使用有限的几种字体做设计而著名的传奇式设计师。在1980到1990年间,我大部分设计项目都只在以下五种字体中选择:Helvetica(自然的选择)、Futura、Garamond No. 3、Century Expanded和Bodoni。
对于Massimo来说,这种作法是一个关乎意识形态的选择,一个符合道德伦理的诫令。“在新的电脑时代,”他有一次写道,“字体的大量出现和任意更改已经代表了威胁我们文化的一种新型视觉垃圾。在上千种字体中,我们真正需要的其实只是基本的几种,其他的则都是无用的废品。”这使我的工作变得十分省事。每次想用一款威尼斯罗马体(Venetian Roman)的时候,何必花几个小时在Bembo、Sabon和Garamond No. 3中苦苦挑选呢?因为对于大多数人来说——比如我的母亲——这些字体间毫无差别。何不干脆全部定下Garamond No.3,不再为此烦恼呢?一定是从前天主教学校的教育对我的这种绝对清醒产生了很大帮助,我对此充满感激。
10年之后,我离开了自己的这第一份工作。自己忽然可以选择任何想用的字体了!这一意识使我旋即变得疯狂。在早期的一个设计项目中,我甚至在16页中用的37种不同的字体。我的同样接受过天主教教育的妻子,对这种疯狂似乎司空见惯。她记得她的同学在修女“关照”了八年后转到公共学校:当她们终于从花格呢子校服中解放出来后,开始纷纷套上她们能找到最短的裙子。“天啊,”她说,看着我的设计中如撞车比赛般多样的字体,“你还真成了一个荡妇了!”
没错。当时从字体选择的“一夫一妻制”中解放出来的我确实变得有点放荡。后来,至少我感觉,开始学着节制自己的行为——和任何滥用药品的人一样。我意识到大量字体的喧闹是费时、费钱并起反作用的——即使我永远也不想回到五种字体的节制时代。虽然市面上仍然有上千种字体供选择,但我的“放荡后的复原期”使我必须学会开始对字体有识别力,并对于这个简单的问题有了一些答案:为什么选择某个字体?以下列出了十三个原因。
