昨天我們了解到顏色在搭配使用上呈現不同的色彩感受，在互動元件上巧妙的搭配能吸引注意力，顏色也能代表程式狀態，在不同的配色下仍然需要保持內文能清晰閱讀，在淺色及深色主題下有不同的設計方法及色彩運用，色彩的飽和度及對比度都關乎整個應用程式的易讀性。

今天我們進入到 Material Design 中 Typography 文字排版的章節，讓我們繼續看下去吧。

Typography 文字排版

The type system 樣式等級
Understanding typography 了解排版
Language support 支持語言

The type system 樣式等級

文字樣式尺寸提供一系列的樣式對照，並支持 13 種樣式組合，樣式組合可以依據不同段落需求套用在文字排版上，每一種樣式都有規範好的使用方式及含義。

本圖片截取自 Material Design。

相信大家應該都對 Google 字體不陌生， Material 提供了可以快速顯示文字樣式的樣式尺寸產生器 根據您選擇的字體提供 13 種樣式組合呈現外，點選樣式即可查看更細部的設定，點選分頁 CODE 還可以看到 CSS 樣式語法中的字型和字體大小。

本圖片截取自 Material Design - Type scale generator。

字型樣式組合適用於標題、副標題、內文、說明文字、按鈕和眉題，並設定字體租細、尺寸和文字間距，藉由差異化來傳達畫面的層次外，也突顯重要的內文。如果有興趣可以下載 Roboto字體比例來研究喔。 (需由 Sketch 或 Adobe XD 開啟)

本圖片截取自 Material Design - Example type scale。

各裝置字體大小單位:

• Android 為 sp
• IOS 為 pt
• 網頁為 rem

瀏覽器的預設值為 16px 若需轉換為 sp 公式為 SIZE/16 = rem。

在 Sketch 中根據裝置單位來設定字母間距
Android = 0.2 追蹤 Sketch / 16sp(字體大小) = 0.0125 em
IOS = -0.1 pt
Web = = 0.2 追蹤 Sketch / 16sp(字體大小) = 0.0125 em

運用字型樣式自定義字型、字體、大小寫和字母間距，在元件和整體排版中使用。

在字型樣式組合中標題 (Headlines) 範圍是 H1~H6 ，標題是畫面中最大的文字也可以是簡短重要的內文或數字，在標題得字型選擇上可以使用比較特殊的字型，非常見的字型在細節及複雜度都有經過巧思，放置於畫面上更容易吸引注意。在小尺寸的裝置使用有襯線或無襯線字體很適合標題使用。

副標題 (Subtitles) 的尺寸大小應小於大標題，通常使用在長度較短的強調句子，字體通常選擇有襯線或無襯線字，若要使用特殊字型需注意文字的易讀性。

內文 (Body) 有兩種樣式尺寸，文字內容較多的段落議使用有襯線或無襯線字體；說明文字和眉題是樣式尺寸中最小的字體尺寸，常用於圖片解說或是標題上方的引文；在不同樣式的按鈕上輸入文字，可以更明確的表達按鈕的用意，按鈕字體通常使用無襯線字體，單字可以使用首字母大寫或全單字大寫，內文請勿使用特殊字型會讓用戶難以閱讀。

Understanding typography 了解排版

一個單字是字母的集合，儘管每個字母都是唯一的，但我們仍然可以注意到某些形狀在各個字母之間是共同的。在字體設計基本原理中，樣式的選擇需以易讀性和可讀性為主。

本圖片截取自 Material Design。

細分構成字母的結構名稱分別有: aperture 孔徑、ascender 上升、baseline 基線、cap height 最高高度、descender 下降、leading 前導、letter-spacing 字母間距、sans serif 無襯線、serif 有襯線、stem 豎、stroke 撇、x-height x高度。

本圖片截取自 Material Design - Type properties。

baseline 基線是在每個字母的底部基準線，是測量字母與元件垂直距離的重要規範，基線與畫面網格對齊而不是對齊邊界框，可以在設計軟體和裝置平台之間使用。無論 pt / sp 大小如何內文的基線都必須位於 4dp 網格上。行高必須是 4 的倍數。在 Android 和 iOS 上，可以從基線開始測量間距，在網頁上使用 Sass 或 CSS 自動進行計算間距。

cap height 最高高度是指從基線開始測量的大寫字母（例如: M或I）水平高度，圓形和尖頭大寫字母（例如: S和A）可以略微超出最高高度上方來達到平衡字母高度的視覺效果。

x-height x 高度是指小寫字母 x 的高度，它表示字母中每個字形的高度或長度。與 x 高度相同的字體在較小的字體時具有更好的可讀性，每個字母內的空白更清晰。

Ascenders 上升和 descenders 下降是指某些小寫字母向上垂直筆劃和向下的垂直筆劃。當行距過於緊密時，可能會導致上下行內文相黏的狀態。

