網頁設計師的 20 個最佳排版教程

一些網頁設計師可能認為排版是網頁設計中最不重要的元素之一，但它可以通過多種方式成就或破壞用戶體驗。

好的排版選擇可以增強易讀性、可讀性、品牌標識、可訪問性和轉換率。 另一方面，糟糕的排版選擇會削弱這些因素並破壞用戶體驗。

因此，排版是網頁設計的一個重要方面，也是每個設計師在開始網頁設計業務時都應該學習的東西。 值得慶幸的是，網絡上充滿了對網頁設計師有用的排版教程和課程。

在本文中，我們將回顧 20 個網頁設計教程。 雖然其中許多教程都可以免費在線獲得，但我們也提供了一些付費在線課程。 畢竟，當您嘗試尋找網頁設計工作時，您需要能夠讓自己與眾不同，而獲得認可機構或課程提供者的結業證書可以幫助您做到這一點。

從基本的排版術語到使用 CSS 優化字體，我們為設計師收集了最好的排版教程。

技能水平：初級到中級

時長： 30分鐘

費用：免費

這個排版教程來自 Elementor，這意味著您將學到的不僅僅是如何在網頁設計中使用排版。 您將學習如何在 WordPress 和 Elementor 的上下文中將所有這些付諸實踐——例如格式化、建立視覺層次結構、創建設計系統等等。

技能水平：初級到中級

長度： 17 : 31

費用：免費

在某些情況下，WordPress 不會提供您想要使用的特定字體。 因此，通過 Elementor 的這個排版教程，您將了解將自定義字體添加到 WordPress 網站的選項。 您可以使用 CSS 手動將它們添加到 WordPress，也可以將它們上傳到 Elementor 並從編輯器中使用它們。

技能水平：初級到中級

時長： 6 : 50

費用：免費

在 Elementor 的這段視頻中，您將了解有關 Elementor 編輯器中全局設置功能的所有信息。 本教程將向您展示如何使用此功能來設置顏色和字體，然後觀看它們在站點範圍內的應用。 因此，如果您想節省更新字體的時間並希望為您構建的每個站點帶來更大的一致性，那麼這個簡短的視頻教程是必看的。

技能等級：初級

長度：10: 33

費用：免費

這個來自 Envato Tuts+ 的視頻教程的名字有點誤導。 它應該被稱為“基本排版術語的終極指南”。 也就是說，如果您是排版的新手，這是您邁出的重要第一步。 熟悉與排版、字體、文件類型、字體結構、排版等相關的術語。

技能等級：初級

長度： 18分鐘閱讀

費用：免費

這個來自 Hubspot 的排版教程是另一個有用的設計排版介紹。 您將學習常用術語、不同風格的排版以及字體的來源。

技能等級：初級

時長： 8小時

費用：免費

如果您正在尋找更深入的排版介紹，加州藝術學院的這門課程是一個不錯的選擇。 參加本課程是免費的，這是一個巨大的優勢，因為您將從中獲得大量有用的信息。 您將了解排版的歷史、它的結構、如何使用它來講述一個故事、操縱它的外觀等等。

技能等級：初級

時長： 15分鐘

費用：免費

如果您是設計新手，Envato Tuts+ 的本教程將很好地介紹字體心理學。 與色彩心理學類似，您將了解對某些字體類型的常見情緒反應和關聯，並獲得有關如何利用它們為您帶來優勢的提示。

技能水平：初級到中級

時長： 6.5 小時

費用： 109.99 美元

Udemy 的 Web 排版課程由 Interface School 的 Rob Sutcliffe 教授。 這是一個相當技術性的排版概述，檢查了不同類型的分類、選擇和配對字體的技巧、使您的網絡排版可讀和響應，等等。

要從本課程中獲得最大收益，您應該具備一些 HTML、CSS 和 JavaScript 的應用知識。 這並不意味著如果你是一名新設計師，你不應該註冊——你可以終生使用它，所以一旦你在該領域磨練了你的技能，你就可以回到它。

技能等級：初級

時長： 13小時

費用：免費

科羅拉多大學博爾德分校的這門課程可在 Coursera 網站上找到。 這是一門很長的課程，在此期間，您將學習如何操縱文本元素來講述您的設計故事。 本課程介紹了基礎知識，然後擴展到排版間距、選擇字體、字體配對等。

技能等級：中級

時長： 8.5 小時

成本： 99.99 美元

Muhammad Ahsan Pervaiz 是這門 4.5 星級 Udemy 排版課程的創建者。 如果您想接受有關排版基礎知識、自定義排版、選擇和配對字體等方面的全面培訓，這是一門很棒的課程。 課程中內置了練習，因此您還將獲得實踐經驗，在學習過程中實施所學的一切。

