文字设计和视觉文化

评《史蒂夫·乔布斯传》唐茶版

《史蒂夫·乔布斯传》唐茶版封面和内页

一本书的出版周期正变得越来越短。这不仅仅是因为,随着技术的进步,书籍完稿、排版、印刷、分销所需时间不断减少,也更是因为读者等待出版品现身的耐力阈值正慢慢降低——网络上一本写到一半的小说可能会有众多追随者跟着作者的写作进度随时阅读,而待得它真正完笔成书,反而会放在书架上无人问津;另一方面,这个正在不断加速演进的世界,也要求出版物面世的速度越快越好。传统的出版流程渐渐老去,对此无暇应对,新的出版形式和理念却随之成型。对此感兴趣的读者不妨通读台湾科技作者 xdite 的精实出版(lean publishing)一文。我们也相信,未来出版业的进化,精实出版将是重要的方向之一。

但是,对于阅读质量稍有要求的人自然会对「精实出版」产生质疑——这些来不及洗泥就被塞进保鲜膜摆在橱窗里贩售的萝卜,能让精神食粮的老餮们满意吗?快捷和质量的矛盾,有什么妥善的解决办法吗?

继续阅读

《失控》iOS App 电子中文版本面市

在手持电子设备上进行或长或短的阅读,已经成为许多人日常生活的一部分。身处渐渐脱离纸张的时代,虽然有诸多不舍和不适,也很少有人能只以印刷品度日,完全放弃愈发常见的电子读物。这样一来,鉴于阅读品质对于生活品质的影响,找到适合自己习惯的阅读器具,就成了相当重要的事情。以 iOS 平台上的软件来说,这方面的选择并不缺乏:有 iBooks、GoodReader、Stanza 等泛用阅读软件,也有《纽约时报》、《经济学人》乃至《南都周刊》所发布的专门阅读应用,乃至 Flipboard、Reeder 这样的聚合阅读器。不过,一件事情如果有许多选择,往往也容易令人困惑。面对 Home Screen 上若干阅读器图标时,应该按哪一个呢?

继续阅读

连载:活字字体的基础讲座

从今天开始,一连四周,我们将每周发布连载《活字字体的基础讲座》。《活字字体的基础讲座》是 Type is Beautiful 应 Apple4us 的委托,自日文翻译而成的字体基础知识介绍。日文原文可见于日本字体公司「今田欣一设计室」于其官方网站「欣喜堂」的「基础讲座」。这一基础讲座包含五个部分,首先介绍活字字体的一般概念,之后是「和字」字体历史、汉字字体历史和西文字体历史,最后阐述三种文字如何协调排版。我们节选其中除去西文字体历史的四部分翻译成文,依次发布。

翻译者是我们网站的新作者,旅日学者 Eric Liu,以及我们的网站技术支持 Metaphox 。因为业余的精力和时间都有限,Metaphox 更是第一次进行日文翻译,文中翻译的错漏之处恳请有心去阅读日文原作的读者们指正。页面题图背景文字设计 Julius Hui。

我們從這篇連載開始嘗試支持繁(正)體中文顯示。各位可以點擊右上角的「繁體」按鈕進行切換,在此感謝小野大神製作的繁簡轉換插件

毋庸置疑,当代日本的文字铸排之技术与理论都相当先进,许多在中国本土已经流失或正在流失的精神和技艺,在日本列岛上仍旧焕发着蓬勃的生机,并有着独树一帜的风采。日本为汉字能在当今电子化时代继续保持其当下的文化传承和审美之功用,起到了不可磨灭的贡献。在这篇文章的翻译过程中,日本遭遇到史无前例的地震与核泄漏灾害侵袭。我们谨以此文向日本人民的文化与精神致敬。

考虑到这篇文稿的特别之处,我们为它特别设计了版面,并以迷你站点的形式,将全文独立发布,烦请各位移步到专门页面上阅读全文。此后每周我们会在这里、Twitter饭否上提醒大家新部分的发布。各位如果有建议和意见请在此留言。

连载首页

  1. 什么是活字字体
  2. 不要再用「代称」了 ──和字字体历史
  3. 宋朝体与明朝体的流变──汉字字体历史
  4. 活字字体的调和体

讨论:长文的数字排版与阅读

文章冗长,设计尴尬,怎么办?

