中文字體在網(wǎng)頁設(shè)計中的排版

張婧雯

【摘要】在網(wǎng)頁設(shè)計中，字體的存在并不是僅僅在傳達(dá)文本本身含義的簡單符號。它就像平面構(gòu)成中的點(diǎn)、線、面一樣，是構(gòu)成網(wǎng)頁設(shè)計的最基本的元素。所以，文字的應(yīng)用也是一種藝術(shù)，需要我們的設(shè)計和調(diào)整，漂亮的文字排版也會成為我們網(wǎng)頁設(shè)計作品中的最吸引人的亮點(diǎn)。

【關(guān)鍵詞】中文字體；網(wǎng)頁設(shè)計；排版

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

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

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

在網(wǎng)頁設(shè)計中，字體的存在并不是僅僅在傳達(dá)文本本身含義的簡單符號。它就像平面構(gòu)成中的點(diǎn)、線、面一樣，是構(gòu)成網(wǎng)頁設(shè)計的最基本的元素。

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

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

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

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

所以，文字在網(wǎng)頁設(shè)計中的應(yīng)用是一門藝術(shù)，一個合格的設(shè)計師不應(yīng)該把這個任務(wù)完全交給電腦，我們應(yīng)該通過自己對字體的了解去調(diào)整它的細(xì)節(jié)，彌補(bǔ)其中的不足。

一、對常見的中文字體進(jìn)行分析

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

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

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

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

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

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

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

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

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

二、在實際應(yīng)用中遇到的一些問題

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

（1）案例一

在對帶標(biāo)題的多行文字進(jìn)行排版時，在系統(tǒng)默認(rèn)的狀態(tài)下，中文字體的排版會顯得行與行之間的間距太近，使得構(gòu)圖不夠飽滿，給人一種小氣的感覺。所以我們要對文字進(jìn)行調(diào)整，增加行間距，選用更細(xì)的字體，調(diào)整標(biāo)題的字體大小。這種文字排列方式的運(yùn)用使整體顯得不過于呆板，而且主次分明（詳情參見圖1、圖2）。

（2）案例2

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

綜上所述，中文字體的應(yīng)用在網(wǎng)頁設(shè)計中占有很重要的位置。在我們看來，優(yōu)秀的排版一定要有比較好的可讀性，文字和內(nèi)容在閱讀效果上是統(tǒng)一和連貫的，并且有適當(dāng)?shù)牧舭?，這樣可以增加整體的空間感和層次感。布局、內(nèi)容擺放和板塊設(shè)計都會對文字的可讀性產(chǎn)生影響。網(wǎng)頁設(shè)計中的文字排版必須要實現(xiàn)促進(jìn)視覺展示的效果，增加設(shè)計的可讀性。在設(shè)計師的眼中文字是會說話的圖形，我們要在設(shè)計中強(qiáng)調(diào)它的美學(xué)效應(yīng)，好的文字排版能以更富創(chuàng)造力的形式表達(dá)出更有層次感的設(shè)計思想，能夠克服內(nèi)容的的枯燥與平淡，從而更容易打動用戶。

【參考文獻(xiàn)】

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

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

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