排版是網站設計的重要方面。 選擇字體樣式很容易——大多數 現代網站建設者，只需單擊三下即可切換字體樣式。 然而，為網站選擇*正確*的字體樣式絕非易事。 具有正確排版的網站給人以專業的印象，並允許訪問者輕鬆閱讀。
在本文中，我們將探討版式的不同元素，並分享為您的網站選擇正確版式的技巧。
什麼是排版？
排版是安排字體的藝術和技術，使書面語言在顯示時清晰、可讀和吸引人。
在我們深入之前，您需要熟悉的一些基本排版元素包括：
字體和字體
字體是一組特定字符的設計。 例如，Times New Roman、Arial 或 Helvetica 是您過去可能遇到過的一些常見字體。
字體是字體的特定粗細、寬度和样式，例如 Arial Bold 或 Times New Roman Italic。
字體大小
字體的大小以點為單位。 在網頁設計中，字體大小以像素 (px)、ems (em)、rems (rem) 和百分比 (%) 來衡量。 像素 (px) 是一種絕對測量單位，它以固定的像素數定義字體大小。 另一方面，Ems (em)、Rems (rem) 和百分比 (%) 是基於網頁中不同元素的相對測量單位。 正確的字體大小取決於屏幕大小和讀者與屏幕之間的距離。
一般來說，16px - 20px 推薦用於桌面，14px - 18px 推薦用於移動設備。 您正在閱讀的本網站的字體大小為 18px，適用於桌面和移動屏幕。
行距
行間距是文本行之間的垂直空間量，也稱為行距。
等級制度
版式層次結構是指頁面上不同級別文本的排列。 大多數網頁設計師將內容按主題分成幾個部分，並使用排版層次結構使內容易於瀏覽和消化。
例如 – 這篇博文以標題文本（又名標題 1 或 H1）開頭，然後是不同的章節標題 (H2) 和副標題（H3、H4、粗體）、正文（您正在閱讀的內容塊） ) 和潛台詞（出現在頁腳部分的小字體）。
通過使用不同級別的標題、副標題、字體大小、字體粗細、顏色和空白——您可以創建清晰的視覺層次結構，引導用戶注意您最重要的信息，並使其更容易瀏覽和消化內容。
初學者的排版技巧
現在我們已經了解了基礎知識 - 讓我們看看一些可以應用於您的網站設計的可行技巧。
1. 選擇能反映您網站品牌個性的字體
不同的字體有不同的個性。 選擇與您網站品牌的身份和價值觀相符的品牌非常重要。 通常 - 無襯線字體可能更現代和時尚，而襯線字體可能更傳統和優雅。
對於初學者來說，通常最好從常用字體開始，例如 Arial、Helvetica、Roboto、Open Sans、Lato、Montserrat，甚至是 Verdana。 這些字體類型不僅適合大多數佈局設計，而且在大多數設備和瀏覽器上也廣泛可用—— 這使他們“網絡安全”.
排版示例
選擇字體時，要考慮易讀性、可讀性和語氣等因素，並確保它與您網站的整體風格和品牌相匹配。 以下是從萬維網上捕獲的一些現實生活中的例子。
2. 使用不超過三種字體
少即是多。 使用太多的字體通常會導致設計混亂和混亂。 一般的經驗法則是使用不超過 2-3 種不同的字體。 在 WHSR，我們在整個網站上只使用一種字體類型。
3.注意字體配對
字體應該相互補充，而不是相互競爭。 使用字體配對工具查找可以很好協同工作的字體。
4.行與行之間使用足夠的間距（行高）以提高可讀性
建議正文的行高至少為 1.5，並且可以根據字體大小和類型進行調整。 適當的行高有助於防止文本顯得局促或混亂——這使讀者更容易掃描并快速掌握您的內容的想法。
5.避免動畫文字
我們不再生活在 90 年代了。 動畫文本並不酷。 此外，它們可能會分散注意力並使您的內容難以閱讀。 相反，應謹慎而有策略地使用動畫來引起對重要信息的注意。
例如，您可以使用動畫突出顯示號召性用語按鈕或顯示頁面上的隱藏內容。
使用動畫時，一般的經驗法則是它不會影響內容的可讀性或可訪問性。
6. 盡量減少所有大寫字母的使用
所有大寫的句子——無論是在正文還是標題中，都可能難以閱讀。 如果您需要強調一點——考慮使用粗體或斜體字體樣式，或者使用對比色背景。
7. 在不同的設備和屏幕尺寸上測試你的排版
在不同設備上測試您的排版有助於識別任何用戶體驗問題或設計不一致。 確保字體大小、行高以及其他設計元素針對小屏幕和大屏幕進行相應調整，以便您的網站易於瀏覽和理解。
不要害怕嘗試不同的字體、大小和佈局。 與用戶一起測試設計並根據網絡分析數據（頁面停留時間、跳出率等）和他們的反饋進行迭代。
有用的排版工具和資源
這裡有一些有用的網站和工具，可以幫助您為您的網站選擇版式：
- 谷歌Fonts：免費的網絡友好字體集合，可以輕鬆集成到您的網站中。
- FontPair.co：適用於所有類型設計的免費字體和字體配對庫。
- Fonts.com：一個提供大量專業設計字體供網絡和印刷使用的網站。
- 字體松鼠: 一個免費的字體資源，提供大量可供商業和個人使用的高質量字體。
- 字體衝刺匹配器：一個免費的字體查找器工具，可幫助從上傳的圖像中識別字體類型。
- DaFont：一個流行的網站，提供大量可用於個人和商業項目的免費字體。
- 字體空間: 另一個免費字體集，提供廣泛的高質量字體供個人和商業使用。
- 豐塔內洛：一種瀏覽器擴展，可讓您通過右鍵單擊顯示文本的基本排版樣式。
包起來
排版是一種 cruci網頁設計的一個方面，可以極大地影響網站的可讀性、易讀性和整體用戶體驗。 通過了解排版的基礎知識，您可以創建更有效和更具吸引力的網站。
