中文字體在網頁設計中的排版

張婧雯

【摘要】在網頁設計中，字體的存在并不是僅僅在傳達文本本身含義的簡單符號。它就像平面構成中的點、線、面一樣，是構成網頁設計的最基本的元素。所以，文字的應用也是一種藝術，需要我們的設計和調整，漂亮的文字排版也會成為我們網頁設計作品中的最吸引人的亮點。

【關鍵詞】中文字體；網頁設計；排版

在科技信息高速發展的今天，新鮮的事物不斷進入人們的眼球，我們對生活的追求也不僅限于實用。所以，總是需要一些應運而生的新事物讓我們的生活變得更加美好，是更快的網速，更簡潔美觀的設計，更智能的電腦，更美妙的歌曲……從來沒有人滿足于當前自己的生活現狀，總要有新的事物不斷帶給你一些更好的體驗，例如網頁設計中更漂亮的中文字體的應用。

每位設計師在進行創作的過程中都會面對一個問題——那就是字體排版。同一份設計作品，如果把作品里的英文字體換成中文，會對設計作品本身產生很大的影響，而且想要表達的效果也會大不如前，那么問題出在哪里呢？

除了設計師自身缺少對文字駕馭的能力，更重要的問題是缺乏對中文字體的了解。為了排出更漂亮的中文字體版式，下面我將帶大家去了解中文字體。

在網頁設計中，字體的存在并不是僅僅在傳達文本本身含義的簡單符號。它就像平面構成中的點、線、面一樣，是構成網頁設計的最基本的元素。

當中文字體作為一個點存在的時候，它不同于英文字體的簡潔。每個中文字體單獨來看都能顯示出足夠的視覺效果，值得人們細細品味。

但是，當中文字體排成一行，作為一個線的元素運用到網頁設計中的時候，和英文字體比較起來，效果就會差的很多，缺少整體性。中文字體的字間距太寬，顯得文字的筆畫緊湊，加上每個字的個性又十分突出，會顯得留白很大，不夠勻稱。之所以會出現這樣的狀況是因為中文字體欠缺了一個重要的設計概念：x-height。

x-height的意思就指的英文字母的最小高度。在英文字體的設計中，一個字體的高度體包含三部份，以基準線為中央，以上稱之為上部，基準線內稱之為x的高度，基準線以下稱之為下部。所有英文字母的視覺著重點都位于這一核心地帶中，英文排版之所以能整齊勻稱，就是因為它的核心x-height。擁有了核心地帶就能很容易的引導用戶的視線流動。

正因為缺少這個元素，在中文字體排列成的行構成了面的時候。行與行重復排列也是構成設計節奏的一個重要原因。由于行的不勻稱，大面積的中文字體構成的面會顯得比較刻板。而且筆畫繁多占據了大量空間，控制不好會比較壓抑。而英文字體由于上部、下部的存在，在黑色和留白之外增加了一個灰度的層次，在排版中顯示為黑白灰三個漸變色，頁面顯示的效果也更為舒適。

所以，文字在網頁設計中的應用是一門藝術，一個合格的設計師不應該把這個任務完全交給電腦，我們應該通過自己對字體的了解去調整它的細節，彌補其中的不足。

一、對常見的中文字體進行分析

想要在網頁設計中排出好看的字體，首先我們要了解一些常見中文字體，例如：

宋體：宋體是在發明印刷術以后的明代出現的字體。最初是在印刷臨安書棚本時，將原有的毛筆字的筆劃加以直線化，使原來看上去柔和的字體變得更加硬朗。在1553年，刊刻的《墨子》中宋體已經基本成型。在明朝后期隨著萬歷年間刊本印刷數量的上漲，促進了書籍制作的分工化。

黑體：黑體又被稱為方體或等線體，黑體與宋體不同沒有襯線的裝飾，字形莊重，筆畫橫平豎直，筆跡粗細全部一樣。漢字的黑體是在西方的現代印刷術流傳到中國以后依據西文的無襯線體所改變創造的。

微軟雅黑：微軟雅黑顧名思義，它是國北大方正電子有限公司受美國微軟公司的委托而設計的一款能全面支持ClearType技術的字體。負責字體Hinting工作的是Monotype公司。它屬于OpenType類型，文件名是MSYH.TTF，字體本身的設計上更近似于黑體，也是一種無襯線的字體。

