曾幾何時(shí)，Web 上的打字“應(yīng)該”使用無襯線字體。然后，對 Web 字體的意識出現(xiàn)了，以確保您的設(shè)計(jì)快速有效地加載。但互聯(lián)網(wǎng)排版的規(guī)則從早期開始就發(fā)生了變化。

現(xiàn)在，網(wǎng)站字體一點(diǎn)也不無聊，沒有理由堅(jiān)持使用安全的無襯線字體，除非它能達(dá)到你的目的。

在制作網(wǎng)站時(shí)，網(wǎng)站排版的新規(guī)則  可能不是你所想的。

7個(gè)Web排版規(guī)則

要使用的字體類型

字體大小和比例

可讀性和可訪問性

可用性

空間和對比度

線路長度很重要

拆分文本

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

  現(xiàn)代互聯(lián)網(wǎng)排版的第一條規(guī)則是字體風(fēng)格沒有對錯之分。

  是的，曾經(jīng)有一段時(shí)間建議在網(wǎng)頁設(shè)計(jì)和應(yīng)用程序設(shè)計(jì)中使用無襯線字體選擇。這有幾個(gè)原因，主要植根于與屏幕分辨率相關(guān)的可讀性。

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

  所以，嘗試一下其他排版風(fēng)格。混合和匹配襯線、無襯線，甚至手寫字體或?qū)嶒?yàn)性字體。

  在決定如何設(shè)計(jì)網(wǎng)站時(shí)，關(guān)于使用哪種字體（無論風(fēng)格如何）也有很多神話。

  最常見的字體類別包括：

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

  系統(tǒng)字體：這些字體使用計(jì)算機(jī)上安裝的字體在網(wǎng)站上呈現(xiàn)排版。這仍然是一種相當(dāng)普遍的做法，但與 Web 字體不同的是，對于不同的用戶和設(shè)備，最終的設(shè)計(jì)看起來會有所不同。

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

  這里沒有使用正確或錯誤的字體類型。它們各有優(yōu)點(diǎn)和缺點(diǎn)，您應(yīng)該與您的網(wǎng)站設(shè)計(jì)需求和目標(biāo)保持一致。

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

• 02. 字體大小和比例

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

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

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

  對于相當(dāng)精確的度量單位，Ems 最多可以指定小數(shù)點(diǎn)后三位。

  使用百分比設(shè)計(jì)字體大小和縮放比例與使用 ems 非常相似。

  從基本字體大小開始。通常，這是正文文本，因?yàn)樗钦麄€(gè)設(shè)計(jì)中最常用的文本，因此它是排版比例的推薦起點(diǎn)。

  然后，使用基于默認(rèn)字體大小的百分比值生成不同文本元素的文字大?。ɡ?，如果默認(rèn)值為 16，則為 150%=24）。建立度量單位后，應(yīng)用數(shù)學(xué)運(yùn)算為項(xiàng)目創(chuàng)建視覺比例。

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

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

  由于文本大小基于用戶偏好，因此在屏幕上使用較大文本（或更?。┑挠脩魧@得與堅(jiān)持默認(rèn)設(shè)置的用戶相同的用戶體驗(yàn)。由于調(diào)整大小適用于數(shù)學(xué)計(jì)算，而不是固定大小，因此它以相同的方式按比例考慮幾乎所有用戶/瀏覽器設(shè)置。

  換句話說，使用固定測量可以防止在瀏覽器級別進(jìn)行必要的調(diào)整。許多用戶更改了他們的默認(rèn)設(shè)置或使用縮放瀏覽器，您肯定希望您的網(wǎng)站相應(yīng)地適應(yīng)。

  好的網(wǎng)站排版是可用的、可讀的和可訪問的。

• 03. 可讀性和可訪問性

  好的網(wǎng)站排版是可用的、可讀的和可訪問的。

  為確?？勺x性，請將排版比例連接到 CSS 自定義屬性。

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

  因此，通過鏈接視覺層次結(jié)構(gòu)和 CSS 層次結(jié)構(gòu)，有更好的機(jī)會創(chuàng)建搜索引擎和用戶可以輕松閱讀的內(nèi)容。

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

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

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

  使用標(biāo)題和副標(biāo)題建立層次結(jié)構(gòu)。

  使用相對刻度進(jìn)行測量。

  避免使用文本圖像，因?yàn)樗鼈兛赡芸雌饋碛蓄w粒感，搜索引擎無法讀取，并且無法根據(jù)設(shè)備大小進(jìn)行縮放。

  根據(jù) Web 內(nèi)容輔助功能準(zhǔn)則 （WCAG 2.1） 檢查文字樣式。

• 04. 可用性

  當(dāng)談到排版時(shí)，可用性并不總是首先想到的事情。可用性通常與設(shè)計(jì)元素（如按鈕、鏈接或圖像）相關(guān)聯(lián)。

  但排版也必須可用。

  為了確保可用的字體設(shè)計(jì)，您可以做的第一件事是選擇并堅(jiān)持使用有限的排版調(diào)色板。網(wǎng)站應(yīng)使用 1 到 3 個(gè)字體系列。對于許多網(wǎng)站來說，兩種字體就足夠了。

  選擇具有不同視覺標(biāo)識的字樣，這些字樣彼此不同。

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

  淺藍(lán)色：人們將淺藍(lán)色文本與鏈接相關(guān)聯(lián)。

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

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

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

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

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

• 05. 空間和對比度

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

  當(dāng)談到間距時(shí)，最重要的文本間距可能是文本行之間的間距。太多的間距和段落或多層標(biāo)題看起來不像是一起的，這可能會導(dǎo)致混淆并阻礙閱讀?？臻g太小會導(dǎo)致眼睛疲勞，使用戶因?yàn)殚喿x不舒服而遠(yuǎn)離副本塊。

請牢記以下規(guī)則：

對于大多數(shù)字體，行高的最好起點(diǎn)是字體大小的 1.5 倍。

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

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

對于具有長下行字母的字體，請?zhí)砑有芯唷?/span>

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

增加不同類型層次結(jié)構(gòu)之間的行高，例如在標(biāo)題和正文副本之間。

• 06. 線長很重要

  與字體選擇和大小同樣重要的是創(chuàng)建專為閱讀而設(shè)計(jì)的文本塊。文本元素越大，它就越重要。

  請將這些基本準(zhǔn)則視為幫助確定正文文本容器元素大小的起點(diǎn)：

  在桌面設(shè)備上，舒適的行長是 45 到 80 個(gè)字符寬（包括空格和標(biāo)點(diǎn)符號）。

  對于正文文本，理想的數(shù)字是每行 66 個(gè)字符。

  較小的屏幕應(yīng)該在較短的線路長度方面犯錯。

• 07. 拆分文本

  在 Web 上閱讀時(shí)，文本不應(yīng)設(shè)計(jì)得看起來像小說。

  好的網(wǎng)站排版包括字體選擇、樣式和層次結(jié)構(gòu)，以及如何分解文本塊以方便閱讀。

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

嘗試不同的文本塊變體和格式，以確定您的受眾喜歡哪種類型的閱讀，并以該格式設(shè)計(jì)更多文本元素。請記住為每種不同的樣式創(chuàng)建適當(dāng)?shù)膶哟谓Y(jié)構(gòu)，例如項(xiàng)目符號或編號列表、引號、常見問題解答或其他文本元素的 CSS 規(guī)范。