如果您沒有為文字指定任何樣式，瀏覽器會自行套用預設樣式。這就是所謂的使用者代理程式樣式表，可能會因瀏覽器而異。使用者也可以設定自己的文字顯示偏好設定。
如果您未指定行長度，瀏覽器會在螢幕邊緣自動換行。因此網頁文字預設為採用回應式設計，因為文字會隨著使用者的可視區域調整。
但即使文字填滿螢幕，也不代表文字更加舒適。良好的字體排版就是以適當的方式呈現文字。比起選擇適合的字型，字型排版有更多的選擇。需要考量使用者的偏好、文字大小、行長度以及文字行間的距離。
文字大小
我們很難判斷網路上的文字大小。
如果有人使用較小的螢幕，對方螢幕可能會與您的雙眼距離很近 (只有一隻手遠距離) 可能是很安全的做法。
不過，隨著螢幕尺寸不斷擴大，連結更難連結。筆電尺寸的螢幕可能就接近觀眾附近，但寬螢幕的桌機螢幕尺寸則與電視螢幕差不多。人們坐在離電腦螢幕前的手臂長度很遠，但是離電視遠遠。
儘管如此，雖然您不清楚使用者與螢幕有多遠，但您可以試著使用文字大小，這樣就能適當分辨出適當文字。配合較小的螢幕和較大的文字，使用較小的字體。
您可以使用媒體查詢功能，在螢幕大小增加時變更 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() 的值相同。開頭值會指定最小尺寸，在本範例中為 1 分鐘，以免超過使用者偏好的字型大小。結尾值可指定大小上限。
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
現在文字大小會根據使用者螢幕的比例縮小和放大，但文字大小一律不會小於 1rem 或 2rem。
文行長度
網路上並非列印網路，但我們可以從印刷世界學習經驗，並在網路上應用到網路上。
在經典圖書《The Elements of Typographic Style》(泰波圖形風格的元素) 中，Robert Bringhurst 在他的經典書籍中談論了線條長度 (或度量)：
普遍認為，從 45 到 75 個字元的任何內容，都是滿意的單欄行長，而對於文字大小的 Serif 文字表面所設的單欄網頁長度。普遍認為包含 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 屬性，指示瀏覽器如何管理將系統字型切換為網頁字型的方式。您可以選擇在網頁字型載入之前，完全不顯示文字。您可以選擇立即顯示系統字型，然後在載入後切換至網路字型。這兩種策略各有優缺點。如果您等到網頁字型下載後才顯示任何文字，使用者可能會在空白頁面上感到很失望。如果您先以系統字型顯示文字，之後再切換為網頁字型，使用者可能會發現網頁的內容有明顯改變。
理想的做法是先等候一小段時間再顯示任何文字。如果網頁字型在該時間之前載入，系統會以網頁字型顯示文字，且不會發生內容位移。如果時間過後仍未載入網頁字型，系統會使用系統字型顯示文字，因此至少使用者能夠閱讀內容。
如果您仍希望網站字型在最終載入時取代系統字型，請使用 swap 的 font-display 值。
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
如要在文字轉譯後持續採用系統字型，請使用 fallback 的 font-display 值。
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
可變字型
如果您使用多種字體粗細或樣式，可能會使用許多不同的字型檔案，而每種粗細或樣式都有個別的字型檔案。
可變字型只需使用一個檔案即可解決這個問題。有別於一般、粗體、額外的粗體等項目專用的個別檔案，而是採用回應式字型檔案。其中包含了從多種權重或樣式顯示所需的所有資訊。
這表示單一可變字型檔案比單一一般字型檔案還大，但單一可變字型檔案可能會比多個一般字型檔案還小。如果您要使用多種粗細，可以視情況調整字型來提高成效。
良好的網頁字體排版，並不是只與設計人員相關。回應式字體排版也在於尊重使用者的裝置和網路連線。因此無論呈現方式，都能呈現出絕佳的視覺效果。
現在您對回應式文字都相當熟悉，現在可以進一步瞭解回應式圖片。
隨堂測驗
測驗您對字體排版的相關知識
必須新增樣式，文字才會在可視區域中自動換行。
clamp() 適用於流體字體排版，因為
calc() 函式clamp() 設定字體排版。clamp() 設定字體排版。在本指南中，建議使用哪種 line-height 值？
24pxline-height 的像素值。2rem1.52vwline-height) 發生問題。「font-display」的用途為何？
block 或 inline-block。