文字設計和視覺文化

評《史蒂夫·喬布斯傳》唐茶版

《史蒂夫·喬布斯傳》唐茶版封面和內頁

一本書的出版周期正變得越來越短。這不僅僅是因為,隨着技術的進步,書籍完稿、排版、印刷、分銷所需時間不斷減少,也更是因為讀者等待出版品現身的耐力閾值正慢慢降低——網絡上一本寫到一半的小說可能會有眾多追隨者跟着作者的寫作進度隨時閱讀,而待得它真正完筆成書,反而會放在書架上無人問津;另一方面,這個正在不斷加速演進的世界,也要求出版物面世的速度越快越好。傳統的出版流程漸漸老去,對此無暇應對,新的出版形式和理念卻隨之成型。對此感興趣的讀者不妨通讀台灣科技作者 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