遷移至 Variable 字型

1. 簡介

上次更新時間：2022 年 5 月 11 日

269e1597309e5d7a.png

使用可變字型，讓 UI 能動態變化，進而提升版面配置、主題和無障礙功能的回應速度，同時讓應用程式更快！

課程內容

  • 變數字型。
  • 如何使用這些類型自訂類型。
  • 如何在設計中套用可變字型。
  • 如何使用 Google Fonts API 和 CSS 導入可變字型。

必要條件

本研究室建立在以下基礎設計概念上：

  • 具備類型縮放的相關知識。
  • 熟悉 Figma。
  • 具備 HTML 和 CSS 的基本知識。

軟硬體需求

2. 開始操作

設定

如要開始操作，請先存取 Designlab Figma 檔案。本研究室所需素材都在這個 Figma 檔案當中。您可以下載並匯入這個檔案，或從 Figma 社群複製。

首先，登入 Figma 或建立帳戶。

從 Figma 社群複製

前往「Migrating to Variable fonts」檔案，或在 Figma 社群中搜尋「Migrating to Variable fonts」。按一下右上角的「複製」，將檔案複製到你的檔案中。

2cb1a5f77aab6012.png

檔案版面配置

您會發現這個檔案內容獨立完整，開頭是簡介。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。章節和練習彼此相輔相成，因此應該依序完成。

本程式碼研究室會逐步詳細說明這些概念和練習。請一邊閱讀程式碼研究室內容，一邊進一步瞭解 Material You 的新功能。

從「Intro」畫板開始，有數個依序連結畫板的按鈕，如要存取連結，請按一下按鈕。

289defd9d067d2f0.png

檢查是否有變數字型

開始之前，請先確認我們有可變字型！這個檔案使用 Roboto Flex，這款字型已在 Figma 中提供，您也可以從 fonts.google.com 下載

3. 什麼是變數字型？

變數字型是一種全新的創新字型格式，可讓使用者控制字型和圖示。Roboto Serif 和 Roboto Flex 是專為變數字型技術打造的新字體，每個字體都具有多種軸線。64c74a7d7844423.png

美學表達和軸

設計師不再受限於舊版的固定樣式 (例如一般、粗體、斜體等)。變數字型中的變數會由軸或例項控制。如果類型設計師選擇，類型設計中的任何變數都可以指派給使用者可控的軸。常見的軸向包括斜體、光學大小、傾斜度、粗細、寬度。這五個軸是 CSS 中註冊的軸。

優點

變數字型可讓您在單一字型檔案中提供多種樣式，讓網站更具永續性、更小且更快速，並讓設計人員更能掌握表達方式。

77346d3812d79acc.png

4. 在設計中使用變數字型

變更軸

讓我們逐步介紹所有可用的參數 (或軸) 及其效果。選取右側的類型，然後開啟「類型詳細資料」互動式視窗 (更多圖示)，即可開啟軸滑桿，並查看每個參數。

  1. Weight 定義字母的粗細。可提供完整的連續筆觸粗細範圍。

5f18f2f50f6dc4da.gif

  1. 寬度是字型字元的水平空間占用量。

dddc87cccfcb47f9.gif

  1. 調整樣式，從直立調整為傾斜，這在排版人員中也稱為「斜體」樣式。雖然很少見，但Slant 可以朝另一個方向運作，這種風格稱為「倒斜體」或「反斜體」。

1b7fbf03fcbf16dc.gif

  1. 等級是字體光學粗細的次要修飾符，與粗細軸無關。粗細和等級都會影響字母的厚度，但使用等級進行調整會更精細。

35705cb05c8df559.gif

  1. 光學尺寸將樣式調整為特定文字大小 (以點為單位)。在較小的字型大小下，字母通常會經過最佳化處理，以便提高可讀性，因此會使用較寬的字間距/字距，並採用較粗的筆觸，但細節較少。在較大的尺寸中，字母通常會針對較細的筆劃和更精細的字型外觀，以及更極端的粗細和寬度進行最佳化。

ed569d469ebd40d6.gif

請參閱 可變字型示範，瞭解如何在 Figma 外部使用可變字型軸。

5. 逐步提升風格

如果您使用品牌風格指南，可能會設有固定的字型比例，以便提供字體排版限制。使用可變字型並不代表可以忽略一致性。這項功能可在單一檔案中進一步調整字型縮放彈性 (例如在深色背景上增加等級權重)。

ecb7c0b0056fc315.png

雖然字體比例調整功能可包含多個字型系列，但我們這裡只會使用一個字型系列，自訂 Material 預設字體比例的濃縮版本。

  1. 我們現在開始使用內文文字自訂字型比例。這樣一來，我們就能先設定網站的基本字型大小，再視情況進行調整。「Body Large」的預設值為 18pt，已選取並設為 Roboto Flex。為了讓內容更易讀，我們過去會更新字型大小和粗細，也就是使用其他字型檔案，但現在我們可以微調部分軸線。調整光學尺寸、等級和重量。
  2. 繼續使用「標籤」。標籤更實用，可用於較短的較小內容，例如按鈕。視覺調整等級，讓標籤正確顯示在按鈕容器和方塊上。
  3. 您可以繼續使用「標題」、「標題」和「顯示」來進行微調。這三種字型都用於較短的文字，強調程度介於中等到高之間，例如頁面標題和章節。大標題和顯示樣式可提供更豐富的視覺效果，因為這兩種樣式會以較大的尺寸顯示，並強調文字。歡迎試試所有軸線！
  4. 選取字型後，按一下 4 點並新增 (+) 來設定文字樣式，確保可重複使用的字型設定一致。

