文字設計和視覺文化

目錄歸檔: 細節

字距危機

好的。信貸危機(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」的字距從來都不是什麼容易的事。但這些人還真是喜歡冒風險,是不是?

Basics:拼寫與翻譯、字體使用及其他

仍然繼續一些「基礎系列」的指引。不知道是不是知道一些 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. 避免擠壓或拉長字體

Image: Life in Asia@Flickr,左:Helvetica Neue Condensed Bold;右:Helvetica Neue Bold Extended

很多情況下英文由於配合空間的需要,被任意的擠壓或拉伸,這都是非常不可取的。事實上,很多常用的英文字體大多已經精心設計了不同寬度的字型,比如較窄的 Condensed 系,和較寬的 Extended 系。這些特定的系列都是設計師最大化地保留了字體的特色,以及對於可讀性、識別性等等上進行了優化所生成的,比設計軟件機械地縮短拉伸的結果要理想得多。這一點對於中文字體也同樣適用。

3. 避免 Windows 系統自帶的中文字體的英文部

具體參見之前的文章

中國公共用字:廣州地鐵

如果說在中國大陸公共設計中想看到一些比較好的英文設計,鑒於政府根本沒有設計的概念,就只能在半商業的環境如地鐵和機場這樣的現代化交通設施尋找了。即使在這樣的地方,英文設計的雜亂和低質量也是不堪入目的。本簡評系列旨在搜尋一些大城市包含英文的公共設計,當代中國設計對細節的追求也可見一斑。(要說明的是,由於說的是中國的英文設計,免不了各種各樣的翻譯笑話,這個各位權當樂子,我們不做評論)

今天看廣州地鐵的用字。

Images: Flickr

Helvetica、Times New Roman 和宋體英文混用,很難說出標準字是哪一種(注意在這三個例子中,中文字體亦不同)。在廣州地鐵自豪的電子顯示系統上,英文字尺寸不一,鬆緊不規律,可讀性差,視覺上十分混亂。

Images: Flickr

左下為廣州地鐵的標準 logo,其中英文字體在其視覺系統里都罕見使用。上圖同樣的設計,左邊的設計進行了簡化,可笑的是地鐵的 logo 被簡化為「V」。雖然這三個例子中都用了無襯線,但無論從字體、字距、尺寸和與中文搭配都做的相當差。

Images: Flickr

以上是東京地鐵類似用途的設計,設計的美觀度、可用性和一致性顯然更勝一籌。

FontExplorer X for PC Beta1 版提供下載

這個新聞有 N 個屬性,首先是個好消息,然後是個老消息(遲了4個月,消息來自 Allen.Blog),最後我希望是最後一個關注 PC 的文章,希望儘快轉到 Mac 平台。anyway..

在 Windows 上遲遲沒有沒找到優秀的字體管理軟件,因此一直在被迫用 Adobe Type Manager。版本老的不行,功能也很差,只能用來安裝和分類,預覽很麻煩。不知道 Adobe 為什麼停掉了 ATM 的研發。而好消息是,由字體商 LinoType 開發的著名的字體管理軟件 FontExplorer X 已經提供了 PC 版的下載,網頁中還列明了一系列可能出現的問題。儘管該版本在3月份就已經發布了 Beta1版,但至今沒有更新的版本。軟件使用了仿 Mac 的界面,提供現在購買。具體大家使用看看了,我試用了一下感覺很棒。

Web Typography Sucks 演講

三月份的SXSW2007的一個演講「Web Typography Sucks」,講了在Web上的字體排印的現狀和一些解決方法。

我基於有註解的演講演示稿PDF,加入了中文的注釋。在簡體中文系統下Adobe Reader 8下沒有問題,不知道會不會因為系統語言的差異而出現亂碼。
點擊這裡下載(大小:4.11M)

這個演示稿主要講了一些很基本的東西,比如標點符號、網格、排版和字體。Web 網格的部分以 HTML 和 CSS 做到了如印刷品般的嚴格對齊,很有意思。

演講人的網站 The Elements of Typographic Style Applied to the Web 很有用,他們計劃將 Robert Bringhurst 著名的《The Elements of Typographic Style》一書關於字體排印的指導應用於網絡環境,已經發布了一部分內容,旨在指導web設計者使用代碼達到嚴格的字體排印的要求,這個計劃正在進行中。

Typography 常見的錯誤(一)

標點符號

  • 連字號/Hyphens (-):用以連接、分開單詞
  • 短破折號/En dashes (–):用來表示「到」,從……到……
  • 長破折號/Em dashes (—):類似中文的破折號,分隔短語和內容
  • Prime (′ 和 ″):用來分隔時間、尺寸,比如3′ 5″,以及一些數學用途,不是引號。
  • 撇號/Apostrophes (’):用來表示從單詞中省略一個或幾個字母、所有格形式及數字、字母、縮寫的複數形式
  • 省略號/True ellipsis (…):不要使用三個句點(選擇文本就可以看到…和. . .的不同)
  • 版權符號/Copyright symbol (©)
  • 註冊商標/Registration symbol (®):已註冊商標
  • 商標/Trademark (™):商標,但可能未註冊

有些時候電腦會自動轉換,比如將三個句點轉換成省略號,只是要注意。

待補充。