AnyForWeb先和大家分享兩個(gè)關(guān)于網(wǎng)頁(yè)的中文文字設(shè)計(jì)現(xiàn)象，
常規(guī)or創(chuàng)意？別讓網(wǎng)頁(yè)中的文字設(shè)計(jì)禁錮了你
。現(xiàn)象1：
公司前端技術(shù)同事看到我上周寫(xiě)的《好的字體讓你的網(wǎng)頁(yè)設(shè)計(jì)“傾國(guó)傾城”》后，主動(dòng)和我聊了排版網(wǎng)站文字的各種心得體會(huì)，他提到的一個(gè)現(xiàn)象讓人很意外：除了設(shè)計(jì)師、前端技術(shù)、策劃、排版印刷等職位的人員對(duì)文字有一定的敏感度外，實(shí)際上大多數(shù)用戶(hù)對(duì)文字的字體和字號(hào)沒(méi)什么概念。
他說(shuō)的沒(méi)概念是指，雖然用戶(hù)對(duì)正在瀏覽的網(wǎng)頁(yè)有一個(gè)大致印象，可以說(shuō)說(shuō)自己對(duì)網(wǎng)站的直觀感受，比如網(wǎng)站好不好看、風(fēng)格是否吸引人等。但他們并不是很在意這個(gè)網(wǎng)頁(yè)使用的是什么字體，甚至不知道造成視覺(jué)疲勞的罪魁禍?zhǔn)卓赡苷谟谝粋�(gè)字號(hào)的“小小”選擇。
現(xiàn)象2：
經(jīng)常聽(tīng)到設(shè)計(jì)師們抱怨網(wǎng)頁(yè)設(shè)計(jì)中可供選擇的中文字體太少，創(chuàng)意字體即使設(shè)計(jì)出來(lái)也沒(méi)法實(shí)現(xiàn)，或者實(shí)現(xiàn)成本太大，大大限制了他們創(chuàng)意的發(fā)揮。我們也看到很多設(shè)計(jì)教程都建議設(shè)計(jì)師們不要在中文字體上做太多創(chuàng)意。
這種現(xiàn)象也是AnyForWeb上一篇文章中設(shè)計(jì)師的問(wèn)題：為什么國(guó)外網(wǎng)站字體做出來(lái)的效果那么好看，但我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)總覺(jué)得無(wú)法達(dá)到那種效果?
先從視覺(jué)角度說(shuō)明：我們能很明顯看出，英文是線條結(jié)構(gòu)，中文是方形結(jié)構(gòu)。從構(gòu)圖設(shè)計(jì)的角度看，英文字母比中文更具有幾何符號(hào)的感覺(jué)，圖形感會(huì)更豐富;從字形的角度看，英文采用的拉丁字母包括大小寫(xiě)一共52個(gè)，而且字形都比較簡(jiǎn)單，符號(hào)數(shù)量少便于識(shí)別，字形簡(jiǎn)潔便于設(shè)計(jì)，而中文的筆畫(huà)很多過(guò)于密集，不利于字體設(shè)計(jì)。
然后我們?cè)倭私庖韵率聦?shí)：
用戶(hù)的操作系統(tǒng)中自帶的字體有限，若使用創(chuàng)意字體，打開(kāi)網(wǎng)頁(yè)前還需要下載，通常英文字體只有幾百KB，因?yàn)樗恍枰瑪?shù)字、標(biāo)點(diǎn)、英文字母即可。而中文字符文件龐大，動(dòng)輒數(shù)個(gè)MB，甚至十幾MB，下載時(shí)間一般比較長(zhǎng)，往往導(dǎo)致網(wǎng)站打開(kāi)速度慢，可能特殊字體還沒(méi)看到，用戶(hù)就已經(jīng)把網(wǎng)頁(yè)關(guān)閉了。
一、如何保證網(wǎng)頁(yè)整體文字設(shè)計(jì)的規(guī)范性?
> 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：字體選擇
在選擇字體上，AnyForWeb建議設(shè)計(jì)師們盡量選擇系統(tǒng)默認(rèn)的或通用字體，保證瀏覽器能夠正確識(shí)別并顯示出正常的文字。
我們以宋體和微軟雅黑為例：
1.宋體
宋體是最常見(jiàn)的中文字體，在沒(méi)有指定字體的情況下，瀏覽器往往選擇它來(lái)渲染。但很多人認(rèn)為這種字體并不美觀。
NoNoNo，并不是這樣!舉個(gè)例子，在下面AnyForWeb網(wǎng)站的案例中，右側(cè)對(duì)客戶(hù)案例的描述文字正文內(nèi)容就是采用的宋體12px，配上18px的微軟雅黑標(biāo)題，層次清晰，讓人一目了然，同時(shí)展現(xiàn)的美觀度絲毫不弱。
微軟雅黑可以作為網(wǎng)站首選字體，它的美觀度和清晰度都較好。
在優(yōu)度旅游網(wǎng)站中，網(wǎng)站首頁(yè)采用了Metro風(fēng)格，整站使用微軟雅黑字體，在不同板塊靈活應(yīng)用了不同的字號(hào)，文字層次很清晰。下圖中文字與卡片式設(shè)計(jì)風(fēng)格融合在一起，讓整個(gè)網(wǎng)站顯得干凈大方，富有親和力，
電腦資料
《常規(guī)or創(chuàng)意？別讓網(wǎng)頁(yè)中的文字設(shè)計(jì)禁錮了你》(http://m.oriental01.com)。我們?cè)賮?lái)說(shuō)說(shuō)宋體和微軟雅黑的一些區(qū)別。
宋體是襯線字體，微軟雅黑是無(wú)襯線字體，宋體在視覺(jué)上更纖細(xì)。和宋體相比，微軟雅黑的字形不是正方形的，而是稍微的扁寬，字間距很小，這樣會(huì)使默認(rèn)的行間距更明晰，同時(shí)微軟雅黑的字心顯得更飽滿。所以在同樣的字號(hào)下，雅黑的單字面積顯得更大，更容易識(shí)別。
標(biāo)題字體使用微軟雅黑更適合，正文內(nèi)容可以根據(jù)設(shè)計(jì)風(fēng)格和需求靈活選擇。不過(guò)在手機(jī)端查看時(shí)，我們很明顯感覺(jué)到微軟雅黑字體更賞心悅目。
除宋體和微軟雅黑字體之外，設(shè)計(jì)師們還可以根據(jù)實(shí)際需要選擇其他經(jīng)典通用字體，比如Windows自帶的中文字體黑體、仿宋、楷體等，以及英文字體Arial、Vardana等等。
> 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：字號(hào)選擇
CSS里面常用描述字體大小的單位主要是em和px。其中em在跨平臺(tái)設(shè)備字體處理上很有優(yōu)勢(shì)，在常規(guī)網(wǎng)頁(yè)設(shè)計(jì)中，我們通常更多采用px作為單位。
這里以px為例，網(wǎng)頁(yè)設(shè)計(jì)中一般使用 14px 作為標(biāo)準(zhǔn)字體，16px 作為中等字體，18px 作為較大字體，12px 作為偏小字體。當(dāng)然，我們這里說(shuō)的只是一種比較通用的標(biāo)準(zhǔn)，實(shí)際上如何選擇字號(hào)需要設(shè)計(jì)師根據(jù)網(wǎng)頁(yè)整體設(shè)計(jì)布局來(lái)確定。
在頁(yè)面自適應(yīng)的設(shè)備上，比如手機(jī)屏幕分辨率比PC端的低，這些因素也是設(shè)計(jì)師需要考慮的。
> 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范：文字設(shè)計(jì)的規(guī)范性
大家應(yīng)該記得一點(diǎn)：雖然我們看到很多網(wǎng)站頁(yè)面的分享，但這些頁(yè)面都是屬于不同網(wǎng)站的，而用戶(hù)關(guān)注的是一個(gè)網(wǎng)站的整體。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)，他們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)應(yīng)該考慮所有頁(yè)面規(guī)范和一致性。
初級(jí)設(shè)計(jì)師比較容易犯一些細(xì)節(jié)錯(cuò)誤，比如同一層級(jí)下的不同頁(yè)面出現(xiàn)字體不一樣，字號(hào)不統(tǒng)一，字間距不一致的情況等等。
如果想成為一個(gè)專(zhuān)業(yè)設(shè)計(jì)師，這些問(wèn)題都是需要通過(guò)規(guī)范設(shè)計(jì)來(lái)避免的。
二、如果想讓文字部分看起來(lái)有創(chuàng)意，我們可以怎么做?
> 使用不同顏色的文字突出重點(diǎn)
三、如果一定要使用特殊字體……
在遇到需要使用特殊字體的情況時(shí)，很多設(shè)計(jì)師最常做的方法是把想要的文字做成圖片，但這種方式有幾個(gè)明顯的缺陷：不可能大范圍使用該字體，圖片內(nèi)容的文字不易修改，還很不利于網(wǎng)站的SEO。因此我們不建議這么做。
這并不意味著在文字上我們只能走常規(guī)路線，AnyForWeb在網(wǎng)站中就使用了特殊字體，給網(wǎng)站增加特色和亮點(diǎn)。這里不是采用的圖片方式哦，大家可以試試對(duì)這些文字進(jìn)行復(fù)制!
通過(guò)技術(shù)，我們就可以靈活使用一些特殊字體讓網(wǎng)頁(yè)設(shè)計(jì)更有創(chuàng)意啦。
本次關(guān)于網(wǎng)頁(yè)中文字設(shè)計(jì)的分享就到這里，下一篇文章AnyForWeb將和大家分享文字的性格與應(yīng)用。