AnyForWeb先和大家分享兩個關(guān)于網(wǎng)頁的中文文字設(shè)計現(xiàn)象，

常規(guī)or創(chuàng)意？別讓網(wǎng)頁中的文字設(shè)計禁錮了你

。

    現(xiàn)象1：

    公司前端技術(shù)同事看到我上周寫的《好的字體讓你的網(wǎng)頁設(shè)計“傾國傾城”》后，主動和我聊了排版網(wǎng)站文字的各種心得體會，他提到的一個現(xiàn)象讓人很意外：除了設(shè)計師、前端技術(shù)、策劃、排版印刷等職位的人員對文字有一定的敏感度外，實際上大多數(shù)用戶對文字的字體和字號沒什么概念。

    他說的沒概念是指，雖然用戶對正在瀏覽的網(wǎng)頁有一個大致印象，可以說說自己對網(wǎng)站的直觀感受，比如網(wǎng)站好不好看、風(fēng)格是否吸引人等。但他們并不是很在意這個網(wǎng)頁使用的是什么字體，甚至不知道造成視覺疲勞的罪魁禍?zhǔn)卓赡苷�在于一個字號的“小小”選擇。

    現(xiàn)象2：

    經(jīng)常聽到設(shè)計師們抱怨網(wǎng)頁設(shè)計中可供選擇的中文字體太少，創(chuàng)意字體即使設(shè)計出來也沒法實現(xiàn)，或者實現(xiàn)成本太大，大大限制了他們創(chuàng)意的發(fā)揮。我們也看到很多設(shè)計教程都建議設(shè)計師們不要在中文字體上做太多創(chuàng)意。

    這種現(xiàn)象也是AnyForWeb上一篇文章中設(shè)計師的問題：為什么國外網(wǎng)站字體做出來的效果那么好看，但我們在設(shè)計網(wǎng)頁時總覺得無法達(dá)到那種效果?

    先從視覺角度說明：我們能很明顯看出，英文是線條結(jié)構(gòu)，中文是方形結(jié)構(gòu)。從構(gòu)圖設(shè)計的角度看，英文字母比中文更具有幾何符號的感覺，圖形感會更豐富;從字形的角度看，英文采用的拉丁字母包括大小寫一共52個，而且字形都比較簡單，符號數(shù)量少便于識別，字形簡潔便于設(shè)計，而中文的筆畫很多過于密集，不利于字體設(shè)計。

    然后我們再了解以下事實：

    用戶的操作系統(tǒng)中自帶的字體有限，若使用創(chuàng)意字體，打開網(wǎng)頁前還需要下載，通常英文字體只有幾百KB，因為它只需要包含數(shù)字、標(biāo)點、英文字母即可。而中文字符文件龐大，動輒數(shù)個MB，甚至十幾MB，下載時間一般比較長，往往導(dǎo)致網(wǎng)站打開速度慢，可能特殊字體還沒看到，用戶就已經(jīng)把網(wǎng)頁關(guān)閉了。

    從以上真實情況可以了解，其實我們不必糾結(jié)于網(wǎng)站的字體設(shè)計無法發(fā)揮創(chuàng)意，因為用戶在意的不僅僅是字體設(shè)計的創(chuàng)意，而是網(wǎng)站整體給人的感受，因此AnyForWeb認(rèn)為：設(shè)計師對文字的創(chuàng)意可以通過其他方向的發(fā)揮來讓用戶對你的網(wǎng)頁設(shè)計印象深刻。比如，保證網(wǎng)頁整體文字設(shè)計的規(guī)范性、增加修飾文字段落的創(chuàng)意，以及對少量特殊字體的靈活應(yīng)用。

    一、如何保證網(wǎng)頁整體文字設(shè)計的規(guī)范性?

    > 網(wǎng)頁設(shè)計規(guī)范：字體選擇

    在選擇字體上，AnyForWeb建議設(shè)計師們盡量選擇系統(tǒng)默認(rèn)的或通用字體，保證瀏覽器能夠正確識別并顯示出正常的文字。

    我們以宋體和微軟雅黑為例：

    1.宋體

    宋體是最常見的中文字體，在沒有指定字體的情況下，瀏覽器往往選擇它來渲染。但很多人認(rèn)為這種字體并不美觀。

    NoNoNo，并不是這樣!舉個例子，在下面AnyForWeb網(wǎng)站的案例中，右側(cè)對客戶案例的描述文字正文內(nèi)容就是采用的宋體12px，配上18px的微軟雅黑標(biāo)題，層次清晰，讓人一目了然，同時展現(xiàn)的美觀度絲毫不弱。

    2.微軟雅黑

    微軟雅黑可以作為網(wǎng)站首選字體，它的美觀度和清晰度都較好。

    在優(yōu)度旅游網(wǎng)站中，網(wǎng)站首頁采用了Metro風(fēng)格，整站使用微軟雅黑字體，在不同板塊靈活應(yīng)用了不同的字號，文字層次很清晰。下圖中文字與卡片式設(shè)計風(fēng)格融合在一起，讓整個網(wǎng)站顯得干凈大方，富有親和力，