您可以使用 Material Design 主題設定建構工具，或複製 M3 設計套件，產生預設的 Material 輸入比例，並將其設為 Figma 樣式。

6. 套用至 UI

設定類型比例後，我們就來將其套用至 UI 元素，以便在程式碼中實作！請考慮如何使用可變字型來增強表達力和可讀性。如果您在上一節練習中設定了 Figma 樣式，可以套用這些樣式，然後更新樣式的軸。

18efaa2c7bc6ecac.png

  1. 請查看左側的 UI 元素。第一張資訊卡包含植物類型、說明和一些類別標記，其他資訊卡則說明植物的照護方式。植物類型是高強調角色，因此請使用「標題」樣式。將其設為先前設定的標題。關懷資訊卡也有標題，但強調程度不同，因此請將其設為「標題」。
  2. 植物詳細資料和說明文字副本可指派至「body large」，而類別標籤則指派至「label large」。
  3. 嘗試不同的角色，並調整 UI 元素和類型縮放比例，找出適當的平衡點。

f646755b99db0161.png

7. 在程式碼中導入

789408aab925944f.png

使用 CSS 在程式碼中實作可變字型的方法，與任何使用字型提交服務的網站字型類似，可用於載入字型，並透過 CSS 屬性進行自訂。

我們會使用基本 HTML 和 CSS 進行導入，而非 MWC 或任何架構。

Google Fonts 上的變數字型

使用 Google Fonts 做為字型提交服務，輕鬆在網站上實作各種字型，包括可變字型！

前往 fonts.google.com 瀏覽可用的變數字型。在搜尋欄位下方，勾選「僅顯示變數字型」，即可篩選字型。變數字型包含頁面底部附近的實驗區，您可以在其中為字型系列的每個軸設定滑桿。

9ecb4721afd8faa2.png

使用 CSS 設定樣式

並非所有字型都提供相同數量的可自訂軸。目前最常見的屬性包括粗細、寬度、傾斜、斜體和光學大小。

這些屬性可透過變數字型推出前存在的基本 CSS 字型屬性設定。雖然目前並未廣泛支援所有軸 (截至 2022 年 5 月)，但您可以使用新屬性 font-variation-settings 設定所有軸。

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

*字型樣式中的斜體 (slnt) 和斜體 (ital) 不穩定。

8. 使用 Google Fonts API 匯入

我們一直只使用 Roboto，但現在可以前往 fonts.google.com 查看所有可用的字型。

在本程式碼研究室的後續內容中，我們將繼續使用 Roboto，並根據先前的練習自訂下列資訊卡中的字型。

  1. 將含有資訊卡範例 UI 的這段程式碼複製到您選擇的網頁 IDE。
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. 請注意，我們在上一節練習中為標題、標題、內文和標籤設定的樣式規格。請參考上述說明，前往 Roboto Flex 專屬頁面。將滑桿設為符合您在 Figma 中設定的規格，然後為每個滑桿「選取此樣式」，即可將其新增至側邊抽屜。
  2. 在側欄中，找出所選樣式的下方，然後尋找「在網路上使用」。您可以透過 <link> 或 @import 這兩種方式，將字型加入程式碼中。您只需要一個，因此請選取 @import。
  3. 複製 @import 到分號，然後貼到匯入註解後方的樣式標記中。
  4. 由於 Roboto Flex 是唯一使用的字型，請新增匯入程式碼下方的「CSS 規則，用於指定字型系列」，藉此設定主體以呼叫 font-family。
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

這會匯入所選的字型和樣式組合，但使用軸範圍可讓您使用連續的樣式範圍，而非個別樣式。如要建立範圍，請使用「..」連接兩個值 (例如100..900)。請務必只新增字型滑桿中已有的範圍，否則無法正常載入。

這類資源最適合用於在瀏覽器中進行流暢的動畫轉場和實驗，因為這會載入整個範圍，並使下載要求變大。

9. CSS 變數字型屬性

字型匯入完成後，我們就回到 Figma 來為樣式加入一些 CSS 屬性，並查看 font-variation-settings CSS 屬性。

  1. 從右側面板中選取的標題 h1 開始，選取頂端的「檢查」分頁標籤。這會將面板切換至程式碼檢查模式，以便開發人員移交。程式碼是最後一個部分。
  2. 如果您尚未變更格式，請將下拉式選單變更為 CSS。系統會列出使用的標準屬性 (font-weight, font-stretch, font-style, font-optical-sizing)，接著是包含未註冊自訂軸的低階 font-variation-settings。請先使用標準屬性，再改用 font-variation-settings。

Figma 會使用 font-variation-settings 來設定寬度 (wdth)，而非 font-stretch。

62fbb715711beb75.png

  1. 複製與類型相關的 CSS 程式碼，為 h1 選取器設定樣式。
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. 您可以將關懷卡標題的樣式複製到 h2 中。請對正文執行相同的操作，將其複製到 p 中。標籤樣式可複製到 .label

73252104c94e2053.png

10. 恭喜

62930ad88ed65971.png

您已採用可變字型，並瞭解如何在設計中使用這類字型，以及在網站上導入這類字型，做得很好！

如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。

更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！