字體排版

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

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

但文字能顯示在畫面上，不代表閱讀起來很舒適。良好的排版是指以適當方式呈現文字。字體排版不只是選擇合適的字型，您需要考量使用者的偏好設定、文字大小、行長，以及文字行之間的距離。

文字大小

很難判斷網頁上的文字大小。

如果使用者使用小型螢幕，螢幕與眼睛的距離可能相當近，大約是手掌的長度。

但隨著螢幕越來越大，建立連結也越來越困難。筆電大小的螢幕可能離觀眾很近，但寬螢幕電腦螢幕的大小與電視螢幕差不多。使用者與桌機螢幕的距離約為一隻手臂的長度，但與電視的距離遠得多。

不過，雖然無法確定使用者與螢幕的距離，但可以嘗試使用適當的文字大小。在較小的螢幕上使用較小的文字大小，在較大的螢幕上使用較大的文字大小。

您可以運用媒體查詢，在螢幕變寬時變更 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 元素，參照網路字型檔案。值為 preload 的 rel 屬性會告知瀏覽器優先處理該檔案。值為 font 的 as 屬性會告知瀏覽器這是哪種檔案。type 屬性則可讓您更具體地指定檔案類型。

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

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

使用 CSS font-display 屬性，指示瀏覽器如何管理從系統字型切換至網路字型的過程。您可以選擇在網頁字型載入前完全不顯示文字。您可以選擇立即顯示系統字型，然後在網頁字型載入後切換。這兩種策略都有缺點。如果您等到網頁字型下載完成才顯示文字，使用者可能會長時間盯著空白網頁，感到非常沮喪。如果您先以系統字型顯示文字，然後切換至網頁字型，使用者可能會在網頁上看到內容突然移動。

建議您稍待片刻再顯示文字，如果網頁字型在時間到期前載入，系統就會使用網頁字型顯示文字，不會發生內容位移。如果時間到期後網頁字型仍未載入，系統會使用系統字型顯示文字，確保使用者至少能閱讀內容。

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

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

如果想在文字算繪後繼續使用系統字型，請使用 font-display 值 fallback。

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

變數字型

如果您使用同一種字體的許多不同粗細或樣式，可能最終會使用許多個別字型檔案，也就是每種粗細或樣式各有一個字型檔案。

可變字型可使用單一檔案解決這個問題。變數字型檔案具有回應性，因此不必為一般、粗體、特粗體和其他變體分別建立檔案。其中包含在各種粗細或樣式中顯示字體所需的所有資訊。

也就是說，單一可變字型檔案會比單一一般字型檔案大，但單一可變字型檔案可能比多個一般字型檔案小。如果您使用許多不同的粗細，可變字型就能大幅提升效能。

網頁上的良好排版不僅僅是設計師所做的字體選擇，回應式字體排版也與尊重使用者的裝置和網路連線有關。無論以何種方式觀看，最終設計都能呈現最佳效果。

現在你已掌握回應式文字，接下來請深入瞭解回應式圖片。

隨堂測驗

測試你對排版的瞭解程度