您網站設計的真正響應能力不僅僅是一(yī)個可擴展到每個設備的框架，它還要求排版調整到最佳可讀性。

響應式排版将進行調整，以便文本元素也會改變網站上的大(dà)小(xiǎo)和比例。雖然這是技術上的答案，但還有一(yī)種更重要的設計方法同樣重要，因爲僅更改文本元素的大(dà)小(xiǎo)并不總是足夠的。

讓我(wǒ)(wǒ)們深入研究響應式排版最佳實踐、一(yī)些指南(nán)和一(yī)些工(gōng)具，以幫助您創建任何尺寸的出色字體(tǐ)。

響應式排版入門

可靠的響應式排版計劃将确保您的内容可跨設備閱讀。它确保您已經爲交互、大(dà)小(xiǎo)和縮放(fàng)制定了一(yī)組規則，這将有助于跨設備呈現所有内容。

好處是對于大(dà)多數網站來說，這幾乎可以縮減爲兩種尺寸：桌面版和移動版。（過去(qù)幾年，用于一(yī)般網頁浏覽的平闆電(diàn)腦總體(tǐ)使用量急劇下(xià)降。）

在寬屏幕上看起來很棒的字體(tǐ)和比例在垂直方向的手持屏幕尺寸上可能無法很好地呈現。

現在是挑戰。在寬屏幕上看起來很棒的字體(tǐ)和比例在垂直方向的手持屏幕尺寸上可能無法很好地呈現。這可以決定您的字體(tǐ)選擇以及您如何規劃網站。（否則，您可能需要在桌面和移動設備之間切換字體(tǐ)，不建議這樣做。）

在您規劃設計時，重要的是要考慮排版元素作爲整個框架的一(yī)部分(fēn)，這樣您以後就不會遇到奇怪的響應式排版挑戰。（例如，超寬字體(tǐ)可以在移動屏幕上呈現獨特的可讀性挑戰。）

響應式排版設計注意事項包括：

排版選擇：首先使用在小(xiǎo)屏幕上看起來很棒且可讀性好的字體(tǐ)。然後在更大(dà)的屏幕上測試它。

限制類型選項：在加載時間方面，較小(xiǎo)的調色闆更易于管理并且重量更輕。

考慮一(yī)個後備以防萬一(yī)：如果您想要的字體(tǐ)無法加載（可能設備不喜歡它或 CDN 服務器已關閉），請允許使用非常常見的替代選擇。（Arial 是 sans serif 字體(tǐ)的流行後備選擇。）

基于内容的設計大(dà)小(xiǎo)和比例：可讀的排版可以像字體(tǐ)選擇一(yī)樣依賴于其他内容。文本元素的比例和大(dà)小(xiǎo)通常會根據一(yī)次渲染的文本數量和屏幕上的内容類型而有所不同。

注意行高：行之間的一(yī)點額外(wài)空間可以提高移動設備的可讀性。空間太大(dà)和太小(xiǎo)之間存在微妙的平衡。對于較小(xiǎo)的尺寸，150% 或 1.5em 的行高可能是一(yī)個不錯的起點。

字體(tǐ)類别：設計師确實願意使用更多字體(tǐ)變體(tǐ)——襯線字體(tǐ)、實驗字體(tǐ)等——作爲一(yī)般做法。當屏幕較小(xiǎo)或在用戶可能更主要使用暗模式的屏幕上時，這些可能會帶來一(yī)些挑戰。如果你走這條路，盡早測試類型選擇以确保可讀性。

響應式字體(tǐ)大(dà)小(xiǎo)超越像素

大(dà)多數設計師避免使用絕對數字單位，而更喜歡百分(fēn)比或 em 和 rems。

爲響應式設計創建字體(tǐ)需要大(dà)量考慮大(dà)小(xiǎo)和比例。每個設計師可能對他們想要使用什麽類型的尺寸單位有不同的看法。

最受歡迎的尺寸單位包括：

像素：數字字體(tǐ)大(dà)小(xiǎo)的常用符号，表示絕對數字

要點：更多來自印刷品的結轉尺寸，在網上不太常見

Ems：相對于父字體(tǐ)大(dà)小(xiǎo)調整大(dà)小(xiǎo)

