字體排版

如果您未指定任何文字樣式，瀏覽器會套用自己的預設樣式。這些稱為使用者代理程式樣式表，可能因瀏覽器而異。使用者也可以自行設定文字的顯示偏好設定。

如果您未指定行長度，瀏覽器會在畫面邊緣自動換行。因此，網路上的文字預設為回應式文字，會根據使用者的可視區域調整。

但文字可以完美配合螢幕上的文字，並不代表要閱讀。良好的字體排版，就是以適當方式呈現文字。比起選擇適用字型，字體排版還不夠。您必須考量使用者的偏好、文字大小、行長，以及各行文字之間的距離。

文字大小

我們很難清楚知道網頁中的文字大小。

如果有人使用小螢幕，他們的螢幕會比他們的眼睛靠近 - 只有一隻手，或許是安全的。

但隨著螢幕變大並變大，建立溝通的難度也隨之提高。筆電大小的螢幕可能非常接近觀眾，但寬螢幕的桌上型電腦顯示器和電視螢幕的大小相同。人們坐在遠離電腦螢幕的遠一點後，卻遠離電視。

不過，雖然您不確定使用者與螢幕之間的距離，但可以嘗試改用經過適當轉譯的文字大小。針對較小的螢幕，使用較小的文字大小，在較大的螢幕上使用較大的文字。

您可以在螢幕大小變寬時，使用媒體查詢變更 font-size 屬性。

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

縮放文字

在特定中斷點切換固定文字大小並不容易。這種回應方式反應更靈敏，那就是根據使用者的裝置寬度調整文字大小。

CSS 中的 vw 單位代表「可視區域寬度」。將字型大小連結至 可視區域的寬度代表文字將隨瀏覽器寬度按比例縮放。這會導致難以預測特定寬度的文字大小，但您知道文字大小適合使用者瀏覽器寬度。

請不要在字型大小宣告中單獨使用 vw，

html {
  font-size: 2.5vw;
}

否則使用者將無法調整文字大小。如果使用 em、rem 或 ch 等相對單位，文字可調整大小。CSS calc() 函式非常適合用來達成這個目標。

html {
  font-size: calc(0.75rem + 1.5vw);
}

讓瀏覽器幫忙計算。這會導致難以預測特定寬度的文字大小，但知道文字大小都會在正確的範圍內。使用者的瀏覽器會負責計算確切的文字大小。

但現在有可能是文字在小螢幕上經過「過小」，在大螢幕上則「太小」。

夾扣文字

您可能不想讓文字縮小並變得極端。您可以使用 CSS clamp() 函式控制縮放功能的開始與結束位置。這樣可將縮放範圍「限制」到特定範圍。

clamp() 函式與 calc() 函式類似，但接受三個值，中間值與您傳遞至 calc() 的值相同。開盤值會指定最小尺寸 (在此案例中為 1rem)，以免低於使用者偏好的字型大小。結尾值可指定大小上限。

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

現在，文字大小會縮小並隨著使用者螢幕的比例增加，但文字大小絕不會低於 1rem 或 2rem。

文行長度

儘管網路並不是紙本，但我們可以從印刷世界中學習，然後應用到網路上。

Robert Bringhurst 以經典書《The Elements of Typographic Style》為例，該作品的線條長度 (或測量單位) 必須決定這個情況：

一般公認文字大小是單一資料欄頁面的理想行長，45 到 75 個字元之間，文字大小屬於單欄範圍。一般而言，66 個半形字元 (即計算字母和空格) 是理想選擇。如果是多欄工作，平均平均值是 40 至 50 個字元。

您無法直接在 CSS 中設定線條長度。沒有任何 line-length 屬性。但您可以限制容器的寬度，避免文字過長。max-inline-size 屬性非常適合用於這種情況。

請勿使用固定單位 (例如 px) 設定行長度。使用者可以調整字型大小，而文字長度也必須隨之調整。使用相對單位，例如 rem 或 ch。

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

