<b>本文講的是以排印為本，從内容出發，</b>
<b></b>
在開始研究之前，我的架構非常幼稚。開始新項目的第一步就是用随機選擇的字型和頁邊距畫框框和文本塊。當然也不是完全随機啦，不過也沒有深入的思考。如果定一個頁邊距，我會從 20px 開始嘗試，如果要一個大一點的，就加倍，是以最後所有的頁邊距都是 20px，40px 和 80px 之類的。選擇字型和字号也是同樣的思路。字型永遠是從 16px 或 18px 開始試起，每次加 4px。最後字型也總是 16px，20px 和 24px 等等。
我入門設計這一行最開始是做平面設計。我在大學制作了很久的海報、書籍和雜志。要完成這些活計我總得事無巨細地搞定選字型、字号、頁邊距、網格等等的全部流程。好在有個出色的老師指導我。我喜歡做平面設計，現在也喜歡，但是 web 召喚了我，是以我轉而做 web 了，搞了幾個大項目之後終于算是邁出了重要的第一步。我發現自己在問，為什麼沒有用之前搞書籍和雜志的流程來做網站和産品。
我對目前在搞的項目都還挺滿意的，但是總覺的少了些什麼。可能是少了些匠心。在 Subvisual，我們關注流程，而且一直尋求改進之道。關鍵在于大多數流程關注的重點都是使用者體驗，這正是我們看中的。不過沒有好的使用者界面（UI）哪有好的使用者體驗（UX）。我并不是說我們的 UI 很糟糕。實際上我覺得 UI 非常不錯，隻是少了些許匠心。我們正為此努力。我求知欲旺盛，個性又倔強，正在想辦法解決這個問題。
下面我就帶你了解以排版為基礎來引導項目的過程。我們從藝術目标開始，到字型排版的縮放(typography scale)結束。我們的項目是 TurnGram，一個定期将自己的照片寄給所愛的人的服務，非常省事。設計沖刺已結束，原型完成并通過了測試，第一版即将面市。
從這個項目的美術設計或者說藝術方向開始談起。這時要考慮定下項目的基調，也就是想傳達給看浏覽我們網站的人的感覺。花點時間仔細閱讀項目素材，最好能看看其中的圖像。我們想通過内容來了解項目的氣質，然後寫下想到的詞：「溫馨、親密和懷舊」。
每個結構都需要層級。應該利用讀過的項目内容來定下項目層級。決定什麼是文本塊，什麼是大标題，什麼是二級标題，諸如此類。記下來，給每種内容都找一些例子。
H1 ── TurnGrams 中最惹人愛的部分；
H2 ── 收件人姓名和使用指引；
H3 ── 面向海外使用者和郵箱嗎？；
文本塊 ── 我想每月給媽媽（Maria Eastman）寄一些家庭照片。她喜歡把照片擺滿房間，把孫子的近照拿給客人看。是以務必在照片選集中盡量多加些孩子的照片。；
按鈕 ── 現在開始；
如果沒有更多可以覆寫的用例，就是時候做最重要的樣式決策了。下面就來選取會用到的字型。
從現在起，我們的每一個決策都要考慮可讀性和可識别性[^1]。正如維基百科所描述的，可讀性是指讀者可以輕松讀懂書面文字，可識别性是指讀者可以清晰地分辨出文本中的每一個字元。接下來的博文我都緻力于這兩點。
Robert Bringhurst 給出的前兩個建議是「考慮字型最初是為什麼媒介設計的」以及「當使用活版印刷體的電子改版時，選擇字型要形神兼備」。確定你采用的字型是為螢幕顯示設計的，如果不是，則要檢查字重和比例是否合适。
「選擇在最終列印出來條件下能存續下來的字型，最好是發展比較好的。」根據這則建議，我們必須牢記選用的字型會被渲染到什麼字号，這事關可識别性。在選擇字型之前，看一下樣本，了解其最優的渲染字号。我們的例子有很多長文本塊，是以我們的目标字型的基礎字号是 20px。舉個例子，如果你在設計博文頁面，你會想要使用基礎字号在 20px 到 24px 之間，x 高（小寫字母高度）合理的字型。這是我經常應用到我的工作中的一條規則，但是和所有規則一樣，如果我們覺得可以采用其他方式，規則也可以打破。
「選擇同時适合任務和主題的字型。」我們項目的氣質是溫馨、親密和懷舊，是以我們應該選擇能夠相稱的字型。
「選擇可以提供你想要的特殊效果的字型。」如果你的内容中含有帶有大量數字的文本，舉個例子，你就想要一個仔細打磨了不齊線數字[^2]的字型。同理，如果想要強調，可以使用斜體、黑體甚至小型大寫字母。
「先嘗試隻用一套字型家族。」我們看到有很多項目使用了兩套字型家族，其實一套就足夠了。我們應該充分利用字型提供的資源，無法滿足時才去訴諸新的字型。
總結一下，選擇字型時應該銘記的準則有：
確定字型是為在螢幕上呈現而設計的；
字号為 20px 時看上去不錯；
字型要利于顯示長文本，能夠展現溫馨、親密和懷舊的特質；
了解你的内容是否需要「特殊效果」
充分利用字型資源。
差不多準備好了。我們這裡還可以嘗試品牌推廣用的字型。如果你在開發産品的網站已經有完成了的品牌推廣項目，你應該嘗試使用它的字型，或者至少是和它在放在一起會比較和諧的字型。不過有時你可能不喜歡品牌字型，這樣也沒問題。我們就常常遇到這種情況，是以我們就換了一個方向。盡管堅持一種字型是個好習慣，我們覺得有使用别的字型的需求，因為我們需要額外的一層對比。
在協調兩種字型時，我們需要對比效果，同時有一些勾連的細節。首先，Tisa 是襯線字型而 Effra 是無襯線字型，這就是很好的對比。它們有近似的 x 高，這樣我們就省去建立兩套比例的麻煩，稍後我們還會細談。Effra 結合了幾何基礎和人本主義細節，和 Tisa 既有對比效果又有關聯的細節。
上一步我們講過的幾個關鍵點在這一步會很有用。我之前說過，要選擇字型必須知道字型的職能所在。我們知道我們的網站有些長文本塊，而且 20px 的尺寸正合适，這就是我們的基準字号。
有了基準字号就可以定下基礎行高（line-height）。行高是字号加上行距（leading）。行距是文本行的間距。如果想讓讀者快點讀完或者需要節省空間，可以減少行距，就像圖書和報紙做得那樣。如果需要想提高閱讀體驗可以加大行距。
既然我們需要更多資料，我們得有一個比例尺來支撐背後的邏輯。
通過使用文化相關，在曆史上令人愉悅的比率來建立子產品尺度（modular scale），然後以此定下我們作品中的度量。我們就可以達到視覺上的和諧，這種和諧是無法通過随意的，正常的或者簡單除法得到的數字實作的。
Tim Brown
小三度（1,2) <code>20 * 1,2 = 24</code> ── 快速閱讀并節省大量空間；
純四度(1,333) <code>20 * 1,333 = 26,66</code> ── 相當的閱讀速度并節省一定空間；
純五度(1,5) <code>20 * 1,5 = 30</code> ── 非常舒适的閱讀速度；
黃金分割 (1,618) <code>20 * 1,618 = 32,36</code> ── 超級輕松的閱讀速度。
比例無處不在，在分子，花朵甚至人體中都可以觀察到。這就是為什麼子產品尺度比随機選擇的數字更協調的原因。如果我們看到一些東西的比例和我們人體的比例一樣，就會顯得特别協調。
「很簡單，不是嗎？而且核心思想非常基礎。但是奇怪的是，非常容易既低估其可能的影響力又高估其複雜度（至少你一旦開始深挖就會有此感受）。
Billy Whited
它們最早是表示音程的術語，在随後的曆史中，建築師，畫家，音樂家，木匠等人都采用過相關的概念。是以我們為什麼不試一試呢？
子產品尺度會帶來視覺上的和諧，充滿韻律。跟音樂一樣，我們的網站和産品需要講得通的流暢。
我們已經選好比例，下面就是使用了，生成自己的印刷尺度。還記得我們在第二步中定下的分級結構嗎？現在來轉成數字。
H1 ── <code>28,28 * 1,414 = 39,988</code> ~ 40px
H2 ── <code>20 * 1,414 = 28,28</code> ~ 28px
H3 ── 20px (加粗)
文本塊 ── 20px (基準)
标題 ── <code>20 / 1,414 = 14,144</code> ~ 14px (大寫，加粗）
我先從基準開始，然後依據子產品尺度給出的數字，同時内心牢記分級結構。對于按鈕和标注，我們會用 14px，因為可以用大寫字母，是以不會影響可識别性。當你做決策時，一定要做好測試，不要盲目追求比例。有可能到頭來發現比例根本不适合你的項目。這種情況下就要返工再嘗試新的比例了。我稍後再談行高的設定，到時候你就懂了。
網格可以處理視覺組織的問題。有了網格的幫助，組織文本，圖像以及我們内容的其他元素都變得輕松。正如 Josef 在書中所言，隻有想好了要用哪些文本和圖像之後才能想清楚網格。内容自身來決定網格的大小。
我們已經有一個尺寸了，列間距。列間距應該和基準行高一緻，28px，因為這會是最常用的頁邊距。
文本行應該平均有十個單詞，這就是我們的列寬。我們從内容中選幾個片段，置為 20px/28px，然後将寬度設為我們選的比例。
452px 比較合适。文本行過長或過短都不好。不然閱讀容易勞累，影響可讀性。
<a href="https://github.com/xitu/gold-miner/blob/master/TODO/typography-as-base-from-the-content-out.md" target="_blank"></a>
我們從 1440px 的寬度開始試起，這是我們想在項目上用的最大寬度。在 1440px 的寬度下，可以有三個 452px 的列，列間距則是 28px。這樣我們的網格的總寬度實際就是 1412px。
接下來根據 Josef 的建議，如果有更多列，就可以更靈活更有創造力。是以不妨試試将現有的列一分為二？<code>452(現在的列寬) - 28(列間距) = 424; 424 / 2 = 212px(新列寬)</code>。這樣網格大小不變，變成 6 列，文本塊就可以多兩個列和一個列間距可以占據。
列數取決于你想給内容多大的動态程度。
水準網格确定之後來處理垂直網格。
基線是安放内容的地方。有了基線，對齊元素就輕松許多。是以我們的基線定為半個行高14px，剩下的交給比例尺。
14,144 ~ 14 ── 元素中的間隙；
28,28 ~ 28 ── 子區域和文本塊或者其他元素；
39,988 ~ 42 ── 子區域；
113,052 ~ 112 ── 各種各樣的區域。
既然搞定了基線，現在可以回到印刷尺度了。每行都是 14px，是以比例也要與之對應。
已經有了基準行高，28px，然後是基準字号，20px。文本塊 ── 20px ── 行高 ── 28px ── 兩倍基線。
H1 ── 40px；要算出 40px 字型需要的行高，需要做一次叉乘。是以 <code>20px -> 28px, 40px -> x, x = (40 * 28) / 20, x = 56</code>。把數字代入基線可以得到 56，不過得四舍五入一下。H1 - 40px/56px - 4 基線；
H2── 28px/42px ── 3 基線；
H3 ── 20px/28px ── 2 基線；
标題 ── 14px；這個情況比較複雜。字号如果不大于基線，就需要給予更多的空間。是以要額外的基線。如果标題和文本塊挨在一起，這會帶來不平衡。這個問題我仍沒有解決。标題 ── 14px/28px ── 2 基線。
很容易覺得我們折騰的這些對使用者沒有什麼實際的影響，但是我可以談談對我自己的改變。在這段旅程開始之前，我對這件事沒有明确的意見。不過一直感覺缺失了什麼東西，這種感覺一直催促着我去學習了解。現在做完幾個網站和産品之後，我可以說我的産品協調，内容支配着外觀。可能隻是心理上的感受，但是我堅定的認為并不是這樣的。人們可以更好地閱讀我的作品是因為精心設計的尺度。人們不會輕易感到無聊是因為我的網站現在變得更加動态。我們設計師必須考慮到每天使用我們的産品的使用者的感受，他們值得我們為之付出的所有努力。我堅信這就是會對産品的存在期産生巨大影響的東西。
如同我們在 Subvisual 所做的一切，這個過程也不是一成不變的。我們不斷試圖提升自己，改進自己做事的方式。事實證明這是非常有價值的系統，即使有瑕疵也可以輕松地用其他方法來解決，比如我們也在用的 8pt 網格。此外，這個過程中的變量過多，無法代入設計師和程式員間的溝通之中。這樣和那樣的原因促使我們建立了自己的結構，同時結合了我們嘗試過的所有系統上的最佳實踐。我們還在調試中，很快就可以和大家分享了。值得等待，我保證。
<b>原文釋出時間為：2017年7月12日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>