Weight 粗細是指字體筆劃的相對粗細，字體可以有多種粗細設定，用於畫面上提高文字斷落的注目性。常見的字體粗細分為: 1. Light 細體、2. Regular 正常、3. Medium 中間、4. Bold 粗體。

有襯線及無襯線字的字體分辨可以看到字母末端是否有裝飾，下圖左方為有襯線字右方為無襯線字，想要了解更多襯線字體的細節可以查看 Material 襯線章節。

等寬字型在所有字母呈現上都是一樣的寬度，例如字型: Roboto Mono、Space Mono、VT323。手寫字型通常使用在標題上，有非常自然的手寫或書法風格，例如字型: UnifrakturMaguntia、Dancing Script、Indie Flower；表現字型則歸類於其他字型，通常使用在標題或大尺寸的字體上。

易讀性是指在字體風格下仍然能輕易閱讀內文，通過調整文字間距、表格數字、段落字數、行距、段落間距、段落對齊...等，來達成易讀性與可讀性。

根據不同樣式設定文字間距，例如: 在大尺寸的文字上使用較小的文字間距來增加可讀性，在較小的字體上由於辨識不易，通過拉大間距來保持字母的可讀性；在畫面或表格中可能經常變換的數值，可以使用表格來呈現數字，數字的字體為等寬字型，能更快速的閱讀。

英文內文的段落字數通常設定 40~60 個單字，在大型的顯示區域最多可以顯示 120 個單字並且需要將行高從 20sp 增加到 24sp。行距是基線與基線之間的距離，內文的行高與字體大小成正比(例如: 字體大小 14 行高 20dp，字體大小 20，行高 28dp )。

段落間距應保持在字體大小的 0.75 倍至 1.25 倍之間。例如: 字體大小20sp，行高30dp，段落間距28dp。段落對齊分為靠左對齊、靠右對齊、置中三種對齊方式，靠左對齊常用於左到右書寫的語言（例如: 英語），靠右對齊常用於右到左書寫的語言（例如: 阿拉伯語和希伯來語），靠右對齊和置中對齊常用於內容較短的排版上。

系統字體已安裝在電腦及設備上。支援許多語言並免費提供使用。系統字體常見於各個應用程式中，可以保持裝置平台的一致性，系統字體較不容易受到注目。系統字體應使用在字體較大的區塊或 14sp 以下的任何內文。各裝置的預設字體各有不同，Roboto 是 Android 的系統字體、San Francisco 是 iOS / Apple 的系統字體。

Language support 支持語言

每種語言都有自己文字的外觀(例如: 日文、韓文、英文、阿拉伯語)，根據不同的語言設定不同的段落字數與段落對齊方式。

本圖片截取自 Material Design。

單字的長度會因為語言而不同，就連相似外觀的字形語言（例如: 英語和德語）也會有不同的單字的長度，根據書寫方向來設定段落對齊的方式，較長的單字需要更多的空間來顯示，當不同語言的文字出現在同一個畫面，在視覺上較長的語言單字看起來字體尺寸較小，因此需要調整行距和對齊方式，來達到視覺平衡。

許多語言在書寫上會需要比較多的垂直空間，若您的介面可以讓使用者轉換語言，應保留更多得垂直空間以免在替換語言後，區塊內容因不同語言而增加與內文重疊；文字不僅可以水平顯示也可以垂直顯示，在中文、日文、韓文的垂直排版通常每個字是等距排列，每個字所佔的空間與字所佔的空間相同。水平書寫方向為從左到右，從上到下。垂直書寫方向為從上到下和從右到左。

當同一個畫面同時要顯示不同語言時，需要使用不同字體來顯示，文字系統可以分為三類：

類英文字體: 西歐、中歐和東歐以及非洲大部分地區的語言通常以拉丁字母書寫。越南語是其中的例外，它使用拉丁文字系統的本地化形式，但是其帶重音的字形可能比西歐語言中的字形高許多。希臘文和西裡爾文的書寫系統與拉丁文非常相似。

高大字體: 南亞、東南亞和中東語言，例如: 阿拉伯語、北印度語、泰盧固語、泰語和越南語，需要設定更大的行高來容納語言字形。

密集字體: 由於中文、日語和韓語文字筆劃較多，需要較大的行高及間距來增加可讀性。

在 Roboto 未涵蓋的語言中使用 Noto 為預設字體，在不同語言和字體上保持視覺的一致性，在不同高度的語言和筆劃粗細都能使用。Noto 定義了 93 種在 Unicode 6.0 版本的字體。更多 Noto 使用定義及調整方法。

Google 將語言分為三類：類英文字體、高大字體、密集字體，可以查詢 語言類型參考表 來定義段落間距及行距。

今天我們了解到 Typography 文字排版有不同的定義及樣式，每個字母都存在著許多學問，在排版上需要注意文字段落包含的字數、字體間距、行距，都與易讀性及可讀性有著密不可分的關係，在不同國家使用的語言外觀上有著許多差異，在畫面上需調整行高或是預留空間來保持畫面的一致性。

明天讓我們繼續完成 Sound 聲音 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~