網站設計西文字體混搭指南 A Guide to Combining Fonts
混搭字體可以說是字體排印學（Typography）中最棘手的部分之一，而這份指南將透過範例告訴你如何正確地搭配多個字體。
這份指南出自資深使用者經驗設計師 Matej Latin 所著書籍《Better Web Typography for a Better Web》第五章，該書囊括了13個教導讀者如何設計與建立網站的章節。
※本文經原作者 Matej Latin 授權翻譯
你真的需要一個以上的字體嗎？
早年人們常將網路上字體編排不好的網站，歸咎於可供運用的字體選項太少，不過我們已經了解到字體編排並不僅僅在於字體的選擇，其中一個目標（也可能是最主要的）在於將資訊以易讀且容易消化的方式呈現。在我們開始著手尋找能夠加入現有設計中，並且適合與內文字體相互搭配的字體之前，我們可能要先捫心自問：「我真的需要一個以上的字體嗎？」千萬不要只是為了使用而使用，在字體排印學中並沒有一條準則是告訴我們使用越多的字體越好（相反的，可能越少越好），追加使用其他字體無法保證能提升網站的編排水準，因此我傾向於維持我的編排簡約且單純，就像機械一樣——零件越少，就越不容易故障。
It is a safe rule not to mix different styles of letters on the same page, or different faces of type in the same book.
安全守則是不要在同一頁中混用不同風格的文字，也不要在同一本書中使用不同的字型。
— Eric Gill
儘管 Eric Gill* 本身充滿爭議（從他的作為來看），毫無疑問地， 他絕對是一位字體巨匠，在字體排印學上他有著相同的見解，使用多種字體編排時，比起你使用單一字體編排來得更好的情況並不多見。不妨試著自我挑戰看看只用一種字體來設計網站，即便只是為了實驗性質或是有趣使然，我想每一個人都會從中獲益匪淺。
我（Matej Latin）在最近重新設計了自己的個人網站，在當中我想要強調的是極簡主義（Minimalism）佔了我生命中的很大部分，為了用最適合的方式呈現，我決定只採用單一字體來設計，同時我也希望這個網站是以文字編排呈現為主（準確地來說 ，95% 是依靠文字編排*），在這個標準之上，讓整件事變得更具難度及挑戰性。我必須找到一個風格乾淨、清晰且簡單，甚至更能表現這些這特質的無襯線體，最終我挑選了出自 Canada Type 的 Gibson 字體家族，它有著現代卻親和的視覺風格，並且在大字級的呈現上也很棒。如何在網站上使用正確的字體編排將會是一個挑戰，而在設計上我決定採用不同的字級、字重以及只使用兩種顏色——深灰以及中灰來執行。
我將這個範本也放入了書中，因為它成功地展現了如果只用一個字體能夠做到什麼地步——不管是 John Baskerville 那樣的字體巨匠，亦或是像我這樣的自學設計師。你還認為在你的專案中需要其他字體嗎？別擔心，讓我們繼續往下看。
找出字體搭配的四步驟流程
如果你依然認為你的網站需要一種以上的字體，那麼系統化的流程將能給你指引，在此介紹的第一種方式是改編自 Tim Brown* 的著作《A Pocket Guide to Combining Typefaces》中的版本，可以分成下列四個步驟：
- 決定內文主要使用的指標字型（Anchor Typeface）
- 找出幾個可能的次要字體搭配選項
- 評估相互搭配的可能性
- 排除/挑選搭配字體
其中有兩種方法以及五條準則，能夠幫助你順利進行圖表中的第三個步驟，讓我們來看看吧。
兩種用來評估字體搭配的方法
對比以及協調是兩個最基本的設計原則，不管在建築或是藝術領域上都至關重要，當然也適用於字體排印學。在評估過程中有些情況可能只適用於對比搭配或是協調搭配其中之一，有些則是兩者皆適用，讓我們從現實生活中的範本對照看看。
對比搭配法
看看眼前這張辦公室的照片，你會如何形容它呢？感覺很現代，對吧？不過除此之外還有一些地方不一樣，它同時也讓人感到溫暖，有別於幾近未來主義的現代感，紅磚牆面賦予了生氣與舒適感，如果少了它，整個房間將看起來更冰冷。同樣地，我們可以將其運用在字體搭配上。
我們該如何將其運用在字體編排上呢？讓我們先將 Baskerville 字體使用在內文上，Baskerville 誕生於西元1754年，由 John Baskerville 所設計，在當時，作為劃分字體排印學分水嶺代表「過渡時期（Transitional）字體」濫觴，它是一款具有現代感的字體，時至今日，Baskerville 已經成為經典的象徵，它能夠喚起人們的信賴感以及親切感，在知名記錄片導演 Errol Morris 所主導的實驗*中，Baskerville 被認可為最具信賴感的字體。現在我們將它與全大寫的 Futura 字體標題搭配，Futura 是由 Paul Renner 於西元1927年所設計，它是演繹幾何圖形美感的 Geometric 無襯線體之一，當它被設計之初，就已經是一款十分現代的幾何無襯線體，直至今日，它摩登依舊。
我們的設計看起來豐富、高尚，充滿故事性，不過最重要的是——這是可行的，這個設計使用了不同時期的兩款經典字體，各自做為介於現代/冰冷與經典/溫暖的對照組，當它們搭配在一起，就如同像是火與冰轉化而成的流水一般生氣盎然。
協調搭配法
協調與對比可以說是截然不同，所以當你看著這張辦公室的照片時，你會注意到它從頭到尾都非常現代感，極簡且沒有多餘裝飾的空間，搭配摩登外觀的傢俱，我們要怎麼將其在字體編排中重現呢？
我們在標題上使用 Din Alternate 字體與內文的 Helvetica 字體來做搭配，它們看起來同樣具有工業且現代感的外觀，擁有許多共通的特色讓它們看起來更為相似，不過它們同時也有足夠的差異，使彼此能夠搭配得當。
五條評估字體搭配的準則
運用具有相同 x 字高的字體做搭配
還記得我在剖析字型的章節中所提過的 x 字高（x-height）嗎？另一種評估字體搭配的方式，就是仔細看他們彼此的x字高是否相吻合，至少應該要非常接近，具有相同 x 字高的字體在搭配時看起來份量是相似的，特別是在垂直排版的韻律感（vertical rhythm）上。（我們將會在下一個章節提到）
這個搭配準則不管在對比搭配法或是協調搭配法上都同樣適用，你可以選擇相符的 x 字高，或是 x 字高截然不同的字體，除了採用介於這兩者中間的。
運用同一公司的字體做搭配
從過去我所做過的字體排印工作中我留意到一件事，在字體選擇上，我總是傾向於某些字型公司的產品，來自德國的 FontFont 就是一例——我是 Erik Spiekermann 作品的粉絲，英國公司 Dalton Maag 則是另一個例子，曾有個機會我花了點時間大致瀏覽了這兩間公司所出品的所有字體，幾乎找不出我不喜歡的字體，看來他們的風格與我最常選用的相符，而那並非巧合。
你想，當一個字體設計師開始設計新字體時，很少是完全從草稿開始，他們通常是基於現有的字體基礎上來設計新字體，儘管使用了相同的結構來設計，但是這些字體仍然會保有設計上的原創之處，也因為擁有共通的基本架構，這些字體通常能夠良好地彼此匹配，因此使用同一公司出品的字體來搭配是相當明智的。
運用同一設計師的字體做搭配
同理，就像採用相同公司所設計的字體來搭配一樣，也可以採用相同設計師所設計的字體來搭配，就像前面所提到的，字體公司通常使用一套共通的基本架構為基礎來創作不同字體，對於字體設計師來說，道理可能也相仿，舉例來說，將 Adrian Frutiger 所設計的字體相互搭配，肯定不會出錯。
我依舊建議將兩個字體相互重疊來比較，就像我們對 Apollo 與 Univers 所做的一樣，試著確立它們是否能相互匹配，這個方法與比較 x 字高的方式很相似，不過更加著重於整體的比例。在這個重點上，你需要真正地去研究這兩個字體，這種搭配方式通常用於協調搭配法而非對比搭配法。
運用時代背景做搭配
透過創作時期來評估字體搭配，不管是在對比搭配法或是協調搭配法上都適用，你可以挑選屬於同一時期但年代相距甚遠的字體來搭配，理論上都應該行得通。
我發現這個方式最適用於在數位時代以前所設計的字體，現在有太多的字體同時被設計出來，如果只用這個原則來作為字體搭配的依循可能並不足夠。
使用「超級家族」字體做搭配
所謂的「超級家族」字體（ font superfamily or typeface superfamily）包含了無襯線體以及襯線體， Merriweather 與 Merriweather Sans 就是絕佳的例子，當然也包含 Roboto 以及 Roboto Slab ，使用「超級家族」字體的話絕對不會出錯，這是一個提昇字體搭配技巧的入門方式。
字體搭配範例實作
這份指南是改編自書籍《Better Web Typography for a Better Web》的第五章，因此在這裡讀者通常已經讀完四個章節，並且充分了解挑選主要（指標）字體的步驟。
指標字體
好的，在上一章我們已經獲益良多，現在我們就來運用所學到的新知，遵照先前的步驟我們應該從挑選標字體開始，而我們在第三章已經決定了我們將使用 FF Meta Serif 作為主要字體，現在讓我們直接跳到第二個步驟。
找出可能用來搭配的候選字體
我們將找出可以用在標題文字上的字體，現在來複習一下在選出內文字體前，我們曾經寫下的關鍵描述：
- 這個網站必須要讓人感到現代且新穎，內文必須容易閱讀並且能夠滿足忙碌且好奇的科技愛好者
- 這個網站必須是內容導向，包含少量但是高品質且目標精準的廣告
- 就如同任何一個對流量與使用者友善的網站一般，它必須在多種載具上都能夠順暢運作
現在寫下幾個將會幫助我們找出標題字體的關鍵點，如同我們找出內文字體一樣：
- 肯定是無襯線體（相較於內文來說，我們需要一些與其具有強烈差異的字體）
- 必須要有現代感，也就是說會具有較高的 x 字高
- 在較大字級上能有良好的呈現
- 具備較多的字重與風格為佳
- OpenType 並非必要條件（除了連字*，我很少在標題上用到 OpenType 的其他特性）
- 只需要支援英文字型子集
- 在共通螢幕上都有良好的渲染結果（包含行動裝置與桌機）
在寫完這些之後，我們已經準備好開始搜尋了，瞄準 TypeKit 並且找出幾個候選字體，設定好篩選條件以便能夠只搜尋無襯線體，較粗的字重與較高的 x 字高被推薦用在標題字體上，較高的 x 字高除了符合我們的搜尋條件，同時也與內文的 FF Meta Serif 相配。
我從40項搜尋結果中找出了候選名單：Korolev、FF Enzo、Quatro、Camingodos 以及 JAF Facit，總共只有五個，我想對於所要尋找的字體我有著良好的概念。
評估字體搭配
由於我們只有五個選項需要投入試驗，就直接將它們加到 TypeKit 服務（*現已更名為 Adobe Fonts）的字體專案內，並將它們載入至範例網站上。接著我們從範本內容中複製標題文字，然後把這些標題加到範例裡。
你可以在 CodePen 上檢視這個章節的原始碼範例。
首先，讓我們來評估候選字體們的預設尺寸以及顏色，也許我們不需要探究得太深入就能從中排除一些選項。由於 JAF Facit 看起來似乎有哪裡不太對勁，所以我們可以先將它排除，接著看到 Quatro 的部分字母，像是「w」或是「y」，在各種意義上都被設計得太過獨特且醒目了，因此將它從清單中打叉吧，有時候就是需要簡單一點。再來仔細看看 FF Enzo 所呈現出的清晰人文風格（令人矚目的對比與傾斜度）並不是我們想要的，因此它成為清單中第三位出局的字體。
透過實際搭配來排除
在評估的過程我們已經先排除了三種搭配可能，留下兩種可能性較高的候選字體：Korolev 以及 Camingodos，讓我們看得更仔細一點，並且進一步試做看看。
Camingodos 外觀上同樣具有具有人文感，但並不像 FF Enzo 那麼明顯，字母看起來偏窄且具有較高的 x 字高，字體的方塊感讓我猶疑，感覺上像是想要帶有科技感但又不全然是（因為人文風格的部分），我們再來仔細看看 Korolev。
Korolev 令人感覺很獨特，字母較為瘦長，偏高的 x 字高讓它視覺上看起來像是窄版（condensed）字體，雖然也有點方塊感但不像 Camingodos 那麼明顯，我們試著將這兩個字體加上顏色，模擬它們實際可能被使用的樣子。
接著我們嘗試視覺上較細的字重，以中體取代粗體。
事情看起來變有趣了，Korolev 在視覺上變細之後感覺活靈活現，現在它與內文完全形成了對比，另一方面來說，Camingodos 則是看起來顯得違和，它缺乏辨識度以致於無法與內文字體相抗衡，而最主要的問題在於字體本身所形成的柵欄*（picket fence）上與內文感覺太過相像，造成無法真正形成對比，但是在某些程度上卻又具有對比的問題，「對比」這件事在字體排印學上來說，要不就是足夠明顯，要不就是幾乎不存在，這使得 Korolev 成為實至名歸的贏家，我們最終的成果如下：
由此查看線上運作的實際範本 betterwebtype.com/book/c5
書中還有更多有關網站字體優化的部分
至此，本書帶你遊覽了網站字體編排上的韻律、字階比率（Modular Scale）以及何謂「更具意義的字體編排」、編寫頁面以及響應式字體編排等，同時探索了四個關於微觀編排的額外章節，隨著你學習進度提升，這個即時網站範本也將越趨完整。
在此你可獲得專屬的《Better Web Typography for a Better Web》電子書限時優惠折扣，而實體版本也同樣適用。
字體搭配速查表
基於這份字體搭配指南，我設計了一份雙面可供印刷的字體搭配速查表，你可以下載它並將它印出來，然後接下來就看你的精彩表演了。
有關字體混搭的資源與相關工具
這裡是一份超酷且實用的字體搭配工具與資源清單：
- Combining Typefaces
Tim Brown 的免費字型匹配指南。 - Font combinations
線上設計工具平台 Canva 所提供的字體搭配工具，幫助你找到超讚的字體搭配建議。 - Typespiration
免費的字體搭配與配色範例，同時提供快速使用的原始碼範本。 - Archetype
透過瀏覽器即時創作優美的網頁字體編排設計。 - FontPair
提供超酷網站字體搭配案例的部落格。 - Typ.io
提供字體搭配靈感。
譯注
① Eric Gill，著名字體 Gill Sans 的設計師，同時也是二十世紀初最偉大的英國藝術家之一，畢業於中央聖馬丁藝術與設計學院，因為在私生活上荒誕且複雜的性行為引來諸多爭議。
②典故出自介面設計大師 Oliver Reichenstein 在 2006 年的文章「Web Design is 95% Typography」。
③ Tim Brown，Adobe Typekit 以及 Adobe Type 部門負責人，著有《A Pocket Guide to Combining Typefaces》，與提出「設計思考（Design Thinking）」概念的 IDEO 執行長 Tim Brown 為不同人物。
④ 奧斯卡金獎紀錄片導演 Errol Morris 在 2012 年時與 The New York Times 一起策畫了一項字體如何影響信任感的實驗，他寫了一篇包含意見調查的文章「你是悲觀者或樂觀者？」，並將文章中所摘錄著名科學家 David Deutsch 針對小行星撞擊地球機率的引言部分，以六種不同字體的版本顯示並讓讀者進行投票，總共包含了 Baskerville、Computer Modern、Georgia、Helvetica、Comic Sans 以及 Trebuchet 這幾種字體版本，從最終所收到的 45,000 份有效投票結果中，證實了大多數讀者都認為以 Baskerville 所呈現的內容最具可信度。
⑤ 連字（ligatures），又稱合字或合體字，在西文字體排印學中是指將多於一個字母合成的情況，最常用的就是fi和fl，在OpenType字體格式中支援單一個字符對應多個字形，可用於連字上，因而作者提到連字是其唯一會用到的OpenType特性。
⑥ 在《字型散步》共同作者蘇煒翔的「英文UI字型大評比：易讀性測試」一文中曾經引用 FF Tundra 的設計者 Ludwig Übele 受 I love Typography(ILT) 專訪時的談話，其中提到 “A narrow typeface creates a picket fence or staccato effect” ，意即在窄版字體中段區域裡「有如尖樁籬笆般地斷續效應」。在美國出版商 Chronicle Books 的字體叢書《Getting it Right with Type: The Dos and Don’ts of Typography》「Reading Narrow Typefaces」章節中，也截取了窄版 Akzidenz Grotesk 字體中段作為柵欄區段的圖例。
本文譯自資深使用者經驗設計師 Matej Latin 於所著書籍《Better Web Typography for a Better Web》摘錄專文「A Guide to Combining Fonts」，已獲作者授權翻譯，該書目前尚未有中文版本上市。不過在專書網站上列出許多西文字體相關資源推薦，同時也針對網頁設計師與開發者提供免費的七堂網站字體課程，對西文字體運用有興趣的讀者不妨上去看看，或是直接與原作者交流。
Medium 上的原文連結：
A Guide to Combining Fonts