電腦資料

《常規(guī)or創(chuàng)意？別讓網(wǎng)頁中的文字設(shè)計禁錮了你》(http://www.ishadingyu.com)。

    在這里，AnyForWeb有個小提示：微軟雅黑字體可以用font-family寫在頁面，但在網(wǎng)站圖片里面嵌入微軟雅黑的字體會構(gòu)成侵權(quán)，這一點是設(shè)計師們需要注意的。

    我們再來說說宋體和微軟雅黑的一些區(qū)別。

    宋體是襯線字體，微軟雅黑是無襯線字體，宋體在視覺上更纖細(xì)。和宋體相比，微軟雅黑的字形不是正方形的，而是稍微的扁寬，字間距很小，這樣會使默認(rèn)的行間距更明晰，同時微軟雅黑的字心顯得更飽滿。所以在同樣的字號下，雅黑的單字面積顯得更大，更容易識別。

    標(biāo)題字體使用微軟雅黑更適合，正文內(nèi)容可以根據(jù)設(shè)計風(fēng)格和需求靈活選擇。不過在手機(jī)端查看時，我們很明顯感覺到微軟雅黑字體更賞心悅目。

    除宋體和微軟雅黑字體之外，設(shè)計師們還可以根據(jù)實際需要選擇其他經(jīng)典通用字體，比如Windows自帶的中文字體黑體、仿宋、楷體等，以及英文字體Arial、Vardana等等。

    > 網(wǎng)頁設(shè)計規(guī)范：字號選擇

    CSS里面常用描述字體大小的單位主要是em和px。其中em在跨平臺設(shè)備字體處理上很有優(yōu)勢，在常規(guī)網(wǎng)頁設(shè)計中，我們通常更多采用px作為單位。

    這里以px為例，網(wǎng)頁設(shè)計中一般使用 14px 作為標(biāo)準(zhǔn)字體，16px 作為中等字體，18px 作為較大字體，12px 作為偏小字體。當(dāng)然，我們這里說的只是一種比較通用的標(biāo)準(zhǔn)，實際上如何選擇字號需要設(shè)計師根據(jù)網(wǎng)頁整體設(shè)計布局來確定。

    在頁面自適應(yīng)的設(shè)備上，比如手機(jī)屏幕分辨率比PC端的低，這些因素也是設(shè)計師需要考慮的。

    > 網(wǎng)頁設(shè)計規(guī)范：文字設(shè)計的規(guī)范性

    大家應(yīng)該記得一點：雖然我們看到很多網(wǎng)站頁面的分享，但這些頁面都是屬于不同網(wǎng)站的，而用戶關(guān)注的是一個網(wǎng)站的整體。所以對于設(shè)計師來說，他們在設(shè)計網(wǎng)頁時應(yīng)該考慮所有頁面規(guī)范和一致性。

    初級設(shè)計師比較容易犯一些細(xì)節(jié)錯誤，比如同一層級下的不同頁面出現(xiàn)字體不一樣，字號不統(tǒng)一，字間距不一致的情況等等。

    如果想成為一個專業(yè)設(shè)計師，這些問題都是需要通過規(guī)范設(shè)計來避免的。

    二、如果想讓文字部分看起來有創(chuàng)意，我們可以怎么做?

    > 使用不同顏色的文字突出重點

    > 段落加上裝飾性設(shè)計元素

    > 重點文字內(nèi)容字體加粗

    > 文字與背景色形成高對比度

    設(shè)計師還可以通過增加其他創(chuàng)意元素的方式來突出文字內(nèi)容，給設(shè)計增加亮點。

    三、如果一定要使用特殊字體……

    在遇到需要使用特殊字體的情況時，很多設(shè)計師最常做的方法是把想要的文字做成圖片，但這種方式有幾個明顯的缺陷：不可能大范圍使用該字體，圖片內(nèi)容的文字不易修改，還很不利于網(wǎng)站的SEO。因此我們不建議這么做。

    這并不意味著在文字上我們只能走常規(guī)路線，AnyForWeb在網(wǎng)站中就使用了特殊字體，給網(wǎng)站增加特色和亮點。這里不是采用的圖片方式哦，大家可以試試對這些文字進(jìn)行復(fù)制!

    當(dāng)然，如何將特殊文字的設(shè)計還原到網(wǎng)頁，是前端工程師通過技術(shù)解決方案完成的，有興趣的設(shè)計師也可以自己研究。

    通過技術(shù)，我們就可以靈活使用一些特殊字體讓網(wǎng)頁設(shè)計更有創(chuàng)意啦。

    本次關(guān)于網(wǎng)頁中文字設(shè)計的分享就到這里，下一篇文章AnyForWeb將和大家分享文字的性格與應(yīng)用。