曾幾何時，Web 上的打字“應該”使用無襯線字體。然后，對 Web 字體的意識出現了，以確保您的設計快速有效地加載。但互聯網排版的規則從早期開始就發生了變化。

現在，網站字體一點也不無聊，沒有理由堅持使用安全的無襯線字體，除非它能達到你的目的。

在制作網站時，網站排版的新規則  可能不是你所想的。

7個Web排版規則

要使用的字體類型

字體大小和比例

可讀性和可訪問性

可用性

空間和對比度

線路長度很重要

拆分文本

• 01. Web 排版中使用的字體類型

  現代互聯網排版的第一條規則是字體風格沒有對錯之分。

  是的，曾經有一段時間建議在網頁設計和應用程序設計中使用無襯線字體選擇。這有幾個原因，主要植根于與屏幕分辨率相關的可讀性。

  早期的屏幕沒有幾乎所有臺式機、平板電腦和移動設備的標準清晰度、高質量顯示屏。由于無襯線字體的簡單性，它們在低分辨率設備上更清晰，更容易準確呈現。對于大多數設計師來說，這已經不再是一個真正的問題。

  所以，嘗試一下其他排版風格。混合和匹配襯線、無襯線，甚至手寫字體或實驗性字體。

  在決定如何設計網站時，關于使用哪種字體（無論風格如何）也有很多神話。

  最常見的字體類別包括：

  Web 字體：一旦有人訪問網頁，瀏覽器就會自動下載這些類型的字體，這意味著任何（和每個）瀏覽器都以完全相同的方式呈現它們。Web 字體是一種 CSS 功能，具有廣泛的兼容性。

  系統字體：這些字體使用計算機上安裝的字體在網站上呈現排版。這仍然是一種相當普遍的做法，但與 Web 字體不同的是，對于不同的用戶和設備，最終的設計看起來會有所不同。

  可變字體：網站字體交付的最新方法是通過可變字體，這是一種 OpenType 字體規范，可以將字體的許多不同變體合并到一個文件中，而不是為每個寬度、粗細或樣式提供單獨的字體文件。這使得字體動畫化成為可能，使它們在各種寬度、粗細和樣式之間流暢地移動。

  這里沒有使用正確或錯誤的字體類型。它們各有優點和缺點，您應該與您的網站設計需求和目標保持一致。

  話雖如此，許多開發人員正在將可變字體合并到重新設計和構建中。它確實可以很好地提供靈活性，讓您可以以有效的方式使用所需的字體。

• 02. 字體大小和比例

  傳統上，我們以固定高度的測量值來測量排版，例如點、x 高度和像素。把它扔出窗外！

  對于Internet字體，您應該使用相對度量來創建排版比例，以便無論大小、瀏覽器或設備類型如何，所有內容都保持相同的比例。

  通常，1 em 是 16 像素，基于固定測量值。由于這是常見的正文文本大小，因此最好從縮放類型開始。如果您希望正文文本大約為 18 px，請進行一些數學運算：將所需的大小（以像素為單位）除以父字體大小，以找到以 ems 為單位的度量值（例如 18/16=1.125 em）。

  對于相當精確的度量單位，Ems 最多可以指定小數點后三位。

  使用百分比設計字體大小和縮放比例與使用 ems 非常相似。

  從基本字體大小開始。通常，這是正文文本，因為它是整個設計中最常用的文本，因此它是排版比例的推薦起點。

  然后，使用基于默認字體大小的百分比值生成不同文本元素的文字大小（例如，如果默認值為 16，則為 150%=24）。建立度量單位后，應用數學運算為項目創建視覺比例。

  此工具不僅顯示了像素和 ems 之間的良好轉換，而且還應用了幾種不同的比例，允許您更改預覽字體選擇和基本字體大小或完全創建自定義比例。

  使用百分比或 ems 的好處是，這些度量單位也可以提供可訪問性優勢

  由于文本大小基于用戶偏好，因此在屏幕上使用較大文本（或更小）的用戶將獲得與堅持默認設置的用戶相同的用戶體驗。由于調整大小適用于數學計算，而不是固定大小，因此它以相同的方式按比例考慮幾乎所有用戶/瀏覽器設置。

  換句話說，使用固定測量可以防止在瀏覽器級別進行必要的調整。許多用戶更改了他們的默認設置或使用縮放瀏覽器，您肯定希望您的網站相應地適應。

  好的網站排版是可用的、可讀的和可訪問的。

