網頁設計中的文字設計要點

網頁元素中最為主要的就是文字（這里說的文字是那種可編輯的文字形式，而非圖片中的文字效果），一般情況下，頁面文字占用了頁面80%以上的比重，關于這些文字的設計要點主要包括：字體、字號、顏色、背景、行長、行高等等。

字體

襯線體（serif）就是帶有襯線的字體，筆畫粗細不同并帶有額外的裝飾，開始和結尾有明顯的筆觸（如下圖）。常用的英文襯線體有Times New Roman和Georgia，中文即是我們在windows下最常見的宋體。

非襯線體（sans serif）就是無襯線裝飾，筆畫粗細無明顯查差異的字體。Arial、Helvetica、Verdanad都是我們熟悉的英文非襯線體，中文有微軟雅黑和mac下默認的中文－華文細黑。

字號

襯線字體筆畫有粗細之分，很小字的情況下細筆畫就被弱化，受限于電腦的分辨率，10-12px的襯線字體在顯示器上是相當難辨認的（見下圖）；同字號的非襯線體筆畫簡潔而飽滿，更適于做網頁字體。

如今隨著顯示器越來越大，分辨率越來越高，經常會覺得看12px的文字有點吃力，做為設計師也會不自覺的開始大量使用14px的字體，而且越來越多的網站開始使用15、16px甚至18px以上的字號做正文文字。大字號的使用，對英文字體來講，襯線體的高辨識度和流暢閱讀的優勢就體現出來了。中文宋體在顯示14號以上字體時，單線條大字總是看上去有些單薄不那么協調，特別是這款點陣字在ClearType強制平滑顯示狀態下尤其顯得模糊不清。微軟雅黑就是微軟在這個字體顯示問題上的解決方案。

行長

我們隨手拿起一本書或者一份報紙，數一數每行的文字，一般情況下都不會超過40個漢字。這是因為如果每行文字過長，讀者會不停的轉動脖子，感到疲憊的同時也會降低閱讀效率；目光從行尾移至下一行首，也很容易串行，影響讀者瀏覽文章的節奏。這點同樣適用于網頁上的文章閱讀。由于顯示器是橫向的，我們更要注意劃分閱讀區域。

文本寬度控制在450-700px為宜，此范圍內參照字號大??；

間距

通過設置間距，我們就可以控制文字的密度。如果每行間距太小，與文字過長一樣，讀者瀏覽文章時也容易串行；如果行距過寬，閱讀時就會感覺文章不夠連貫。

間距沒有固定的值，通常是根據字體大小來定義的。在word里我們?？吹诫p倍行距、單倍行距和1.5倍行距的選項。網頁上行距的單位常用em來表示，不管是中文網站還是英文網站，大家多喜歡用1.5em－1.8em的行距。以1.6em的行距為例，字號16px的字，行距就是25.6px。

1.5-1.8em的行距的確是非常適于閱讀的文字密度。

關于段距，我們要考慮一下具體實際情況。比如文章篇幅較短，就不需要很寬的段距；二文章篇幅很長，特別是那些偏學術的比較枯燥的文章，就要多利用段距把握文章的節奏，給閱讀者喘息和思考的機會，且使文章更有層次和可讀性。

背景

白色是全頻光，全放射光對人眼睛的最有刺激，所以很多印刷品讀物的紙張都選用乳白色或者淡黃色的紙張。由于顯示器本身就發光，所以同是純白色背景的文字，在電腦上比在紙上閱讀會使眼睛更容易疲乏，另有研究表明：在電腦上閱讀只有在紙上閱讀速度的78%，閱讀效率大大減低。因此，為了提高頁面瀏覽的舒適度和效率，越來越多的頁面采用淺灰色和淡黃色做為頁面背景。

© 致遠 2020-01-28，原創內容，轉載請注明出錯：網頁設計中的文字設計要點