原文為 How to use typography in UI Design，本文章已經過作者同意翻譯並轉載，歡迎分享文章連結。
原作者 Wojciech Zieliński 為來自波蘭的UI/UX設計師，現任職於 inFullMobile。
基本介紹
我必須要公平地說，排版是 UI 設計中最難的部分。它們存在於各種形式並與我們相處了很長的時間。還好我們有許多規則、實踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中，我將給你幾個實用的提示和技巧讓你可以在專案中使用。
超越理論的實際案例
雖然排版是一個非常吸引人的主題，但我不會用太理論的東西來煩你。也不會解析字母和連字等等關係，以下我們將直接進入練習。
想想使用者
我們應該記住美學之外我們還有使用者。你正在設計的不僅是高解析度的高級設備，而是更多不同的設備…
所以你使用的字體必須靈活。你的字體應該提供各種重量、在特殊符號中的寬度範圍，它也必須要渲染地非常好。必須要注意這些方面，這非常重要，確保你的用戶不會因你的無知而受苦。好的排版對觀看者來說是“沒有感覺”的，而不好的排版呈現在螢幕中則會感到非常可怕。
了解是什麼原因讓字母可讀性更高，可以讓我們更好的去檢視我們應該為我們的介面選擇什麼樣的字體。
易辨性 (Legibility)
易辨性是我們可以多輕易在一個字體中區分兩個字母。這是非常專注在字體、字母與細節的細微排版。當然，這也是最重要的因素之一。不是所有的字體當初被設計出來都是都是容易閱讀的。最常見的問題是大寫的字母 “I” 和小寫的 “L” 之間沒什麼區別。你必須避免這種字體，因為如果使用者在小型顯示器上閱讀可能會出問題。
X 高 (X-height)
我們讀的字母有 95％ 是小寫字母。大小寫字母之間比例上越大的字體可讀性更高。
字腔 (Counters)
我們的字母中還有許多空白。例如看看 o、u、d。這些空間被稱為字腔，排版專家相信這個空間越大可以幫助我們更容易分辨這個字母。
重量 (Weight)
較輕的字體通常比較重的類型的字體更易辨認。重量和字腔有關，必須考慮到不能去修改文字的形狀。
<p style="color:#ccc; font-size:12px;">哪一個更容易閱讀？</p>
最佳文字筆劃粗細約為 x-height 的 18％。
寬比例 (Wide Proportion)
字符的寬度相較於它的高度被稱為比例。一般來說，比起壓縮過的字母，你會想要較寬的字母，因為它有更好的易讀性。
第一眼的差別是很微小的
字距 (Letter spacing)
沒有一個根本的方式來計算字母的間距，但大多數時候越大的文字大小需要更小的字距。字型有時顯得太開所以你必須要手動調整間距。對UI設計來說它通常出現在標題時。
再說一次，其實差異非常微小
易讀性 (Readability)
易讀讀性關乎於整體的閱讀體驗。我們可以輕鬆掃視文字編排、區分標題、副標題、段落和區塊。這樣的宏觀排版使文字更具視覺吸引力，也令人更想去閱讀。這真的是一門藝術，利用對比、顏色、大小、構圖和微小的細節成就更好的閱讀體驗。
襯線字 (Serif) 對上非襯線字 (Sans Serif)
歷史告訴我們襯線字更易於辨識。他們在傳統印刷中使用了很長的時間，同時也真的提高了大型區塊文字的閱讀體驗。襯線字讓我們的視線更容易穿梭於文字間。但這個原則在網頁和手機上則是不一樣的。其實有些無襯線字體也是滿容易閱讀的，且目前視覺設計來說更喜歡更簡單無裝飾的字體。在網頁瀏覽特別是手機上，我們其實可以看到更多的無襯線字體。而且螢幕顯示器並不是一張紙，通常我們不會在網絡上閱讀很長的文章，而在應用程式中更是如此。
在 X (原 twitter) 中沒有半個襯線字，但在 Medium 中有襯線字卻很合理
但這一切都取決於你的專案內容，以及用戶會如何使用您的內容。例如在 Medium 上我們使用的是襯線字，因為大多數時候你會在 Medium 上讀很長的文章，所以這是一個不錯的設計方法。
行高 (Line height)
當講到行距時我非常建議使用黃金比例。
將你的字母大小乘以 1.618，你將會得到完美的行高。
如果你是有經驗的老手的話，你可以手動調整這個結果。當然，這個規則也有例外，如果必要的話你隨時可以打破這個規格。
都是微小的差別，但卻大大影響我們的可讀性
文字區塊的寬度
這就像我們在走在薄冰上。太寬的對於文字區塊會讓我們的眼睛很難找到下一行文字。但如果太窄的話，眼睛將需要從一條線跳到另一條線，這樣會經常打破閱讀節奏。我們的潛意識在跳至下一行時會充滿活力 (只要它不那麼頻繁)。
為了激勵讀者並讓他們持續閱讀，你的每行文字長度應該有 50 到 75 個字符。
顏色
這當然取決於你的專案，但在這裡我想分享一個技巧。用下面的方式選擇你的主要顏色來取代純灰色 (或黑色)：
看粉紅三角形的區塊
這樣會比使用常見的 #CCC 更獨特且更有吸引力。這些小細節將會讓你的視覺體驗更好。
留白空間
這在滿多的書籍和出版物中是一個滿大的議題，但是當涉及到排版的話你需要記住這一點：
留白的基本作用是減少讓閱讀者一次看到這麼多數量的文字
這讓我們的版面佈局更容易快速掃視，並且不會讓我們的內容負擔太重。白色的空間引導我們的眼睛穿梭在佈局中並且創造規則、精細和優雅的感覺。
層級 (Hierarchy)
層級結構定義了我們如何閱讀內容。它告訴我們如何區分標題、副標題和正文。我們可以透過使用不同的對比度、文字大小、內間距、外間距等來實現這一點。我們必須掌握這一個重要的技巧以獲得良好的可讀性。
注意細節，日期的顏色和描述的顏色不同，但是一開始很難看出區別。Event_Discovery_App by JakubAntalík
分隔器 (Separators)
將內容分成幾個部分的好方法是使用分隔器。目前最流行的是簡單的一條線。它是個微小的方式但仍在可讀性方面發揮重要的作用。
另一種方式是現在非常流行的卡片式設計。這個方式當內容不相關的時候使用真的很棒。對於常常用大拇指使用手機來說非常的棒，而且也讓我們方便掃視整個佈局。
兩個例子。附近的景點
重複和節奏
這是 UI 設計中最耗時的部分 (至少對我來說)。任何重複的元素可以提供一致性，重複的部分可以是位置、文字大小、顏色、內距、外距，一些規則的使用等等。例如我通常讓內距/外距的大小為 5，所以它看起來會更一致 (這是我的規則之一)，「重複」將產生「節奏」。
結論
學習排版技巧是一個迷人的旅程，而且當你的的技能開始進步之後結果是讓人非常滿意的。而這個技能不是從閱讀Medium文章就能取得，而是需要學習和許多的動手練習。所以打開你的 Sketch (對不起 Photoshop 你這隻巨大的恐龍)，動手開始創造一些超棒的作品吧！
“藝術的偉大不是常見的，而是獨一無二的。” — Isaac Basvenis Singer（1904–1991）
本文由 Lin Simon 翻譯，如有翻譯上的錯誤或不順暢的地方還請各位多多指教，有任何建議也歡迎隨時告訴我 :D
如果喜歡我們的文章，歡迎分享給你的朋友，同時也別忘了 Follow 我們的 Facebook粉絲頁 和 Publication，我們將持續為你分享設計知識與靈感，有任何建議或合作需求也歡迎來信: aapdgo@gmail.com 😊