以上介紹的這些字體都是我們在設計工作中常見的字體。其中，老式的字體，如：

宋體，是有襯線的，反映出傳統字體的設計特征。線條的粗細往往也特別明顯，這是早期篆刻文字時，鑿子類工具所留下的特有的痕跡。而且宋體的字形方正，筆畫粗細均勻，既有硬筆書法的橫平豎直，也有毛筆字的棱角分明，結構合理，整齊均勻，有極強的規律性，從而使人在閱讀時有一種舒適親切的感覺。所以，在網頁設計中，宋體更加適合于一些比較偏女性化的網站，或者一些有古風古韻的網站。宋體，在眾多字體中最為柔和，更加能表現出網站所要表現的情懷。

還有處于老式字體到新式字體過渡時期的，如：

黑體：在中文字體中中，稱為黑體的字體往往是沒有襯線的字體，這個詞的包含的字體和無襯線字體是類似的。所以，在西方中通常稱這種字體為“無襯線字體”。黑體的字型厚重，所以更適用于標題或著需要引起注意的醒目標語或批注，因為筆畫過于粗壯，所以不適用于網頁設計中的正文部分。

而微軟雅黑，也是無襯線黑體的一種，只是不同于傳統黑體，它的字形圓滑，筆畫纖細舒展，閱讀起來更容易。這款字體的優雅的外形著實給人留下了十分深刻的印象。在大小為12px或14px的系統默認大小的情況下，微軟雅黑的顯示也會十分清楚，中英文的搭配使用也非常的和諧。相對于老式的宋體，微軟雅黑的字形不是方方正正的，而是略微扁寬，字間距更小，這樣的處理使得系統默認的行間距更為更加工整；同時微軟雅黑的核心更為飽滿，在同樣的字號下，微軟雅黑的單字面積就顯得更大，更容易識別，用戶閱讀起來也更舒服。所以，它的應用范圍更加廣泛。

二、在實際應用中遇到的一些問題

在了解了中文字體的各種細節之后，在實際應用中也會遇到很多的問題。隨著各種設計軟件的出現，電腦會自動決定文字的間距和每行的長度。但是有經驗的設計師會給正文和標題專門設計間距，包括每個字前后的留白。關于行的長度，一個合適的長度要適應人們的閱讀習慣，不宜過長，控制在39到45個字符之間為宜。

（1）案例一

在對帶標題的多行文字進行排版時，在系統默認的狀態下，中文字體的排版會顯得行與行之間的間距太近，使得構圖不夠飽滿，給人一種小氣的感覺。所以我們要對文字進行調整，增加行間距，選用更細的字體，調整標題的字體大小。這種文字排列方式的運用使整體顯得不過于呆板，而且主次分明（詳情參見圖1、圖2）。

（2）案例2

在網頁設計的過程中使用的字體太過單一會使頁面變得沒有層次感和閱讀的著重點。所以，我們更習慣使用混合字體?；旌献煮w就是指一些有聯系的字體可以避免視覺上的錯亂，同時又能找的著重點。這些字體及不相同，又能相互協調，形成統一，適當留白設計可以在視覺效果上突出重點，讓設計作品更有層次感。（詳情參見圖3、圖4）。

綜上所述，中文字體的應用在網頁設計中占有很重要的位置。在我們看來，優秀的排版一定要有比較好的可讀性，文字和內容在閱讀效果上是統一和連貫的，并且有適當的留白，這樣可以增加整體的空間感和層次感。布局、內容擺放和板塊設計都會對文字的可讀性產生影響。網頁設計中的文字排版必須要實現促進視覺展示的效果，增加設計的可讀性。在設計師的眼中文字是會說話的圖形，我們要在設計中強調它的美學效應，好的文字排版能以更富創造力的形式表達出更有層次感的設計思想，能夠克服內容的的枯燥與平淡，從而更容易打動用戶。

【參考文獻】

[1] [美]Laura Franz（勞拉·弗朗茨）. 字體之美：從傳統印刷到Web排版[M]. 石 巖， 吳 寧， 譯. 北京： 電子工業出版社， 2015.

[2] [美]阿歷克斯·伍·懷特. 字體設計基礎[M]. 徐 玲， 尚 娜， 譯. 上海： 上海人美， 2013.

[3] 蘇 克. 新概念字體基礎&應用[M]. 陜西： 太白文藝出版社， 2015.