Rems：繼承根樣式的大(dà)小(xiǎo)調整

百分(fēn)比：根據父樣式的百分(fēn)比變化來調整大(dà)小(xiǎo)

大(dà)多數設計師避免使用絕對數字單位，而更喜歡百分(fēn)比或 em 和 rems。使用此模型，您可以從基本大(dà)小(xiǎo)（例如正文）開(kāi)始，然後從那裏調整大(dà)小(xiǎo)。

它可以使數學更容易（1rem 大(dà)約爲 10 像素），并允許僅通過更改默認字體(tǐ)大(dà)小(xiǎo)來進行全面調整。

默認大(dà)小(xiǎo)的情況如何？

正文一(yī)般爲 16px 到 18px 或 1.6rem 到 1.8rem（移動設備爲 14px 到 16px）。然後您可以使用您喜歡的比例來相應地調整所有内容。

如果您爲桌面和移動設備調整正文文本或其他默認字體(tǐ)大(dà)小(xiǎo)，則其餘部分(fēn)将由比例尺處理。

找到合适的比例

字體(tǐ)比例決定了在基本字體(tǐ)或默認字體(tǐ)中(zhōng)植根的字體(tǐ)大(dà)小(xiǎo)。如果您喜歡百分(fēn)比或 1em（如果這是您的首選單位），則使用此方法您的基本大(dà)小(xiǎo)爲 100%。

然後選擇比例以及該比例如何與從 H1 到 H6 的 CSS 位置相關，依此類推。

有一(yī)些常見的排版比例可以創建不同的感覺和和諧，這些比例比随機分(fēn)配值到字體(tǐ)大(dà)小(xiǎo)更容易數學計算。

高對比度型刻度

非常适合大(dà)屏幕，這些比例在尺寸之間有很多變化。由于大(dà)小(xiǎo)的差異，H1 和正文文本庫會産生(shēng)很多戲劇性。

這些量表包括（數字是變化率）：

增強四，1.414

完美五分(fēn)之一(yī)，1.500

黃金比例，1.618

中(zhōng)等對比度的量表

這是大(dà)多數類型比例下(xià)降的地方，也是大(dà)多數屏幕尺寸的安全區域。它非常适合具有大(dà)量文本内容的設計。

這些量表包括：

小(xiǎo)三，1.200

大(dà)三度，1.250

完美第四，1.333

低對比度類型刻度

最小(xiǎo)可變比例最适合用作标識符的較小(xiǎo)類型元素。您可能會在基于儀表闆的應用程序、電(diàn)子商(shāng)務列表或基于網格的元素中(zhōng)看到這種類型的規模。

這些量表包括：

小(xiǎo)二，1.067

大(dà)二，1.125

在創建排版比例時，如果您不想自己進行數學計算或想要預覽尺寸的變化，那麽已經有一(yī)些很棒的資(zī)源和工(gōng)具可用。

視覺比例計算器（如上所示）

純 CSS 中(zhōng)的響應式字體(tǐ)

MDN 字體(tǐ)大(dà)小(xiǎo)屬性

排版比例計算器

簡單的響應式字體(tǐ)大(dà)小(xiǎo)計算器

展望内在排版

就網絡排版而言，接下(xià)來要考慮的是内在類型。今年早些時候，CSS-Tricks 的 Scott Kellum稱其爲“網絡文本樣式的未來”。

最簡單的解釋是，内在排版失去(qù)了獨特的文本風格；而是根據文本與區域的比例定義樣式。這樣做的原因是爲了增加靈活性和編寫更簡單的代碼。

結果是文本“自我(wǒ)(wǒ)調整”到它所在的容器并且不連接到視口。在适用于整個設計的比例範圍内，您可以擁有更多的預設尺寸。差異幾乎是無限的。

您可以使用Typetura 工(gōng)具嘗試一(yī)下(xià)。

結論

排版設計可以是任何網絡項目中(zhōng)最重要的元素。通過考慮文本将如何呈現以及它在各種尺寸下(xià)的閱讀方式，您正在爲所有人創造更有價值和更易于訪問的網絡體(tǐ)驗。

它從排版的堅實基礎開(kāi)始，并了解如何爲網站查看者進行調整，無論他們如何與設計互動。