• 03. 可讀性和可訪問性

  好的網站排版是可用的、可讀的和可訪問的。

  為確保可讀性，請將排版比例連接到 CSS 自定義屬性。

  這聽起來可能很基本，但確保排版的視覺和技術方面匹配可以創造閱讀的一致性。反過來，由于視覺模式，這種一致性使內容更易于掃描和消化。

  因此，通過鏈接視覺層次結構和 CSS 層次結構，有更好的機會創建搜索引擎和用戶可以輕松閱讀的內容。

  技術排版中要考慮的另一個重要方面是為網站選擇一些最好的字體，這些字體易于各種能力的讀者理解。對于主字體，需要考慮一些準則，以確保您設計的是輔助類型元素：

  使用無需幫助即可閱讀的基本字體。這通常是 16 像素或更大，具體取決于字體。

  選擇具有較大且一致的 x 高度的字體。

  使用標題和副標題建立層次結構。

  使用相對刻度進行測量。

  避免使用文本圖像，因為它們可能看起來有顆粒感，搜索引擎無法讀取，并且無法根據設備大小進行縮放。

  根據 Web 內容輔助功能準則 （WCAG 2.1） 檢查文字樣式。

• 04. 可用性

  當談到排版時，可用性并不總是首先想到的事情。可用性通常與設計元素（如按鈕、鏈接或圖像）相關聯。

  但排版也必須可用。

  為了確保可用的字體設計，您可以做的第一件事是選擇并堅持使用有限的排版調色板。網站應使用 1 到 3 個字體系列。對于許多網站來說，兩種字體就足夠了。

  選擇具有不同視覺標識的字樣，這些字樣彼此不同。

  顏色也會影響可用性，有些往往不適用于文本。

  淺藍色：人們將淺藍色文本與鏈接相關聯。

  紅色或綠色：這些顏色可能會給色盲人士帶來可讀性問題。

  任何類似于背景的顏色：例如，灰色上的灰色可能難以閱讀。

  多種字體顏色：過多的裝飾會變得凌亂且難以匆忙閱讀;如果您打算使用彩色文字元素，請堅持只使用一種。

  最好的 Web 排版師也明白，在許多設備上使用文本元素作為鏈接可能是一個挑戰。對于用戶來說，點擊內聯文本鏈接在較小的屏幕上可能是一個挑戰，而在同一部分或段落中有多個鏈接時，則更具挑戰性。

  盡可能避免使用內聯文本鏈接，而是選擇按鈕。這提供了一個視覺提示，表明文本元素是一個鏈接，并提供了一個有助于消除用戶錯誤的可用函數。

• 05. 空間和對比度

  如果你還沒有考慮空間和對比度，那么這些與任何東西一樣都是好的 Web 排版的一部分。空間和合同有助于提高可讀性、可訪問性和視覺上令人驚嘆的文本。

  當談到間距時，最重要的文本間距可能是文本行之間的間距。太多的間距和段落或多層標題看起來不像是一起的，這可能會導致混淆并阻礙閱讀。空間太小會導致眼睛疲勞，使用戶因為閱讀不舒服而遠離副本塊。

請牢記以下規則：

對于大多數字體，行高的最好起點是字體大小的 1.5 倍。

對于較小、較淺或較窄的字體，添加更多空間可以提高可讀性。

對于超大字體，請考慮 80 px 或更高，稍微少一點的空間可能是理想的。

對于具有長下行字母的字體，請添加行距。

對于全部大寫、不帶下行字母的文本或帶有短下行字母的文本，請減小行距。

增加不同類型層次結構之間的行高，例如在標題和正文副本之間。

• 06. 線長很重要

  與字體選擇和大小同樣重要的是創建專為閱讀而設計的文本塊。文本元素越大，它就越重要。

  請將這些基本準則視為幫助確定正文文本容器元素大小的起點：

  在桌面設備上，舒適的行長是 45 到 80 個字符寬（包括空格和標點符號）。

  對于正文文本，理想的數字是每行 66 個字符。

  較小的屏幕應該在較短的線路長度方面犯錯。

• 07. 拆分文本

  在 Web 上閱讀時，文本不應設計得看起來像小說。

  好的網站排版包括字體選擇、樣式和層次結構，以及如何分解文本塊以方便閱讀。

  使用段落、列表、塊引用和不同的元素使用戶能夠掃描文本。用戶越容易掃描您的網頁并找到他們感興趣的信息，他們就越有可能留在您的頁面上。從在線營銷的角度來看，如果他們很容易理解頁面目標，他們也更有可能轉化。
  
  

嘗試不同的文本塊變體和格式，以確定您的受眾喜歡哪種類型的閱讀，并以該格式設計更多文本元素。請記住為每種不同的樣式創建適當的層次結構，例如項目符號或編號列表、引號、常見問題解答或其他文本元素的 CSS 規范。