(MARKO DUGONJI? 著 SEVENSHAO & TIMMLIU 譯 查看原文 轉(zhuǎn)載請(qǐng)注明出處)
隨著各種網(wǎng)頁(yè)字體、付費(fèi)的網(wǎng)頁(yè)字體服務(wù)和現(xiàn)成工具越來(lái)越多,字體排版收回了它作為設(shè)計(jì)皇后的桂冠,成為所有圖形和網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵。
今時(shí)今日,許多設(shè)計(jì)師在設(shè)計(jì)排版時(shí),主要考慮的本質(zhì)上還是審美問(wèn)題。問(wèn)題是,我們習(xí)慣于把字體排版和字體設(shè)計(jì)當(dāng)作兩種可互換的術(shù)語(yǔ),但實(shí)際它們是不同的。在Dribbble上快速看一下“typography”這個(gè)標(biāo)簽吧,立馬就能發(fā)現(xiàn)這個(gè)趨勢(shì)。
完美運(yùn)用字體設(shè)計(jì)的誘惑力會(huì)影響我們審視字體的方式,小伙,我甚至可以花幾個(gè)小時(shí)讓你看看字體設(shè)計(jì)組合!因?yàn)闊o(wú)論是字體排版還是字體設(shè)計(jì)都擁有共同的視覺概念。如果我們總是在尋找漂亮的字體,這個(gè)習(xí)慣將讓我們遠(yuǎn)離字體的真正角色和特性,比如通用性、復(fù)用性和靈活的設(shè)計(jì)模式。
我們總是急于嘗試最新的OpenType字體特性,用自由連字美化我們的設(shè)計(jì),妄想依靠只有部分瀏覽器支持的css連字符屬性來(lái)實(shí)現(xiàn)此效果。當(dāng)我們得意的凝視我們的杰作的時(shí)候,竟然沒有意識(shí)到根本沒有人會(huì)關(guān)心這些,甚至是字體排版的達(dá)人也不會(huì)!當(dāng)這時(shí)我們才意識(shí)到了事實(shí)情況,那就是文字能夠讓普通人在不同的設(shè)備上閱讀和理解才是關(guān)鍵,不論是在視網(wǎng)膜屏的平板電腦上, XP系統(tǒng)的的電腦上還是在智能手機(jī)上。
“好的排版不一定能讓排版狂人愉悅,卻能讓閱讀更順暢?!?/p>
——Oliver Reichenstein
網(wǎng)絡(luò)上的大部分文章所針對(duì)的都是即時(shí)攝入的內(nèi)容,聽起來(lái)是否很像“逆金字塔”?在網(wǎng)絡(luò)大環(huán)境下信息交流迅速,所以能適應(yīng)讀者集中精神一小段時(shí)間。人們?cè)L問(wèn)網(wǎng)站和應(yīng)用主要是為了尋找有用信息而不是為了達(dá)到閱讀上的愉悅。不要誤解我:我也喜歡能抓住我注意力的創(chuàng)意排版的標(biāo)題和欄目,但是同時(shí)我們也不能忽視對(duì)整理平衡和正文易讀性的需求。讓我們開始吧!
1)先說(shuō)重要的:項(xiàng)目調(diào)研
只有擁有考究的文字排版和具備從閱讀體驗(yàn)出發(fā)的易讀性的文章,才能被讀者較好的消化。如同在設(shè)計(jì)的其他領(lǐng)域,在做事之前我們需要做一些調(diào)查。在研究用戶習(xí)慣的過(guò)程中,我們不僅要發(fā)現(xiàn)有用數(shù)據(jù),還要從讀者的思維來(lái)考慮問(wèn)題,把焦點(diǎn)從我們最大的敵人那里移開——我們的自我膨脹(我也總是在與之戰(zhàn)斗)。
你應(yīng)該也意識(shí)到了。電子閱讀體驗(yàn)最主要的元素是內(nèi)容、環(huán)境和用戶。你可能在每個(gè)項(xiàng)目中都涉及到了這3個(gè)要素,但是如果你在每個(gè)要素上都傾注了排版的效果,那你會(huì)發(fā)現(xiàn)很貼心的想法和舉動(dòng),這最終會(huì)對(duì)整個(gè)閱讀體驗(yàn)有很大提升。
內(nèi)容
開始排版設(shè)計(jì)項(xiàng)目較好的方法是開始閱讀。應(yīng)該每個(gè)設(shè)計(jì)師都能知道這些內(nèi)容是給誰(shuí)看的以及它需要怎么傳播。但是除了評(píng)估內(nèi)容質(zhì)量和列出框架元素,我們也需評(píng)估其可理解性、閱讀時(shí)間、目的以及閱讀壽命。
涵蓋所有排版設(shè)計(jì)元素
在閱讀的過(guò)程中,思考下你遇到的結(jié)構(gòu)或元素,并把它們列出來(lái)。在開始時(shí)這個(gè)列表可作為一個(gè)簡(jiǎn)單的樣式引導(dǎo)。除了通用的段落、標(biāo)題、附件等,你也遇到一些不常見的元素,如強(qiáng)調(diào)段落、引用段落、強(qiáng)調(diào)引用段落,還有現(xiàn)在非常重要的一些元素,如數(shù)據(jù)表格和圖表標(biāo)題。你需要有足夠的字體能覆蓋這些元素。
在純文本鏈接中,要保證設(shè)計(jì)覆蓋了所有的HTML元素。這時(shí)你可以建一些示例HTML和CSS文件并保存為Project-Typogra-phy.html,這些文件包含所需要的元素和規(guī)則。這個(gè)html文件將會(huì)成為這個(gè)項(xiàng)目的排版系統(tǒng)基礎(chǔ),在你設(shè)計(jì)響應(yīng)式視圖時(shí)遲早用得上。
評(píng)估閱讀時(shí)間
閱讀速度因人而異,大部分成人的閱讀速度是每分鐘200-250字。這樣我們可以把整篇文章的文字?jǐn)?shù)除以250就能輕易算出閱讀速度了。如果你的項(xiàng)目有樣本文章,你可以把它放進(jìn)本地安裝的內(nèi)容管理系統(tǒng)里并運(yùn)行一段腳本預(yù)估閱讀時(shí)間。
預(yù)估閱讀時(shí)間能幫助我們?cè)O(shè)計(jì)段間距,掌握閱讀節(jié)奏。如果閱讀時(shí)間太長(zhǎng),我們可以把文章分成小段,或者在關(guān)鍵點(diǎn)處設(shè)置一個(gè)醒目的引文。
評(píng)估可讀性和易讀性
許多文章都有閱讀等級(jí),知道這些標(biāo)準(zhǔn)是很重要的。比如一篇文章如果很復(fù)雜,你可以引入一些評(píng)論讓讀者理解文章,或者增加一些腳注。
如果你和一位原作者合作來(lái)修改內(nèi)容和排版,一些工具能讓你更容易區(qū)分不同版本之間的區(qū)別。
其中一個(gè)測(cè)評(píng)是自動(dòng)易讀性指數(shù)(API)。API專注于文字和句子數(shù)量,使其在實(shí)時(shí)監(jiān)測(cè)方面發(fā)揮重要作用。Flesch–Kincaid難度系數(shù)測(cè)評(píng)是從另一方面來(lái)測(cè)試,更專注于字節(jié),能實(shí)時(shí)處理大量密集型任務(wù)。
另一個(gè)有用性測(cè)試是Flesch易讀性測(cè)試。它是通過(guò)單詞、句子和字節(jié)來(lái)衡量的,得分結(jié)果可以告訴你這篇文章的難度。大部分語(yǔ)言都它們自己的譯本。雖然這個(gè)工具在網(wǎng)頁(yè)設(shè)計(jì)方面來(lái)說(shuō)是很陌生的,但是出版商和政府機(jī)構(gòu)已經(jīng)用了很多年了,主要用來(lái)評(píng)估不同讀物的閱讀等級(jí)。
每篇文章都測(cè)試易讀性得分是件很令人抓狂的事情,所以我建議使用方便的文章可讀性統(tǒng)計(jì)工具,一個(gè)PHP腳本工具,是我們?cè)谧鯟reative Nights這個(gè)項(xiàng)目時(shí)研發(fā)的。
內(nèi)容策略,信息架構(gòu)和縮微本
如果我們跳出排版設(shè)計(jì)這個(gè)話題一會(huì)兒,先看看內(nèi)容策略(計(jì)劃、掌握內(nèi)容和定義編輯過(guò)程的規(guī)則)和信息架構(gòu)(組織和描述內(nèi)容的規(guī)則),就可以參與一些潛在話題的討論了。
考慮下內(nèi)容的生命周期能阻止我們急于排版這一新趨勢(shì)。下次發(fā)表一篇新文章時(shí),就能順利的阻止編輯因?yàn)闆]有清除為下次重設(shè)計(jì)而做準(zhǔn)備的殘留樣式而發(fā)怒了。
分類標(biāo)簽——由信息架構(gòu)確定的——會(huì)讓網(wǎng)頁(yè)設(shè)計(jì)者很痛苦,因?yàn)閷?dǎo)航條或者欄目的空間都是有限制的。我敢打賭,在每個(gè)設(shè)計(jì)師的生涯中,總會(huì)試著重命名或者縮短分類名的情況,僅為了適應(yīng)可利用的空間。當(dāng)然,我們也常常會(huì)減小字號(hào)或者選另外一種字體,但是如果所有的方法都失敗了,我們就能看看信息架構(gòu)找最后的解決方法了。
除了文章,我們也必須對(duì)一些表單標(biāo)簽、指導(dǎo)說(shuō)明、小字說(shuō)明、交互元素(如按鈕和鏈接)和其他不同作用的文本。所有這些小點(diǎn)都叫微縮本,它是有效交互設(shè)計(jì)的基礎(chǔ)成分。
環(huán)境
網(wǎng)絡(luò)標(biāo)準(zhǔn)協(xié)議發(fā)展迅猛,設(shè)計(jì)師們?cè)O(shè)計(jì)的網(wǎng)站與 “一個(gè)網(wǎng)絡(luò)”的理想國(guó)度聯(lián)系越來(lái)越緊密,無(wú)論何處的任何人都可以看到自己設(shè)計(jì)的網(wǎng)站。雖然每個(gè)項(xiàng)目達(dá)到如此廣泛傳播的目的是很難的,但是手機(jī)也并不意味著忙碌時(shí)只在智能手機(jī)上瀏覽網(wǎng)頁(yè)。
軟件問(wèn)題
window系統(tǒng)的用戶看到的字體都是經(jīng)過(guò)清晰字體渲染引擎處理過(guò)的。問(wèn)題是微調(diào)是需要時(shí)間的,而且并不是所有字體都能完美渲染。所以測(cè)試window系統(tǒng)的瀏覽器成了常規(guī)任務(wù)。
截圖為16px字號(hào)的Verdana, Proxima Nova, Arial, Adelle Sans and Georgia字體(Proxima為18px)在window 7系統(tǒng)上firefox18里的效果。Proxima和Adelle被渲染為網(wǎng)頁(yè)字體,其他字體懷疑只是OS系統(tǒng)上的默認(rèn)字體。前5行字體都沒有被清晰字體渲染引擎處理過(guò)。
當(dāng)然,記住不同的網(wǎng)頁(yè)字體服務(wù)可能會(huì)給你稍有不同的字體。一種字體由一種服務(wù)提供可能效果很好,但是由另一種服務(wù)提供看起來(lái)就只是湊合。我猜測(cè)原因或許是因?yàn)槿鄙贂r(shí)間投資——字體沒有足夠的時(shí)間來(lái)完成渲染,當(dāng)然也可能是因?yàn)槿狈ψ煮w渲染專家。
幸好網(wǎng)頁(yè)字體服務(wù)商一直在提高字體質(zhì)量,相信最后每個(gè)人電腦上的字體都會(huì)變漂亮的。因?yàn)樵S多工作都需要維持合適的字體,我鼓勵(lì)你買一些字體并訂閱付費(fèi)網(wǎng)頁(yè)托管計(jì)劃,這些舉動(dòng)能推動(dòng)字體渲染優(yōu)化的步伐。
如果支持window用戶對(duì)你來(lái)說(shuō)是項(xiàng)很艱巨的任務(wù)那么想想手動(dòng)微調(diào)的字體,比如TheSans Office,來(lái)自LucasFonts(他們因癡迷于字體渲染優(yōu)化而聞名)或者大量為微軟office應(yīng)用而設(shè)計(jì)的字體(它們的名字通常包含“Com”,“Offc”或“Office”)。如果想在舊的window系統(tǒng)用一種特殊字體是非常麻煩的事情,還是用已經(jīng)過(guò)測(cè)試和驗(yàn)證的Arial, Georgia 和 Verdana字體吧。
如果想知道更多關(guān)于字體渲染的信息,請(qǐng)閱讀Tim Ahrens寫的細(xì)看字體渲染。
硬件問(wèn)題
在這個(gè)行業(yè)我們必須要面臨的問(wèn)題是分辨率的多種多樣。所以,排版設(shè)計(jì)并不是無(wú)用的。一個(gè)有趣的解決辦法是使用等級(jí)字體解決不同分辨率的問(wèn)題,就像印刷設(shè)計(jì)師為了控制油墨在紙上的效果而使用等級(jí)字體。想要了解更多關(guān)于這個(gè)方法的信息請(qǐng)閱讀Oliver Reichenstein寫的響應(yīng)式設(shè)計(jì)下的新網(wǎng)頁(yè)。
相同字形在同一制造商的設(shè)備下都會(huì)有不同的渲染效果。截圖顯示效果為16px的Adelle字體在iPhone 3G、iPad3和iPhone4S上的渲染效果。截圖于某網(wǎng)頁(yè)并在PS里放大。
另外一個(gè)例子是關(guān)于電子屏廣告牌和電視屏幕排版,常常需要更粗的字體和粗細(xì)對(duì)比強(qiáng)烈的效果。因此,你要直接跳過(guò)兩個(gè)層級(jí)的粗體,直接加粗常規(guī)字體。在電腦和視網(wǎng)膜屏的平板設(shè)備上預(yù)覽此種效果都是不夠的。就像做手機(jī)上的設(shè)計(jì)一樣,我們需要在真機(jī)上進(jìn)行測(cè)試。
界面類型
把軟件和硬件因素先排除,環(huán)境也意味著界面的類型。比如,在電子設(shè)備上以內(nèi)容為驅(qū)動(dòng)的門戶網(wǎng)站、雜志、小說(shuō)和教科書,各種句型必須結(jié)構(gòu)清晰,各自互有關(guān)聯(lián),組成一個(gè)線性的閱讀路徑。內(nèi)容為驅(qū)動(dòng)的網(wǎng)站標(biāo)題是多樣化的(甚至是對(duì)小眾網(wǎng)站而言),為了便于讀者理解需要引入一個(gè)故事。(還記得下方的評(píng)論區(qū)?)
相反的,網(wǎng)絡(luò)應(yīng)用的信息是簡(jiǎn)單明了的,簡(jiǎn)單且依托于事實(shí),附有各種對(duì)比項(xiàng)目和數(shù)據(jù),這些信息都是特定時(shí)間段內(nèi)的。不像線性結(jié)構(gòu)里文章的句子,應(yīng)用里的小段文字都是可以單獨(dú)理解的并且很易理解。我們可以讓讀者隨機(jī)的跳段閱讀也沒影響。
在網(wǎng)絡(luò)應(yīng)用上,內(nèi)容的上下文是可預(yù)測(cè)的。許多典型例子就是查看銷售數(shù)據(jù),分析表格、圖表里的網(wǎng)站數(shù)據(jù),編輯日期、時(shí)間相關(guān)的記錄,你還可以查看網(wǎng)絡(luò)郵件,看看你是否成為了尼日利亞皇家彩票的獲勝者。
用戶
在互聯(lián)網(wǎng)上每個(gè)人都是我們的目標(biāo)用戶,尤其是當(dāng)我們開發(fā)多語(yǔ)言系統(tǒng)時(shí)。如果一個(gè)按鈕僅夠“return”這個(gè)英語(yǔ)字母的位置,那換成法語(yǔ)的“Retour”、中文的“返回”、德語(yǔ)的“Zurück”、克羅地亞語(yǔ)的“Povratak”或許就不合適了。
可閱讀性問(wèn)題
閱讀障礙是人類閱讀能力方面的一種損害。比如,一個(gè)有閱讀障礙的人會(huì)把字符看成圖片或者倒的字符。所以,一個(gè)小寫的帶著小尾巴的雙層結(jié)構(gòu)的“a”對(duì)一個(gè)有閱讀障礙的人來(lái)說(shuō)看起來(lái)就像是是一個(gè)斜體的“e”。
另外對(duì)于有閱讀障礙的人來(lái)說(shuō),幾何形字體很難閱讀因?yàn)閺慕Y(jié)構(gòu)和形狀上來(lái)說(shuō)都是很相似的。p鏡像過(guò)來(lái)看就是q,n反過(guò)來(lái)看起來(lái)就像u。這里的意思不是說(shuō)我們要馬上把它換成專門的字體,但是能意識(shí)到這種問(wèn)題可以反映設(shè)計(jì)師的讀寫能力。
讓問(wèn)題更復(fù)雜的是,閱讀障礙有四分之一概率并隨注意力缺失癥發(fā)生。
加粗使字母在適當(dāng)?shù)奈恢谩_@里展示的是Futura和Dyslexic字體
屏幕字體平滑要感謝紅、綠和藍(lán)亞像素。不幸的是,對(duì)于一少部分的男性來(lái)說(shuō),一些字體看起來(lái)更加尖細(xì)和難以辨認(rèn),或者顏色更淡、字形更肥,因?yàn)榧t色亞像素不夠明顯。使用Color Oracle這個(gè)免費(fèi)工具可以很容易看到你選擇的字體在視覺效果虧損方面的表現(xiàn)。
不同的顏色視覺效果虧損對(duì)處理字體平滑的效果不同。
2)選擇一種功能大于形式的字體
不同于主流思想,一眼就找到完美的字體并不是與生俱來(lái)的天賦。當(dāng)然,天賦會(huì)給你先天優(yōu)勢(shì),但也只有那么點(diǎn)優(yōu)勢(shì)了。讓你自己學(xué)習(xí)手頭上的項(xiàng)目,對(duì)于合適字體的鑒別力就會(huì)隨之而來(lái),減少待選字體。
說(shuō)點(diǎn)題外話。許多教師和引導(dǎo)者寫了一些靠環(huán)境、長(zhǎng)相和感覺來(lái)選擇適合字體的文章。一個(gè)品牌的牌子與其競(jìng)爭(zhēng)者的設(shè)計(jì)環(huán)境、蘊(yùn)含感情和視覺差完全不同是作為一個(gè)設(shè)計(jì)師的職責(zé)所在。一個(gè)排版設(shè)計(jì)師,或者說(shuō)一個(gè)排字工人會(huì)從不同視角看實(shí)際需要、項(xiàng)目目標(biāo)和一些衍生問(wèn)題。每個(gè)方面都需要一個(gè)成功的、全面的項(xiàng)目。
這些目標(biāo)是如此不同,所以我們應(yīng)該慎用字體組合和抽象形容詞如“漂亮”,甚至是沒有上下文的不生動(dòng)的詞“美好”。一種字體只能放在特定環(huán)境的上下文中來(lái)審視。如果我們單獨(dú)的來(lái)看一種字體,那我們必定會(huì)從很嚴(yán)格的技術(shù)層面來(lái)審視它。
當(dāng)我看到Comic Sans被用在幼兒園聚會(huì)的邀請(qǐng)函上,我⑴件事情就是翻白眼。但是從某點(diǎn)上來(lái)講,我必須承認(rèn)它對(duì)我的孩子和朋友來(lái)說(shuō)都是很合適的,雖然我不鼓勵(lì)到處都使用它們。但是如果我看到一個(gè)公司備忘錄上用Comic Sans,我會(huì)抓狂的。
有襯線字體與無(wú)襯線字體
很多初學(xué)者都在有襯線與無(wú)襯線字體之間猶豫不決。其實(shí)這視情況而定,而絕不應(yīng)該受排版師或其顧客的個(gè)人喜好所影響。而且這兩種字體在易讀性上沒有任何區(qū)別,尤其在現(xiàn)在這個(gè)滿是高密度屏幕的時(shí)代。
有時(shí)候一些項(xiàng)目是允許我們走捷徑的。如果我們事前準(zhǔn)備充分,我們就能夠作出明智的決定。如果我們要展示縱向的數(shù)據(jù)(比如匯率或者產(chǎn)品價(jià)格單),那么有襯線字體就會(huì)比較合適,因?yàn)橛幸r線字體通常會(huì)在水平方向起強(qiáng)調(diào)作用。而由于有襯線字體能夠加強(qiáng)文本在水平方向上的流動(dòng)更適合性,因此更適合線性思維或者縱向空間不足的情況。
其實(shí)道理我們都知道,只不過(guò)經(jīng)常會(huì)忘了后退一步看看整體。我很喜歡Vitaly Friedman和Elliot Jay Stocks決定在Smashing這本雜志的文本中使用無(wú)襯線字體的理由。在鳥瞰整個(gè)頁(yè)面及其布局之后,他們總結(jié)道:
“因?yàn)镾mashing Magazine上有許多的視覺內(nèi)容——截圖、按鈕和浮夸的廣告——主體部分使用sans-serif就看起來(lái)更加的明智和整潔?!?/p>
——Vitaly Friedman 和Elliot Jay Stocks
字母易讀性
另外一個(gè)重要的易讀性測(cè)試是為了區(qū)分簡(jiǎn)單字體字形之間的區(qū)別。設(shè)計(jì)師使用全字母短句,或測(cè)試短語(yǔ)來(lái)評(píng)估和對(duì)比字體。比如有名的短語(yǔ)“The quick brown fox jumps over the lazy dog”、“Handgloves”、“Hamburgefonstiv”。
設(shè)計(jì)師Jon Tan想出短語(yǔ)“aegh! iIl1 0O”使用了很長(zhǎng)時(shí)間。這個(gè)短語(yǔ)能有效獲得一種字體的特性,并且能檢查字母“i” “I” “l(fā)”“1”“o”“O”的差異性。
我們可以把這個(gè)短語(yǔ)擴(kuò)展一下,使其包含斜體、小型大寫字母和數(shù)字。比如我們能加上一個(gè)斜體的“e”,只是為了確認(rèn)它不像變形之后的小寫字母“a”,尤其在字號(hào)很小細(xì)節(jié)會(huì)丟失時(shí)。
外交事務(wù)
支持國(guó)際訪客是非常必要的。如果你構(gòu)建整站時(shí)使用的是一種你不熟悉的語(yǔ)言(比如阿拉伯語(yǔ)或者越南語(yǔ)),那你可能需要一個(gè)當(dāng)?shù)赜∷⒐と藢?duì)你一對(duì)一教學(xué)。但大部分的網(wǎng)頁(yè)設(shè)計(jì)師會(huì)建立自己的國(guó)際用戶資料庫(kù),我們也必須保證每個(gè)字符在這種字體下都能正常顯示,字體在英語(yǔ)和西班牙語(yǔ)中使用基本都是最廣的。每種語(yǔ)言都有一或兩種特定臨界組合。
很少在南斯拉夫語(yǔ)系中看到匈牙利語(yǔ)中有“gy”字母組合克羅地亞方言中有“ij”組合,更不用提兩字一音(“ch” “d?” “ij” “l(fā)j” “ty”)和三字一音((“dzs”和“sch”)這些組合了。
很神奇的是,在意大利字母表里,字母“k” “j” “w” “x”和 “y” 只用來(lái)適應(yīng)外來(lái)語(yǔ)言,有些用的還非常的口語(yǔ)化,比如“k”當(dāng)作強(qiáng)調(diào)的“c”使用。所以當(dāng)我在意大利搶一個(gè)家伙的道時(shí)他對(duì)我吼過(guò)這個(gè)詞。回到正題,因?yàn)樽帜副頊p少了那么多字母,所以導(dǎo)致了很多“cc”“l(fā)l”“tt” 和zz”以及與“o”和“i”的字母組合。你可以像到這些組合導(dǎo)致了一些很尷尬的間距。
在東南歐,姓氏經(jīng)常是以“?”或“?”結(jié)尾的,沒人喜歡他們的名字里有被剝奪了發(fā)音的字母,更糟的是還用后備字體來(lái)渲染。丹麥和挪威使用“?“,德國(guó)使用“?”,這些只存在于拉丁字母表內(nèi)。
認(rèn)識(shí)你的目標(biāo)語(yǔ)音里的字母和字母組合
為了能覆蓋所有擴(kuò)展過(guò)的拉丁字母表,我們當(dāng)然需要選擇一種能覆蓋所有中歐字母的字體(如付費(fèi)字體)。為了防止遇到上面提到的那些少見語(yǔ)言中的字母組合,我們需要準(zhǔn)備一些候選字體來(lái)支持這些特殊語(yǔ)言,因?yàn)樵谂虐娴臅r(shí)候,字間距也不太可能完全靠CSS來(lái)調(diào)整。
熟悉的字體讓我們閱讀更順暢,但不熟悉的字體卻能讓我們的學(xué)習(xí)得更好。
我們相信大家面對(duì)熟悉的字體時(shí)閱讀是最順暢的。(PDF, 11.5MB)就連像Zuzana Licko 和 Erik Spiekermann這樣的專家也說(shuō)在閱讀最常接觸的字體是閱讀最流暢??纯茨闼紤]的字體的發(fā)展史,然后與通常目標(biāo)受眾最熟悉的字體作比較。
由David Brezina設(shè)計(jì)的Skolar字體起初是為學(xué)術(shù)和多語(yǔ)言刊物而設(shè)計(jì)。大家在閱讀這類刊物時(shí)習(xí)慣于看到新羅馬字體。而Skolar新鮮新潮的同時(shí),在外觀上與新羅馬字體有足夠相似的特點(diǎn),所以新羅馬字體的用戶群體也能很好的接受。循這個(gè)方向著手,既穩(wěn)妥又是個(gè)很好的選擇。但是請(qǐng)一定要嘗試不同的替代字體,試驗(yàn)一下哪個(gè)才能吸引到你的目標(biāo)受眾。
用Skolar來(lái)代替Times和新羅馬字體?你能看出兩種Times的字體有什么區(qū)別嗎?
最近Connor Diemand-Yauman、 Daniel M. Oppenheimer 和 Erikka B. Vaughan對(duì) “障礙閱讀對(duì)教育結(jié)果的影響”(PDF 1.3MB)研究發(fā)現(xiàn):用難閱讀的字體呈現(xiàn)的信息更能讓人記住。研究表明有閱讀的障礙激發(fā)的深層信息加工能讓記憶有更好的表現(xiàn)。但這只是告訴我們用別的字體替代現(xiàn)有的流行字體是行得通的,并不代表要選擇世界上最奇形怪狀的字體來(lái)人為增加閱讀的困難。
3)在響應(yīng)式布局的年代展示字體
現(xiàn)在網(wǎng)絡(luò)上又能重新見到窄黑體、奇異風(fēng)格還有專門用來(lái)裝飾的字體。這些字體不僅加粗了,增加了風(fēng)格的多樣性,而且有抓住人眼球的功能,就像吸引人的報(bào)頭和長(zhǎng)篇文章中的章節(jié)節(jié)點(diǎn)。關(guān)于格式的建議不是本章的討論范圍,因?yàn)榫W(wǎng)頁(yè)的標(biāo)題經(jīng)常都為了吸引人訪問(wèn)而采用搜索引擎優(yōu)化的辦法,這和傳統(tǒng)印刷材料中標(biāo)題的功能已經(jīng)有點(diǎn)不一樣了。但是讓我們來(lái)看看在從來(lái)都是非靜態(tài)的網(wǎng)頁(yè)環(huán)境中設(shè)置標(biāo)題這件事情的潛在陷阱。
如果忽略屏幕方向和屏幕分辨率的變化,那么頂端skyline由多個(gè)字詞組成的標(biāo)題(比如說(shuō)瘦長(zhǎng)的無(wú)襯線字體)應(yīng)該能夠?qū)M向電腦桌面大小的節(jié)點(diǎn)起很好的作用,但在智能手機(jī)直式方向上可能會(huì)占用太多垂直空間,尤其是原文一行的標(biāo)題在智能機(jī)上要轉(zhuǎn)成兩行。雖然調(diào)小字體大小來(lái)調(diào)整有一定作用,但是效果未必能比在臺(tái)式電腦的文本清晰。
反之亦然。如果我們先為手機(jī)做字體設(shè)計(jì),那在手機(jī)小屏上效果十分出眾的醒目標(biāo)題直接搬到電腦上可能就會(huì)過(guò)于突出而影響整體效果。
在垂直空間更寶貴的情況下,比起擴(kuò)展的小字體,長(zhǎng)字體是更好的選擇。當(dāng)擴(kuò)展字體太小的時(shí)候,用相應(yīng)的長(zhǎng)字體替換通常都有不錯(cuò)的效果。
這個(gè)標(biāo)題用一行聯(lián)賽哥特式字體在手機(jī)上不夠清晰。設(shè)置多行的標(biāo)題又占用過(guò)多的垂直空間
Nimbus長(zhǎng)非襯線字體與nimbus擴(kuò)展非襯線字體的應(yīng)用
4)組合字體
組合字體是為了彰顯設(shè)計(jì)的張力,引起他人興趣。但是在許多情況下,一旦讀者進(jìn)入閱讀,好的順序和文章結(jié)構(gòu)加上好看的字形能增加閱讀的順暢性,尤其在低分辨率的屏幕下,但字體的細(xì)微之處不會(huì)那么明顯。如果不是那么必要,請(qǐng)不要太隨意的使用各種不同字體的組合,這是最后一條中肯的建議。
根據(jù)經(jīng)驗(yàn)來(lái)看,為了避免排版災(zāi)難,組合字體時(shí)考慮合適的行高。對(duì)比同樣字號(hào)的不同字體的行高是檢測(cè)這些字體是否能共存的一種試驗(yàn)。記住網(wǎng)頁(yè)排版是永不過(guò)時(shí)的。保持排版和諧不是項(xiàng)簡(jiǎn)單的任務(wù),相同基線的元素需要不同的字號(hào)來(lái)抵消不合適的行高。
Aller和Minion Pro,Georgia,Adelle字體組合。注意Minion Pro和Georgia為適應(yīng)行高所做的額外調(diào)整
5)最穩(wěn)妥的方法
遵循字體間的關(guān)系和用戶自身的常識(shí)是結(jié)合字體是最簡(jiǎn)單易行的方法。
較大字體體系中的一種可以與該體系中其他字體在任意軸上結(jié)合,如粗細(xì)、寬度和字形。因此使用同一家族中的字體會(huì)簡(jiǎn)便得多??纯春话恪⑿斌w、粗體和粗斜體等多種基本字體的擴(kuò)展字體或者大家族字體。擴(kuò)展字體包含從細(xì)到粗甚至多重寬度的所有軸。而大家族字體,也稱字體體系,則比擴(kuò)展字體多包含非襯線和有襯線字體,以及文本、特印字體、分級(jí)字體等。
其實(shí)也不用太在意確切的分類,因?yàn)椴煌淖窒翟诜诸惿喜⒉豢偸且恢碌?,而且擴(kuò)展字體和字體體系之間的分界線也并不明顯。例如,有的集合包含了不同粗細(xì)的無(wú)襯線和有襯線字體,而并沒有寬度的區(qū)分。記住,雖然絕大部分字體家族只有有限的基本字體,而只有少數(shù)幾十個(gè)字體家族的多樣性能夠滿足排版印刷的需求。(這幾十種在字體成百上千的今天,只占很小的比例。)假如在結(jié)合字體上有困難,那么從多樣的集合入手會(huì)是一個(gè)不錯(cuò)的選擇。
JAF Bernino Sans 有不同的粗細(xì)度和寬度。淡化的字母并非真正的斜體,被稱為斜羅馬字體。有的瀏覽器在用CSS快速寫入時(shí)能夠使字體變斜。但偽斜體很多時(shí)候都被看作違反排版規(guī)則的字體。
同一個(gè)設(shè)計(jì)師設(shè)計(jì)出來(lái)的不同字體通常都能夠更好地結(jié)合,因?yàn)樵诒壤?、形狀、比劃和角度上都有著同樣的基因。就舉幾個(gè)例子,Jos Buivenga, Veronika
Burian, Matthew Carter, Nikola ?urek, Adrian Frutiger, Jose Scaglione, Mark Simonson 和 Erik Spiekermann。這幾個(gè)都是我很喜歡的設(shè)計(jì)師,大家可以嘗試辨別他們的簽名。
最后一個(gè)方法是結(jié)合同一個(gè)字系的字體,因?yàn)橥窒低ǔ6伎梢蕴峁┠軌蚪Y(jié)合的字體。如經(jīng)驗(yàn)豐富的設(shè)計(jì)師和排印師所說(shuō),聰明的設(shè)計(jì)師會(huì)訂閱排版印刷相關(guān)的時(shí)事通訊,經(jīng)常接觸大量被認(rèn)可并反復(fù)使用的結(jié)合字體。日積月累,你的時(shí)事通訊文件夾會(huì)變成一個(gè)可以借鑒的檔案,這可是一個(gè)獎(jiǎng)勵(lì)。
如果你想繼續(xù)研究自己的字體,請(qǐng)?jiān)谧煮w間創(chuàng)造多一點(diǎn)對(duì)比已達(dá)到一個(gè)令人舒適的平衡。另外要避免有沖突的字體,否則會(huì)制造雜亂感而影響閱讀。然而,如果兩個(gè)字體過(guò)于相似,讀者可能會(huì)因?yàn)榭床怀鰠^(qū)別而感到乏味。結(jié)合兩個(gè)粗細(xì)相近(比如一般字體和半粗體,或者粗體和加粗字體)不應(yīng)成為慣性,除非你清楚自己要達(dá)到什么目的。
跟烹飪一樣,從準(zhǔn)備可食用的簡(jiǎn)餐開始,然后漸漸知道怎樣能夠毒不死人。你就可以把烹飪書放回書架,開始使用奇怪的香料,建立自己的烹飪程序。如果你萬(wàn)分需要實(shí)際例子,以下是幾篇十分有用的文章:
? “Best Practices of Combining Typefaces,” Douglas Bonneville
? “‘What Font Should I Use?’: Five Principles for Choosing and Using
Typefaces,” Dan Mayer
? “How to Choose a Typeface,” Douglas Bonneville
6)編輯附言
特印字體和裝飾性字體只適用于片段,比如標(biāo)題和醒目引文,因?yàn)樗麄兛梢栽O(shè)定基調(diào)并打破長(zhǎng)篇的重復(fù)性(還記得上文提到的閱讀時(shí)間評(píng)估嗎?)。文本字體注重實(shí)用性,適合用于長(zhǎng)篇閱讀。閱讀一段時(shí)間后很容易產(chǎn)生疲勞倦怠感,尤其是在有分散注意力的科技產(chǎn)品上閱讀,比如聯(lián)網(wǎng)的電腦。
“設(shè)計(jì)師喜歡平靜的灰白色調(diào),這堆讀者是個(gè)天大的災(zāi)難。”—Erik Spiekermann
偶爾插入一些停歇性質(zhì)的標(biāo)題或者醒目引文可以幫助推進(jìn)閱讀。由于醒目的引文突出了文章的重要信息,所以用特印字體展現(xiàn)會(huì)有更好的效果。而標(biāo)題是文章的一部分,因此用與正文稍有區(qū)別的字體為佳,比如大寫(原文為small caps翻為大寫僅為推測(cè))。像之前所說(shuō),這僅僅是穩(wěn)妥的方法,并非一成不變的法則。
7)人人有責(zé)
在你的決策應(yīng)由兩個(gè)重要的因素影響。⑴,如果讀者不喜歡你的排版,他們可以在應(yīng)用或者設(shè)備中的定制選項(xiàng)中更改設(shè)置。讀者更改設(shè)置時(shí)通常會(huì)選擇更一般通用的字體,這會(huì)一舉讓你的心血付諸東流。過(guò)去,在IE上把絕對(duì)單位的行間距與相對(duì)單位的字母結(jié)合時(shí),即使字母大小只有輕微上調(diào),也足以把頁(yè)面弄得亂七八糟。
第二,頁(yè)面上沒有折頁(yè)或者物理邊框是一把雙刃劍。好處是文本在屏幕顯示上基本無(wú)限制。而壞處是,由于很多時(shí)候頁(yè)面頂端和底端無(wú)法同時(shí)顯示,要設(shè)計(jì)平衡的排版就會(huì)變得很困難。因此,編輯輔助在幫助我們創(chuàng)造更好的閱讀體驗(yàn)上有重要價(jià)值。讀者把滾動(dòng)條往下拉的時(shí)候,不能期望他們像跑馬拉松一樣一路不停歇直到終點(diǎn)。
為所有人做設(shè)計(jì)的時(shí)候不要做任何假設(shè)。我們要接受一個(gè)事實(shí):我們的排版設(shè)計(jì)將會(huì)以一系列像素密度的形式顯示在硬件設(shè)備上。所以我們要確保設(shè)計(jì)出來(lái)的文本盡可能的易讀,無(wú)論讀者所處的空間、時(shí)間、認(rèn)知、社會(huì)現(xiàn)狀和身體狀況等因素有何種變化。過(guò)去的嚴(yán)格不變的規(guī)則已經(jīng)一去不復(fù)返,我們的責(zé)任是對(duì)一個(gè)項(xiàng)目盡可能全面透徹的了解,而后做出明智的決定,并且建立穩(wěn)固的設(shè)計(jì)概念。