自從 Ice Cream Sandwich 發(fā)布以來(lái)，Roboto 都是 Android 系統(tǒng)的默認(rèn)字體集。在這個(gè)版本中，將 Roboto 做了進(jìn)一步全面優(yōu)化，以適配更多平臺(tái)。寬度和圓度都輕微提高，從而提升了清晰度，并且看起來(lái)更加愉悅。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-roboto-typography.roboto2_specimen_large_mdpi.png" alt="style-typography-roboto-typography.roboto2_specimen_large_mdpi" />
同時(shí)使用過(guò)多的字體尺寸和樣式可以很輕易的毀掉布局。字體排版的縮放是包含了有限個(gè)字體尺寸的集合，并且他們能夠良好的適應(yīng)布局結(jié)構(gòu)。最基本的樣式集合就是基于 12、14、16、20 和 34 號(hào)的字體排版縮放。
這些尺寸和樣式在經(jīng)典應(yīng)用場(chǎng)合中讓內(nèi)容密度和閱讀舒適度取得平衡。字體尺寸是通過(guò) SP（可縮放像素?cái)?shù)，scaleable pixels）指定的，讓大尺寸字體獲得更好的可接受度。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-01_large_mdpi.png" alt="style-typography1_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-08_large_mdpi.png" alt="style-typography-8_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-02_large_mdpi.png" alt="style-typography2_large_mdpi" />
“顯示（Display）”樣式的例子
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-04_large_mdpi.png" alt="style-typography4_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-05_large_mdpi.png" alt="style-typography5_large_mdpi" />
“頭條（Headline）”樣式的例子
就任何表格元素來(lái)講，App Bar 中出現(xiàn)的所有標(biāo)題都要使用“標(biāo)題”樣式。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-06_large_mdpi.png" alt="style-typography6_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-07_large_mdpi.png" alt="style-typography7_large_mdpi" />
“標(biāo)題（Title）”樣式的例子
在某些特定場(chǎng)合中，要使用“次要標(biāo)題”樣式，而不用較小的“主體”樣式。這些個(gè)體包含了一小段文字預(yù)覽，或者有標(biāo)題與一行“主體”樣式的文字一同出現(xiàn)。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-09_large_mdpi.png" alt="style-typography9_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-23_large_mdpi.png" alt="style-typography-23_large_mdpi" />
“次要標(biāo)題（Subhead）”樣式的例子
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-10_large_mdpi.png" alt="style-typography10_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-11_large_mdpi.png" alt="style-typography11_large_mdpi" />
“主體（Body）”樣式的例子
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-12_large_mdpi.png" alt="style-typography12_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-13_large_mdpi.png" alt="style-typography13_large_mdpi" />
“主體（Body）”樣式的例子
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-14_large_mdpi.png" alt="style-typography14_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-15_large_mdpi.png" alt="style-typography15_large_mdpi" />
“按鈕（Button）”樣式的例子
最基本的常識(shí)是，相同顏色的背景和文字是很難閱讀的。但有些人不知道的是，帶有過(guò)強(qiáng)對(duì)比度的文本會(huì)有些炫目，同樣難以閱讀。這一點(diǎn)在深色背景下尤其明顯。
要獲得良好的辨識(shí)度，文本應(yīng)當(dāng)滿足一個(gè)最低的對(duì)比度，也就是 4.5:1（依據(jù)明度計(jì)算）。7:1 的對(duì)比度是最適合閱讀的。
這些色彩的組合同樣要考慮到某些非典型用戶對(duì)于對(duì)比度的不同反應(yīng)。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-16_large_mdpi.png" alt="style-typography-16_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-17_large_mdpi.png" alt="style-typography-17_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-18_large_mdpi.png" alt="style-typography-18_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-19_large_mdpi.png" alt="style-typography-19_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-20_large_mdpi.png" alt="style-typography-20_large_mdpi" />
如果使用得當(dāng)，大號(hào)字會(huì)讓?xiě)?yīng)用顯得更加有趣、容易辨別布局，并幫助用戶快速理解內(nèi)容。
動(dòng)態(tài)字體尺寸讓大號(hào)字可以在文本長(zhǎng)度未知的情況下保持在容器之內(nèi)。動(dòng)態(tài)尺寸是根據(jù)可用空間和預(yù)估的字符空間，從字體排版縮放中選擇的。
避免輕率地的使用小號(hào)字來(lái)適配較小的容器，除非萬(wàn)不得已。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-21_large_mdpi.png" alt="style-typography-21_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-22_large_mdpi.png" alt="style-typography-22_large_mdpi" />
樣例對(duì)比
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-23_large_mdpi.png" alt="style-typography-23_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-24_large_mdpi.png" alt="style-typography-24_large_mdpi" />
行高是通過(guò)每個(gè)樣式各自的尺寸和粗細(xì)決定的，以獲得良好的可讀性和合適的間距。只有“主體”、“次要標(biāo)題”、“大綱”等類似的樣式中才允許使用自動(dòng)換行。其它所有樣式應(yīng)當(dāng)以單行形式出現(xiàn)。
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-25_large_mdpi.png" alt="style-typography-25_large_mdpi" />
樣例對(duì)比
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-27_large_mdpi.png" alt="style-typography-27_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-30_large_mdpi.png" alt="style-typography-30_large_mdpi" />
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-32_large_mdpi.png" alt="style-typography-33_large_mdpi" />
(上圖)可取
|http://wiki.jikexueyuan.com/project/material-design/images/style-typography-33_large_mdpi.png" alt="" />
(上圖)不可取
可讀性和行長(zhǎng)度參考了來(lái)自 Baymard Institute 的建議：
“要得到良好的閱讀效果，每行應(yīng)當(dāng)包含 60 個(gè)字符左右。每行所包含的字符數(shù)量是決定閱讀舒適度的關(guān)鍵因素?！?/p>
“過(guò)寬：如果每行文本過(guò)多，用戶的眼睛將難以找到在文本上對(duì)焦。這是因?yàn)檫^(guò)長(zhǎng)的文字導(dǎo)致用戶難以判斷一行的起始點(diǎn)，甚至在大段文字中出現(xiàn)讀錯(cuò)行的現(xiàn)象。”
“過(guò)窄：如果每行文本過(guò)少，會(huì)導(dǎo)致眼睛來(lái)回掃視過(guò)于頻繁，破壞閱讀的節(jié)奏。過(guò)短的內(nèi)容還會(huì)給人壓力，導(dǎo)致用戶完成本行閱讀前過(guò)早跳轉(zhuǎn)到下一行閱讀（因此會(huì)錯(cuò)過(guò)潛在的重要信息）。”
http://wiki.jikexueyuan.com/project/material-design/images/style-typography-36_large_mdpi.png" alt="style-typography-36_large_mdpi" />
原文：Typography 翻譯：acely 校對(duì)：chenyusi
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多
