每個設計師都應該知道的 10 條網頁排版規則

您可以在您的網頁設計中加入許多元素，這些元素將創造參與度並吸引訪問者的注意力。 這些包括圖像、視頻，甚至聲音。 然而，幾乎每個網站最重要的部分是訪問者為了獲取他們閱讀的信息而閱讀的內容。

如果你想讓這些信息更容易閱讀、視覺上更有趣，並且讓文本添加到網站的整體設計中，你必須了解排版。 這是使書面文字既實用又美觀的藝術和技巧。

如果您想學習使用排版來發揮自己的優勢，請查看每個設計師都應牢記的這 10 條規則。

1. 在初始設計過程後停止使用 LoremIpsum

如果內容為王，為什麼在網頁設計過程中沒有認真考慮？ 通過使用虛假內容作為佔位符，網頁設計師將內容降級為次要角色。 這是一個很大的跡象，表明設計優先級完全不合時宜。 在早期階段問題不大，例如，當您模擬各種頁面佈局時。 但是，一旦您縮小範圍，在創建最終設計時使用實際的 Web 內容非常重要。 這確保了在特定網頁上所說的內容與佈局和視覺元素一樣重要。

除此之外，在設計和佈局方面擁有實際的文本很重要。 您不想處於完全設計網頁的位置，只是發現它不適用於實際內容。 這就是為什麼盡快從內容作者的客戶那裡獲取實際文本非常重要的原因。

2. 使文本無襯線

襯線文字絕對漂亮。 這些字體非常適合用於打印，以及用於較大的打印應用程序，例如標題、標題和副標題。 不幸的是，在屏幕上，當涉及較小的內容顯示（例如文本塊）時，襯線不能很好地縮放。 較大尺寸看起來不錯的襯線，當字體變小時使文本難以閱讀。 因此，建議為大文本保存襯線並在可讀性可能成為問題時依賴無襯線。 更好的是，擁抱無字體的干淨、時尚、現代的外觀，並為印刷機保存襯線。 這樣，您將永遠不必處理可讀性下降的問題，而轉而使用看起來漂亮的字體。

3. 在設計過程的早期考慮智能引號和其他符號

很有可能，您訪問的網站某些符號無法正確顯示。 有時它們被替換為一個問題或一串看起來很奇怪的字符。 其他時候，他們根本不在那裡。 這經常發生在智能或“捲曲”引號中。 這通常是在 MS Word 或其他軟件包中創建文本然後移植到網頁的結果。 事情根本沒有按預期翻譯。 歐元符號、雙字節字符和其他取自外國內容的符號也很常見。

為了在您的最終設計中避免這個問題，您有幾個選擇。 首先，您可以修改您的內容以擺脫這些符號。 如果您願意將符號更改為自然語言，則此方法有效。 您還可以使用 HTML 來確保符號正確顯示，而不是僅僅依靠複製和粘貼。 無論您決定什麼，請務必在您可以使用的每個瀏覽器中測試網頁。 在一個瀏覽器中可能解決符號問題的方法在另一種瀏覽器中可能根本無效。

4. 高級 CSS 技能極其重要

如果您具備良好的 CSS 技能，您的訪問者應該能夠以絕對無縫的方式瀏覽您網站的頁面。 如果您正確創建樣式表，您甚至可以擁有同一頁面的多個版本，同時在排版方面仍保持良好的連續性。 當然，你不需要使用很多詭計。 好的 CSS 可以幫助您避免小而常見的問題，例如字體和字體大小從一頁更改為下一頁。

為什麼一致的排版如此必要？ 使用 CSS 來保持一致的排版可以讓您的網站看起來專業而清晰。 這也意味著您在設計每個頁面時不需要考慮排版。 相反，您只需使用適當的樣式表。 如果您確實決定在特定頁面上打破常規並使用排版做一些不同的事情以產生效果或引起對某事的注意，那麼由於您使用了 CSS，它將更加突出。

5. 微觀和宏觀排版都很重要

微排版涉及與可讀性相關的排版細節。 例如，間距是與微排版相關的一個問題，縮放和對比度也是如此。 您為確保文本塊在任何設備或瀏覽器上可讀而進行的調整都與微排版有關。

宏觀排版與您對排版的選擇與整體設計的聯繫方式有關。 它與美學有關。