如果使用 ch 做為寬度單位，新行會依照該字型大小在第 66 個字元組成。

行高

雖然 CSS 中沒有 line-length 屬性，但卻有 line-height 屬性。

較短的文字行可以使用較大的 line-height 值。但是，如果針對較長的文字使用較大的 line-height 值，讀者的眼睛會很難從一行末端移到下一行的開頭。

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

請在 line-height 宣告中使用無單位值。這可確保行高與 font-size 相關。

line-height: 24px;

line-height: 1.5;

組合與規模

建立使用者介面時，別忘了優先考量階層，以便讓網頁更清晰易懂。最佳做法是在設計系統中內建字體排版比例。

網頁字型

字體就像文字的語音，不過，字型選項有很多種。系統字型是唯一的選項。不過，現在您可以選擇符合內容感覺的網路字型。

使用 @font-face 告訴瀏覽器在哪裡找到網路字型檔案。使用 Woff2 做為網路字型格式。這個平台確實受到支援，且能達到最佳成效。

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

但是，您加入的每個網頁字型檔案都會增加網頁載入時間，進而可能導致使用者體驗不佳。請記住，其設計並非只考量像素最終的外觀。像素的繪製速度是使用者體驗中很重要的一環。能帶給使用者快速的感受，是良好的使用者體驗。

正在載入字型

您可以要求瀏覽器盡快下載字型檔案。在參照網路字型檔案的文件 head 中新增 link 元素。如果 rel 屬性的值為 preload，就會指示瀏覽器優先該檔案。如果 as 屬性的值為 font，可讓瀏覽器瞭解該檔案的類型。type 屬性可讓您提供更具體的描述。

<link href="/fonts/roboto-regular.woff2" type="font/woff2" 
  rel="preload" as="font" crossorigin>

即使是由您自行代管字型檔案，也必須加入 crossorigin 屬性。

使用 CSS font-display 屬性，指示瀏覽器如何管理從系統字型切換至網路字型的切換作業。在載入網路字型之前，您可以選擇不顯示任何文字。您可以選擇立即顯示系統字型，並在載入後切換至網路字型。這兩種策略各有缺點。如果您等到網頁字型下載後才顯示任何文字，使用者可能會發現自己長時間瀏覽空白頁面，感到不悅。如果您先以系統字型顯示文字，之後再切換至網路字型，使用者可能會察覺網頁內容的移位。

最好先等待一小段時間再顯示任何文字。如果在此時間屆滿前載入網頁字型，則文字將以網路字型顯示，不會改變內容。如果時間過後仍未載入網頁字型，文字將以系統字型顯示，這樣至少要有使用者才能閱讀內容。

如果仍然希望網路字型在最終載入網路字型時取代系統字型，請使用 swap 的 font-display 值。

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

如果您想在文字轉譯後使用系統字型，請使用 fallback 的 font-display 值。

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

變數字型

如果您使用相同的字體，使用了許多不同的粗細或樣式，可能會不小心產生許多不同的字型檔案，也就是每種字體粗細或樣式的個別字型檔案。

「變數字型」只用一個檔案就能解決這個問題。變數字型檔案採用回應式，而不是用於一般、粗體、額外粗體等個別檔案。其中包含在特定權重或樣式中呈現的所有資訊。

也就是說，單一可變字型檔案比單一一般字型檔案大，但單一可變的字型檔案可能會小於多個一般字型檔案。如果您使用大量不同的權重，可變字型就能大幅提高效能。

良好的網路字體排版不只侷限於設計人員所提供的類型選項。此外，回應式字體排版也同樣會遵循使用者的裝置和網路連線。最終成果是設計，無論呈現方式為何，都能完美呈現。

現在您已掌握回應式文字的基本知識，接著就來進一步瞭解回應式圖片。

隨堂測驗

測試您對字體排版的瞭解程度