直播中
對(duì)于很多的網(wǎng)站來(lái)說(shuō),字在整個(gè)網(wǎng)站的內(nèi)容中占了80%以上甚至更多,或者換個(gè)角度上說(shuō),網(wǎng)站可以沒(méi)有顏色,沒(méi)有圖片,但唯獨(dú)不能沒(méi)有文字。
先看看網(wǎng)站以外的中文字體設(shè)計(jì),英文的正文字體有很多可以選擇,但中文的正文字,總的來(lái)說(shuō)就兩種:宋體和黑體。在傳統(tǒng)的版式設(shè)計(jì)中,設(shè)計(jì)師們都喜歡做英文的排版,為什么?從視覺(jué)上來(lái)看,英文的組合很容易形成線和面的關(guān)系,而且字母有節(jié)奏感,比如aby這三個(gè)字母放一起有高矮區(qū)別。中文字相對(duì)來(lái)說(shuō),單調(diào)、孤立、不流暢。
回到網(wǎng)站中文字的設(shè)計(jì),設(shè)計(jì)師基本上不用考慮在字體上做選擇,只有宋體。前文說(shuō):?jiǎn)蝹€(gè)字成點(diǎn),一行字成線,一段字成面。這是版式設(shè)計(jì)最基本的原理,我們需要做的就是強(qiáng)化這樣的感覺(jué)。拿微軟雅黑和宋體來(lái)舉例子,將12號(hào)的宋體和雅黑放大,注意以下細(xì)節(jié):
雅黑要比宋體寬一像素
雅黑讓每個(gè)筆畫(huà)往四周撐,比如“是”上面的“日”,雅黑顯得就要飽滿
這么做的目的只有一個(gè),讓中文字體更容易形成線,從而讀起來(lái)更流暢。我們可以看到,盡管雅黑不是真正的正方形,但它看起來(lái)要比宋體方一些。
看完上面這個(gè)例子,我的觀點(diǎn)也就出來(lái)了:別把你的文字看成字,而是看成點(diǎn),文字的視覺(jué)設(shè)計(jì)其實(shí)就是處理點(diǎn)線面的關(guān)系。
下面是具體設(shè)計(jì)方面的點(diǎn):
字體的單位用em而不用px,盡管12px和0.8em大小差不多。
想當(dāng)然,沒(méi)有深入理解em單位。只看到很多用em的視覺(jué)效果不好看,是因?yàn)闆](méi)有把em單位和px對(duì)上號(hào)。結(jié)論是應(yīng)該用em而不是px,但需要把em的值設(shè)置好。
在css文件body中的font-family里面保證”宋體”前面有Arial或者verdana,個(gè)人推薦這么寫(xiě):font-family:Helvetica,Georgia,Arial,sans-serif,宋體。這樣能保證你界面中的字母、數(shù)字、符號(hào)看上去美觀一些,更重要的是更加易讀。
12號(hào)宋體時(shí),我們一般使用18-20像素的行距。14號(hào)宋體通常使用22-24像素的行距。
很贊同,這個(gè)行距大小隨著單行字?jǐn)?shù)的多少而上下浮動(dòng)。12px字如果單行字?jǐn)?shù)少的話,17也是可以接受的。
正文一行字?jǐn)?shù)最好不超過(guò)50,首頁(yè)的標(biāo)題文字以8-20字為佳。
12和14px字相對(duì)來(lái)說(shuō)最精致,13px在需要的時(shí)候可以做正文字,word里面默認(rèn)的字的大小相當(dāng)于網(wǎng)頁(yè)的13px字。
對(duì)于一段文字,尤其是正文部分,保證左右至少有15px的留白,便于用戶換行時(shí)不受到干擾。
文字和背景對(duì)比要足夠明顯,保證最弱文字的可讀性。