Roboto

自從 Ice Cream Sandwich 發(fā)布以來，Roboto 都是 Android 系統(tǒng)的默認(rèn)字體集。在這個版本中，將 Roboto 做了進一步全面優(yōu)化，以適配更多平臺。寬度和圓度都輕微提高，從而提升了清晰度，并且看起來更加愉悅。

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" />

Roboto字體 - 1.21 MB(.zip)

標(biāo)準(zhǔn)樣式（Standard Styles）

字體排版的縮放和基本樣式（Typographic Scale & Basic Styles）

同時使用過多的字體尺寸和樣式可以很輕易的毀掉布局。字體排版的縮放是包含了有限個字體尺寸的集合，并且他們能夠良好的適應(yīng)布局結(jié)構(gòu)。最基本的樣式集合就是基于 12、14、16、20 和 34 號的字體排版縮放。

這些尺寸和樣式在經(jīng)典應(yīng)用場合中讓內(nèi)容密度和閱讀舒適度取得平衡。字體尺寸是通過 SP（可縮放像素數(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）”樣式的例子

就任何表格元素來講，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）”樣式的例子

在某些特定場合中，要使用“次要標(biāo)題”樣式，而不用較小的“主體”樣式。這些個體包含了一小段文字預(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）”樣式的例子

基本色/色彩對比度（Basic colors/Color contrast）

最基本的常識是，相同顏色的背景和文字是很難閱讀的。但有些人不知道的是，帶有過強對比度的文本會有些炫目，同樣難以閱讀。這一點在深色背景下尤其明顯。

要獲得良好的辨識度，文本應(yīng)當(dāng)滿足一個最低的對比度，也就是 4.5:1（依據(jù)明度計算）。7:1 的對比度是最適合閱讀的。

這些色彩的組合同樣要考慮到某些非典型用戶對于對比度的不同反應(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" />

大號字/動態(tài)字體尺寸（Big Type / Dynamic Type sizes）

如果使用得當(dāng)，大號字會讓應(yīng)用顯得更加有趣、容易辨別布局，并幫助用戶快速理解內(nèi)容。

動態(tài)字體尺寸讓大號字可以在文本長度未知的情況下保持在容器之內(nèi)。動態(tài)尺寸是根據(jù)可用空間和預(yù)估的字符空間，從字體排版縮放中選擇的。

避免輕率地的使用小號字來適配較小的容器，除非萬不得已。

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" />
樣例對比

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" />

行高（Line Height）

行高是通過每個樣式各自的尺寸和粗細(xì)決定的，以獲得良好的可讀性和合適的間距。只有“主體”、“次要標(biāo)題”、“大綱”等類似的樣式中才允許使用自動換行。其它所有樣式應(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" />
樣例對比

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" />

換行規(guī)則/連字符（Line breaking rules / Hypenation）

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="" />

(上圖)不可取

每行長度包含的字符（Characters per line lengths）

可讀性和行長度參考了來自 Baymard Institute 的建議：

“要得到良好的閱讀效果，每行應(yīng)當(dāng)包含 60 個字符左右。每行所包含的字符數(shù)量是決定閱讀舒適度的關(guān)鍵因素。”

“過寬：如果每行文本過多，用戶的眼睛將難以找到在文本上對焦。這是因為過長的文字導(dǎo)致用戶難以判斷一行的起始點，甚至在大段文字中出現(xiàn)讀錯行的現(xiàn)象?！?/p>

“過窄：如果每行文本過少，會導(dǎo)致眼睛來回掃視過于頻繁，破壞閱讀的節(jié)奏。過短的內(nèi)容還會給人壓力，導(dǎo)致用戶完成本行閱讀前過早跳轉(zhuǎn)到下一行閱讀（因此會錯過潛在的重要信息）?！?/p>

參考: 可讀性: 最佳行長度

字間距（Tracking and kerning）

http://wiki.jikexueyuan.com/project/material-design/images/style-typography-36_large_mdpi.png" alt="style-typography-36_large_mdpi" />

原文：Typography 翻譯：acely 校對：chenyusi