良好的排版同時考慮了微觀和宏觀排版。 您是否曾經訪問過一個使用非常整潔的自定義字體且幾乎無法閱讀的網站？ 當關注宏觀排版而不是微觀排版時，就會發生這種情況。

6. 了解內容和設計

如您所知，一個好的網站是有流量的。 部分原因是頁面上內容的可讀性。 我們已經討論過襯線如何影響這一點，並且我們已經討論了在設計的後期階段，虛擬文本如何無法替代真實文本。 我們還沒有結束。 內容真的為王。 一旦最終設計（包括內容）到位，您就必須閱讀網頁。

當你在設計完成後閱讀內容時，可以判斷是否存在間距或換行問題。 這些可能會使內容混亂，甚至會無意中改變內容的含義。 通過使用一些排版技巧來解決這些問題可以確保您的最終產品準確傳達您或您的客戶的意圖。

7.了解層次結構的重要性

層次結構是您提供給訪問您網站的人的路線圖。 您可以使用圖像、視頻、顏色和（當然）排版來創建該層次結構。

只需將訪問者從您希望他們看到的第一件事引導到下一個，依此類推。 通過排版，您可以使用大小、字體更改和間距來幫助定義您希望用戶遵循的層次結構。 事實上，如果您有一個沒有轉換的頁面，您可能想嘗試一下排版，看看您所做的任何更改是否有助於引導訪問者訪問號召性用語按鈕。

8. 有創意但謹慎使用顏色

確保您永遠不會因字體顏色和背景顏色問題而出現可讀性問題的最簡單方法是使用對比度最高的顏色，黑色和白色。 不幸的是，這可能會導致一些非常無聊的設計。

不要害怕使用顏色。 事實上，不要害怕使用看起來不起作用的顏色組合。 有時，只需將一兩個色調變淺或變深即可。 然後，您的排版從不可讀變為完全可辨別且看起來非常酷。

9. 拋棄居中的文本

居中文本的問題很多。 首先，它可以使您的網頁類似於設計不佳的傳單。 除此之外，您幾乎總是會遇到奇怪的頁邊距和文本，看起來好像是舊搖滾專輯中的一首詩或襯裡筆記。 雖然可以在標題中使用居中文本，但通常最好完全避免使用它。 堅持使用左調整文本，您的讀者會發現您的內容更易於閱讀。

10.考慮一下你的文本放大後的樣子

無論他們使用拇指和食指還是單擊縮放按鈕，人們都會將您的文本放大。 有時，他們這樣做是為了補償較小的屏幕。 其他時候，他們這樣做只是因為他們很難以正常大小閱讀您的文本。

如果每個人都能夠按預期查看您的文本，那就太好了，但是嬰兒潮一代通常需要一些額外的幫助才能查看文本，這根本不可能。 注意不要使用放大後會變質的字體。

有用的工具和資源

以下是一些有用的工具和資源，可幫助您在排版方面做得更多：

• FontFace Ninja ：此實用程序可幫助您識別在 Internet 上找到的字體。 當您遇到真正吸引您眼球的字體時，這是一個很棒的工具。 此 Chrome 插件將幫助您識別、查找和購買您在任何網站上看到的任何商用字體。
• TypePlate ：這是一個完整的排版框架，非常適合網頁設計師。 TypePlate 可以處理首字下沉、塊引號、縮放、顏色和各種其他與排版相關的挑戰。
• 模塊化比例：這是一種比例，可讓您確定理想的字體和字體大小。 它還可以幫助您在標題和標題的字體大小與您為文本選擇的字體之間建立平衡。
• TIFF ：此工具允許您調出兩種不同的字體。 然後，它會為您顯示兩種字體之間的差異。 它甚至允許您比較一種字體和另一種字體的不同字母和數字。
• TypeWolf ：使用這個網站來修復一些最酷的字體和最鼓舞人心的互聯網上的排版使用。 這是靈感和信息的絕佳來源。
• 為什麼字體很重要，Sarah Hyndman ：這是一本很好的書，探討了字體的重要性，以及排版如何影響心態。 對於那些對排版充滿熱情的人來說，這是一本很棒的書，但對於那些可能需要說服選擇正確工作類型的重要性的人來說，這也是一本好書。

結論

希望這篇文章能夠影響網頁設計師對排版進行更多思考，並找到在他們的設計中更有效、更有創意地使用字體的方法。