长文的排版与设计是我们一直以来的困惑。我们在设计这个网站新版本的时候也遇到这样的问题。我们把讨论时的问题提出来,论点由三位作者提出,也希望大家能够参考和讨论。以下的讨论是我们最近一些想法的汇总,可能漏掉了一些重点或有失偏颇,还请大家指正。

我们说的是长文

具有相当篇幅、以纯文字为主的内容之宏观排版和交互设计是我们讨论的重心,短文和多媒体交互则不在讨论范围。凡字体、字距、行距等排印细节,我们也基本不去涉及。

长文阅读的问题

人缺乏耐性,冗长的文章如果没有经过任何排版处理,会让读者瞬间失去阅读的兴趣,若非读不可则不啻苦行。所以通过改进长文的结构和排版来提高阅读性乃至「诱读性」,是一件十分必要的事情。要吸引读者阅读完长文,必须符合读者的阅读心理:

  1. 应避免内容的长度令读者感觉到压力
  2. 要让读者对阅读的进展和目标有明确的了解
  3. 要给读者不断提供暂停的机会和阅读成就的满足感
  4. 要使多次阅读和检索变得容易

继续阅读

FF-DIN 圆体之工艺、设计与性感

作者/ Author: Jürgen Siebert & Albert-Jan Pool © 2010 原载于/ Original from: Technik, Design und Erotik der FF-DIN-Rundschrift, 2010, Fontblog | 图片/ Images: Marc Eckardt (A.-J. Pool 人像),Wikipedia (Coney-Island-Stich, Formelsatz) 及 FSI (字体样例) 翻译/ Translation with permission: Metaphox。作者授权 Type is Beautiful 译成中文,请勿转载。

Fontblog 将于星期五开始休假两周,在道别之前,我还想叙述一段多少有些繁复的字体历史 —— 一段我作为自然科学家和字体设计者始终牵挂于心的历史。我会试着把事情讲得尽量精确、也尽可能轻松,因为这些故事关乎于世间最美的东西之一:曲线。摩托车手看待曲线的眼光与字体设计师们有所不同,遭遇爱情的人们亦会用不同于修路工人的方式来演绎曲线,但这种种魅力,最终都可以归结到一切柔软曲线所共有的某一特征上去,而今天就让我来追溯一下它的根源。

继续阅读

视觉分辨力与 Retina Display

现有 iPhone 屏幕与 Regina Display 屏幕使用次像素抗锯齿渲染对比示意
更正:感谢 Apple4us 的 Rio 指正本文,实际上在 iPhone OS 之中,次像素渲染技术并未启用(甚至在 Mac OS X 上面,次像素渲染也并非会在所有 LCD 显示器上默认开启)。究其原因,也许是考量到屏幕旋转后次像素排列的方向变化会导致渲染结果不佳(但是在 iPad 上模拟的效果看来并无显著区别),或者苹果认为启用次像素渲染所带来的收益不能抵消其能耗。以下文字中关于次像素渲染的部分烦请忽略。

如果不考虑盲文和有声书,阅读的基础是「看」。视觉是阅读的最基本条件,优秀的字体与排印产品也主要是通过视觉来取悦读者。但是,就像人耳不能区分音高差异极小 1 的两个声音,视觉也有其分辨极限。十九世纪末人们就通过研究 2 发现,想要在一定条件下将两条明暗相间的细线区分开来,它们之间需要有 0.59 角分(arcminute)的差距。0.59 角分在 10 英寸的距离上大致相当于 0.0017 英寸,取其倒数 583,再考虑到两条细线各自需要至少一明一暗两个点,我们可以合理地推论,当印刷品的墨点密度达到每英寸 1200 点(1200 Drops Per Inch, DPI)以上,就可以满足相当挑剔的阅读要求。所以目前比较优秀的家用打印机,都标称能够达到 1200 乃至 2400 DPI 的分辨率,这样的印刷品质量已经与传统的、墨点密度可以视作无限的凸版印刷相媲美。当然,如同黑胶唱片,凸版印刷自有另一番独特的趣味,不过这已经超出了本文的范围。

继续阅读

Google 提供在线字体服务

Google 于五月十九日开放在线字体服务(Webfonts),正式加入在线字体提供商的行列。与我们已经介绍过的 Monotype Web Fonts、FontShop 等字体商不同,Google 此次提供的字体与其诸多既有服务一样,不出所料地完全免费。

