字體排版(Typography)

Roboto

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

style-typography-roboto-typography.roboto2_specimen_large_mdpi

Roboto字體 - 1.21 MB(.zip)

標準樣式(Standard Styles)

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

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

這些尺寸和樣式在經典應用場合中讓內容密度和閱讀舒適度取得平衡。字體尺寸是通過SP(可縮放像素數,scaleable pixels)指定的,讓大尺寸字體獲得更好的可接受度

style-typography1_large_mdpi

style-typography-8_large_mdpi

style-typography2_large_mdpi

"顯示(Display)"樣式的例子

style-typography4_large_mdpi

style-typography5_large_mdpi

"頭條(Headline)"樣式的例子

就任何表格元素來講,App Bar中出現的所有標題都要使用"標題"樣式。

style-typography6_large_mdpi

style-typography7_large_mdpi

"標題(Title)"樣式的例子

在某些特定場合中,要使用"次要標題"樣式,而不用較小的"主體"樣式。這些個體包含了一小段文字預覽,或者有標題與一行"主體"樣式的文字一同出現。

style-typography9_large_mdpi

style-typography-23_large_mdpi

"次要標題(Subhead)"樣式的例子

style-typography10_large_mdpi

style-typography11_large_mdpi

"主體(Body)"樣式的例子

style-typography12_large_mdpi

style-typography13_large_mdpi

"主體(Body)"樣式的例子

style-typography14_large_mdpi

style-typography15_large_mdpi

"按鈕(Button)"樣式的例子

基本色/色彩對比度(Basic colors/Color contrast)

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

要獲得良好的辨識度,文本應當滿足一個最低的對比度,也就是4.5:1(依據明度計算)。7:1的對比度是最適合閱讀的。

這些色彩的組合同樣要考慮到某些非典型用戶對于對比度的不同反應。

style-typography-16_large_mdpi

style-typography-17_large_mdpi

style-typography-18_large_mdpi

style-typography-19_large_mdpi

style-typography-20_large_mdpi

大號字/動態字體尺寸(Big Type / Dynamic Type sizes)

如果使用得當,大號字會讓應用顯得更加有趣、容易辨別布局,并幫助用戶快速理解內容。

動態字體尺寸讓大號字可以在文本長度未知的情況下保持在容器之內。動態尺寸是根據可用空間和預估的字符空間,從字體排版縮放中選擇的。

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

style-typography-21_large_mdpi

style-typography-22_large_mdpi
樣例對比

style-typography-23_large_mdpi

style-typography-24_large_mdpi

行高(Line Height)

行高是通過每個樣式各自的尺寸和粗細決定的,以獲得良好的可讀性和合適的間距。只有"主體"、"次要標題"、"大綱"等類似的樣式中才允許使用自動換行。其它所有樣式應當以單行形式出現。

style-typography-25_large_mdpi
樣例對比

style-typography-27_large_mdpi

style-typography-30_large_mdpi

換行規則/連字符(Line breaking rules / Hypenation)

style-typography-33_large_mdpi

|
不要

每行長度包含的字符(Characters per line lengths)

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

"要得到良好的閱讀效果,每行應當包含60個字符左右。每行所包含的字符數量是決定閱讀舒適度的關鍵因素。"

"過寬:如果每行文本過多,用戶的眼睛將難以找到在文本上對焦。這是因為過長的文字導致用戶難以判斷一行的起始點,甚至在大段文字中出現讀錯行的現象。"

"過窄:如果每行文本過少,會導致眼睛來回掃視過于頻繁,破壞閱讀的節奏。過短的內容還會給人壓力,導致用戶完成本行閱讀前過早跳轉到下一行閱讀(因此會錯過潛在的重要信息)。"

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

字間距(Tracking and kerning)

style-typography-36_large_mdpi

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

安卓版28杠游戏