套用字體排版

透過字型粗細、大小、文行高度和字母間距的差異,可以明確表現文字階層。更新後的字體比例將樣式整理出六種角色,並根據其用途描述加以命名:顯示、標題、標籤、內文、數字和弧形。這些新角色不受螢幕大小限制,易於應用在各種用途。

顯示樣式

顯示字體用於簡短的大型文字字串,可顯示一目瞭然的重要資訊、重要指標、信心或表現品牌特質的時刻。

  • DisplayLarge 是最大的標題,顯示文字是畫面中最大的文字,應使用簡短且容易一目瞭然的主頁橫幅資訊、重要指標、信心或表現力十足的品牌時刻,這些資訊適合以顯眼的比例和樣式呈現。
  • DisplayMedium 是第二大的標題。顯示內容是畫面中最大的文字,應使用簡短且容易一目瞭然的主頁橫幅資訊、重要指標、信賴度或表現力豐富的品牌時刻,這些內容適合採用顯眼的大字體和樣式。
  • DisplaySmall 是最小的標題,顯示文字是畫面中最大的文字,應使用簡短且容易一目瞭然的主頁橫幅資訊、重要指標、信心或表現力十足的品牌時刻,這些資訊適合以顯眼的比例和樣式呈現。

標題

標題是階層式文字,可做為指引機制,例如頁面、章節標題或子章節標題 (適用於 TitleSmall)。

  • TitleLarge 是最大的標題。標題的字型比顯示名稱小,通常用於長度較短、重要性中等的文字,不建議用於互動式元件,而是用於網頁標題或副標題。
  • TitleMedium 是中等大小的標題。標題的字型比顯示名稱小,通常用於長度較短、重要性中等的文字,不建議用於互動式元件,而是用於網頁標題或副標題。
  • TitleSmall 是最小的標題,標題的字型比顯示名稱小,通常用於長度較短、重要性中等的文字,不建議用於互動式元件,而是用於網頁標題或副標題。

標籤

標籤用於元件層級文字,說明互動後會發生的動作。標籤最常見且廣泛使用的應用程式,是按鈕內巢狀結構的文字。

  • LabelLarge 是最大的標籤,標籤用於顯示醒目文字,例如套用至互動式元件的標題按鈕標籤。
  • LabelMedium 是中等標籤,也是最常使用的標籤。標籤用於顯示文字,例如按鈕上的主要標籤,並套用至互動式元件。
  • LabelSmall 是小型標籤。標籤用於顯示文字,例如按鈕上的次要標籤、精簡按鈕上的標籤,以及套用至互動式元件的標籤。

內文

內文保留給內容文字,例如內文段落、複雜資料視覺化中使用的文字、時間戳記和中繼資料。

  • BodyLarge 是最大的內文。內文通常用於較長的文章,適合使用小型文字。如果是較長的文字段落,建議使用 Serif 或 Sans Serif 字體。
  • BodyMedium 是第二大的內文。內文通常用於較長的文章,適合使用小型文字。如果是較長的文字段落,建議使用 Serif 或 Sans Serif 字體。
  • BodySmall 是第三大的內文。內文通常用於較長的文章,適合使用小型文字。如果是較長的文字段落,建議使用 Serif 或 Sans Serif 字體。
  • BodyExtraSmall 是最小的內文。內文通常用於較長的文章,適合使用小型文字。如果是較長的文字段落,建議使用 Serif 或 Sans Serif 字體。

數字

數字文字樣式用於數字,通常僅限於幾個字元。在大螢幕上可呈現更具表現力的屬性。 可彈性擴展寬度軸,且不必擔心本地化和字型縮放問題。

  • NumeralsExtraLarge 是數字的最大角色。數字預設會使用表格間距。這類字體會醒目顯示可一目瞭然的數字,且僅限兩到三個字元,不需要本地化,例如充電畫面或時間挑選器。
  • NumeralsLarge 是數字的第二大角色,數字預設會使用表格間距。這些是大型數字字串,僅限於顯示時間的大型螢幕,不需要本地化,例如計時器倒數或時間挑選器。
  • NumeralsMedium 是數字的第三大角色。數字預設會使用表格間距。這類數字屬於中等大小,且僅限於短字串,不需要本地化,例如步數或時間挑選器。
  • NumeralsSmall 是數字的第四大角色。數字預設會使用表格間距。這類字體適用於需要強調的小型數字,例如日期和時間挑選器,不需要本地化。
  • NumeralsExtraSmall 是數字的最小角色。數字預設會使用表格間距。這類字型適用於需要容納較長數字字串的號碼,且不需要本地化,例如運動期間的指標。