Google 目前提供的字体共有十八种,均为目前流传较为广泛的免费字体,包括为 Android 而开发的 Droid 系列,被称为「Fonts for Scholars」的 Cardo,为代码印刷而设计的 Inconsolata,业余之作而不胫走红的 Yanone Kaffeesatz 等等;更为引人注目的是本站曾介绍过其人其事的 IM Fell 字体,此次经由 Google 声势浩大地一口气发布了十个字体族,它的介绍页面也颇费篇幅地讲述了字体背后的历史。

与我们此前介绍的 Fonts.com 所提供的服务相比,使用这些字体无需付费,也不必注册,只消通过 Google Font API 在网页的 head 区域插入一行代码,即可获得对应某个字体的、以 @font-face 形式定义的 CSS font-family 定义,继而就可以在 CSS 中如同使用本地字体一样使用它们。对于浏览器的支持情况也不错,Google 声称 Chrome 4.249.4 以上、Firefox 3.5 以上、Safari 3.1 以上、IE 6 以上均可渲染。使用 iPhone OS 和 Android 的设备目前尚不支持此项服务,不过这一功能的实现应指日可待。对于我们来说,也许唯一的遗憾就是此次发布的字体仅限于拉丁字符集。

在 Google 公布在线字体服务之后,Typekit 紧接着宣布它们此前的几周内已经与 Google 密切合作,在 GitHub 上放出了 JavaScript 开源项目 WebFont Loader ,让用户可以更进一步地控制字体的加载和渲染,也使得其他人能够在自己的网站上提供网络字体服务。此次 Google 所公布的诸多免费字体亦都被增加到了 Typekit 的字库中,所有用户都可以使用。用户还可以选择使用 Google 的 AJAX API 来调用 Typekit 的字体,这样一来在 Google 的免费服务和 Typekit 的付费服务之间切换,只需要更动一行代码。

Google 这一字体服务的显示效果可以在我们的测试页面上看到。(更新:Google 提供了自己的效果预览器。)

Computer Modern 的故事

TAOCP
以 Computer Modern 字体排印的《The Art of Computer Programming》第一卷。

现代个人计算机软件中可以进行排印或者出版准备工作的系统,以所见即所得型为主流,从早期的 Apple MacPublisher、Aldus PageMaker,到曾经非常兴盛的 QuarkXPress,以及现在的 InDesign 莫不如是,甚至连 Microsoft Word 都可以归入此类 1 。但是,在桌面计算机的图形化用户界面尚未普及时,字符终端上其实已经出现了优秀的排字工具。这一工具也许并不够直观,不过这或许也不失为其优点:写作者可以将精力集中于文档的内容、而非其展现形式之上;作为源文件的纯文本并不依赖于平台而存在,易于管理和版本控制;用于处理源文件的程序也可以极富扩展性。这实际上是典型的计算机程序设计理念,这样的系统也的确是出于一个计算机科学家之手——你也许已经猜我在说什么:TeX。

继续阅读

Erik Spiekermann 谈字体的版权法

Image: stewf@Flickr
作者/ Author: Jürg Lehni © 2009 原载于/ Original from: Interview with Erik Spiekermann, 2009, Typeface as Program 翻译/Translation: 经版权机构授权,由 Metaphox 翻译

Jürg Lehni (简称 JL,下同):我很想知道法律将字体(typeface)定性为软件(software)而非艺术品(artworks)背后的更多原因。是简单地由于 OpenType、PostScript 和 TrueType 都有些编程语言的方面呢,还是说这跟数字化的字体是对某种曾以铸造字模形式出售的排字工具之模拟这一事实相关?能请你讲解一下这个决定的性质吗?在我的研究过程中相关的解释非常少。

Erik Spiekermann(简称 ES,下同):将字体定义为软件的主要原因是字体很难受到保护这一事实,因为大多数人甚至看不出 Garamond 和 Bodoni 之间的差异,更不必说 Helvetica 和 Arial 了。字体「应该尽可能地不干扰读者对文本的理解、最多只是提供一点点审美上的附加价值」这一需求,成为评估其作为附加价值的「艺术性」贡献时的最大劣势,而这样的附加价值正是版权法所看重的。这就是为什么大多数根本没人想复制的、稀奇古怪的华丽字体可以受到版权保护的原因:人们可以清楚地意识到那是一件「作品」,而不仅仅是对于已知参数的重组,问题是严肃字体恰恰依赖于这种重组。那么,既然字母「A」需要看起来像「A」,为什么某种至少在外行人看起来并无特殊之处的「A」应该受到版权保护呢?

继续阅读

WOFF 使用指南

于一月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。

关于

程序员。
Twitter