技能等級：初級

時長： 12 : 55

費用：免費

到目前為止，您在此列表中看到的許多教程和課程都涉及字體類型的主題。 然而，這個 Envato Tuts+ 教程深入探討了這個主題，分解了字體的不同類型和子類別。 通過學習如何識別每種結構的差異，您可以更輕鬆地為您的網站選擇正確的排版樣式。

技能等級：初級

長度： 9 : 58

費用：免費

這個來自 Flux 的排版教程是關於為你的網站尋找高質量的字體。 討論主要圍繞網頁設計師如何尋找高質量的字體代工廠和網站來獲取他們的字體。 因為，即使您了解所需的字體類型，劣質的字體（即使它符合該樣式）也可能會破壞您所有的辛勤工作。 本教程將幫助您避免該問題。

技能等級：初級

時長： 10分鐘

費用：免費

這是一份來自 Google Design 的實用指南，內容涉及如何確定適合您構建的每個網站的網絡字體。 本教程將帶您了解一系列因素，例如項目範圍和多語言設計，然後向您指出滿足您項目需求的 Google 字體。

技能等級：初級

長度： 7 : 35

費用：免費

在 Satori Graphics 的這份分步指南中，您將獲得有關為項目選擇字體的實用指南和技巧。 儘管這裡非常強調圖形設計，但您可以應用相同的五個步驟來為您工作的任何內容選擇和配對字體，無論是網站、應用程序、徽標還是其他類型的品牌宣傳品。

技能等級：初級

長度： 9 : 41

費用：免費

Flux 的這個 YouTube 教程將教您如何擺脫基於假設或直覺告訴您的內容來選擇字體。 相反，您將基於功利主義來處理字體選擇。 你會得到一些幫助，找到提供圖形樣本的字體代工廠，所以，同樣，你不只是脫離直覺告訴你的字體看起來有多好。

技能水平：初級到中級

時長： 1小時

費用：免費

字體配對絕對是一門藝術。 所以，如果你要學習如何去做，它應該來自設計領域的領導者之一。 本袖珍指南由 Adob​​e Typekit 和 Adob​​e Type 的排版主管 Tim Brown 創建。 本指南將教您如何確定您需要字體完成哪些工作，如何選擇錨字體，如何識別與錨互補的字體，然後客觀地判斷您的配對。

技能等級：初級

時長： 10分鐘

費用：免費

這個來自 ThemeIsle 的簡單教程將為您提供兩種更改 WordPress 字體的選項。 您可以從 WordPress 定制器中選擇 Web 字體。 或者您可以安裝 Easy Google Fonts 插件並使用定制器設置 Google Fonts。 雖然包含一個獎勵選項，但最好使用 WordPress 的通用字體設置，而不是按塊或頁面更改字體。

技能水平：中級到高級

時長： 11分鐘

費用：免費

Edoarda Cavazza 為 Smashing Magazine 寫了這篇很棒的文章，該文章涉及使用 CSS 來提高網站排版的易讀性和可訪問性。 具體來說，本教程將介紹如何使用間距為訪問者創造最佳類型的閱讀體驗。 如果您還沒有了解字距調整、前導或跟踪，或者對 CSS 沒有基本的了解，請從這個排版教程列表的開頭開始，稍後再回到這個教程。

技能水平：中級到高級

時長： 20分鐘

費用：免費

可變字體是一個相對較新的事物，但它們正在迅速獲得瀏覽器範圍的支持，這意味著設計人員和開發人員是時候開始使用它們了（如果您還沒有的話）。 正如 Google 開發人員團隊在本指南中解釋的可變字體，它們在網站性能方面非常有價值，因為它們允許您將字體的不同變體保存到單個文件中。 要了解如何執行此操作，您需要了解一些 CSS 知識。

技能水平：初級到高級

長度： 30 : 14

費用：免費

這是一個有趣的教程，因為它根本不是教程。 在 30 分鐘的過程中，您將看到 The Futur 評估用於創建自己的排版手冊的排版。 雖然他們正在評估印刷手冊，但它仍然是一個有用的練習，因為它會教您如何審查自己的工作並習慣於從一開始就為您的排版做出更明智的選擇。

一旦您花一些時間學習這些排版教程並掌握了基本知識，就可以將其全部付諸實踐。

要記住的一件事是，排版，就像設計中的其他一切一樣，會隨著時間的推移而發展。 基本原則和指導方針將保持不變，但就人們對排版的品味而言，預計會發生變化。

因此，除了掌握排版的基礎知識外，請確保您也與排版趨勢保持同步。