弧形

Arc 標題文字用於 UI 上的彎曲文字,例如時間文字和彎曲標籤。專為沿曲線最佳化字體而設計的字體軸,可因應字元位於曲面螢幕頂端和底部時,字元間距的差異。

頂端

  • ArcLarge 適用於圓弧標題。「弧形」適用於螢幕上沿著彎曲路徑顯示的文字,保留給螢幕頂端或底部的簡短標題文字字串,例如確認疊加層。
  • ArcMedium 適用於圓弧標題。「弧形」適用於沿著螢幕上彎曲路徑的文字,保留給螢幕頂端或底部的簡短標題文字字串,例如頁面標題。
  • ArcSmall 適用於有限的弧形文字字串。「弧形」適用於螢幕上沿著彎曲路徑的文字,保留給螢幕頂端的簡短彎曲文字字串,例如時間文字。

底部

  • ArcLarge 適用於圓弧標題。「弧形」適用於螢幕上沿著彎曲路徑顯示的文字,保留給螢幕頂端或底部的簡短標題文字字串,例如確認疊加層。
  • ArcMedium 適用於圓弧標題。「弧形」適用於沿著螢幕上彎曲路徑的文字,保留給螢幕頂端或底部的簡短標題文字字串,例如頁面標題。
  • ArcSmall 適用於有限的弧形文字字串。Arc 適用於螢幕上沿著彎曲路徑的文字,保留給螢幕底部的簡短彎曲文字字串,例如行動號召。

排版

直向排版會依據邊框間距、定界框和基準線,確保文字在任何大小下都清晰易讀。決定排版、文字大小調整、密度,以及在自適應版面配置中使用文字時,請考量工程方面的因素和平台慣例。

使用基準

基準線是文字行所依據的隱形線,在 Material Design 中,基準是測量文字與元素之間垂直距離的重要規格。

一行文字位於隱形基準線上

檢查可讀性

如要提升應用程式中顯示字型的可讀性,請完成這些可讀性檢查。

表格和等寬數字

如果值可能會經常變更、製作動畫或快速變更,例如倒數計時器、選擇器或持續變更的健身指標,請使用表格數字 (也稱為等寬數字),而非比例數字。

使用等寬表格數字,讓值在視覺上對齊,方便掃描和對齊,並避免數字或相鄰文字跳動。

行高

行高是指每行文字之間的空間,與字體大小直接相關。在 Android Wear 上,垂直空間有限,因此系統會將行高最佳化,確保文字可讀性,同時盡可能在可視區域內顯示最多行文字。

一般來說,行高比例最好是字體大小的 1.2 倍 (120%),但由於 Wear OS 裝置空間有限,行高比例約為字體大小的 1.1 倍 (110%) 就足夠。

額外行高

在 Jetpack Compose 和 Android 中,排版會在最後一行自動增加行高,避免較長的字元重疊。因此部分螢幕截圖測試結果不盡相同。

這會使底線的行高比例為字體大小的 1.25 倍 (125%)。請參閱其他行高一覽表

其他行高快速參考表

預設樣式 (文字大小 / 行高) 每行預設行高 僅在底線增加行高 計算方式
60 / 60 0 (100%) + 15 (125%) 60 / 75 (15/125%) (60+15)
50 / 50 0 (100%) + 13 (126%) 50 / 63 (13/126%) (50+13)
40 / 44 4 (110%) + 7 (127.5%) 40 / 51 (11/127.5%) (44+7)
30 / 34 4 (113%) + 3 (123.3%) 30 / 37 (7/123.3%) (34+3)
24 / 26 2 (108%) + 4 (125%) 24 / 30 (6/125%) (26+4)
20 / 22 2 (110%) + 3 (125%) 20 / 25 (5/125%) (22+3)
18 / 20 2 (111%) + 3 (125%) 18 / 23 (5/125%) (20+3)
16 / 18 2 (112.5%) + 2 (125%) 16 / 20 (4/125%) (18+2)
15 / 18 3 (120%) + 1 (126.6%) 15 / 19 (4/126.6%) (18+1)
14 / 16 2 (114%) + 2 (128.5%) 14 / 18 (4/128.5%) (16+2)
13 / 16 3 (123%) + 0 (123%) 13 / 16 (3/123%) (16+0)
12 / 14 2 (116.6%) + 1 (125%) 12 / 15 (3/125%) (14+1)
10 / 12 2 (120%) + 0 (120%) 10 / 12 (2/120%) (12+0)