2021年響應式排版大小和比例指南

時間：2024-05-16 21:30:01 | 來源：建站知識

時間：2024-05-16 21:30:01 來源：建站知識

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

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

讓我們深入研究響應式排版最佳實踐、一些指南和一些工具，以幫助您創(chuàng)建任何尺寸的出色字體。

響應式排版入門



可靠的響應式排版計劃將確保您的內容可跨設備閱讀。它確保您已經為交互、大小和縮放制定了一組規(guī)則，這將有助于跨設備呈現所有內容。

好處是對于大多數網站來說，這幾乎可以縮減為兩種尺寸：桌面版和移動版。（過去幾年，用于一般網頁瀏覽的平板電腦總體使用量急劇下降。）

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

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

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

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

• 排版選擇：首先使用在小屏幕上看起來很棒且可讀性好的字體。然后在更大的屏幕上測試它。
• 限制類型選項：在加載時間方面，較小的調色板更易于管理并且重量更輕。
• 考慮一個后備以防萬一：如果您想要的字體無法加載（可能設備不喜歡它或 CDN 服務器已關閉），請允許使用非常常見的替代選擇。（Arial 是 sans serif 字體的流行后備選擇。）
• 基于內容的設計大小和比例：可讀的排版可以像字體選擇一樣依賴于其他內容。文本元素的比例和大小通常會根據一次渲染的文本數量和屏幕上的內容類型而有所不同。
• 注意行高：行之間的一點額外空間可以提高移動設備的可讀性?？臻g太大和太小之間存在微妙的平衡。對于較小的尺寸，150% 或 1.5em 的行高可能是一個不錯的起點。
• 字體類別：設計師確實愿意使用更多字體變體——襯線字體、實驗字體等——作為一般做法。當屏幕較小或在用戶可能更主要使用暗模式的屏幕上時，這些可能會帶來一些挑戰(zhàn)。如果你走這條路，盡早測試類型選擇以確?？勺x性。

響應式字體大小超越像素



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

為響應式設計創(chuàng)建字體需要大量考慮大小和比例。每個設計師可能對他們想要使用什么類型的尺寸單位有不同的看法。

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

• 像素：數字字體大小的常用符號，表示絕對數字
• 要點：更多來自印刷品的結轉尺寸，在網上不太常見
• Ems：相對于父字體大小調整大小
• Rems：繼承根樣式的大小調整
• 百分比：根據父樣式的百分比變化來調整大小

大多數設計師避免使用絕對數字單位，而更喜歡百分比或 em 和 rems。使用此模型，您可以從基本大?。ɡ缯模╅_始，然后從那里調整大小。

它可以使數學更容易（1rem 大約為 10 像素），并允許僅通過更改默認字體大小來進行全面調整。

默認大小的情況如何？

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

如果您為桌面和移動設備調整正文文本或其他默認字體大小，則其余部分將由比例尺處理。

找到合適的比例



字體比例決定了在基本字體或默認字體中植根的字體大小。如果您喜歡百分比或 1em（如果這是您的首選單位），則使用此方法您的基本大小為 100%。

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

有一些常見的排版比例可以創(chuàng)建不同的感覺和和諧，這些比例比隨機分配值到字體大小更容易數學計算。

高對比度型刻度

非常適合大屏幕，這些比例在尺寸之間有很多變化。由于大小的差異，H1 和正文文本庫會產生很多戲劇性。

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

• 增強四，1.414
• 完美五分之一，1.500
• 黃金比例，1.618

中等對比度的量表

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

這些量表包括：

• 小三，1.200
• 大三度，1.250
• 完美第四，1.333

低對比度類型刻度

最小可變比例最適合用作標識符的較小類型元素。您可能會在基于儀表板的應用程序、電子商務列表或基于網格的元素中看到這種類型的規(guī)模。

這些量表包括：

• 小二，1.067
• 大二，1.125

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

• 視覺比例計算器（如上所示）
• 純 CSS 中的響應式字體
• MDN 字體大小屬性
• 排版比例計算器
• 簡單的響應式字體大小計算器

展望內在排版



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

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

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

您可以使用Typetura 工具嘗試一下。

結論

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

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