網(wǎng)站中文字的視覺規(guī)劃

可能許多人都要問，網(wǎng)站的文字還需求規(guī)劃嗎？

關(guān)于許多的網(wǎng)站來說，字在整個(gè)網(wǎng)站的內(nèi)容中占了80%以上乃至更多，或許換個(gè)視點(diǎn)上說，網(wǎng)站能夠沒有顏色，沒有圖片，但唯獨(dú)不能沒有文字。

先看看網(wǎng)站以外的中文字體規(guī)劃，英文的正文字體有許多能夠選擇，但中文的正文字，總的來說就兩種：宋體和黑體。在傳統(tǒng)的版式規(guī)劃中，規(guī)劃師們都喜愛做英文的排版，為什么？從視覺上來看，英文的組合很容易構(gòu)成線和面的關(guān)系，并且字母有節(jié)奏感，比方aby這三個(gè)字母放一起有高矮差異。中文字相對(duì)來說，單調(diào)、孤立、不流通。

回到網(wǎng)站中文字的規(guī)劃，規(guī)劃師基本上不用考慮在字體上做選擇，只要宋體。前文說：單個(gè)字成點(diǎn)，一行字成線，一段字成面。這是版式規(guī)劃最基本的原理，咱們需求做的便是強(qiáng)化這樣的感覺。

將12號(hào)的宋體和雅黑擴(kuò)大，留意以下細(xì)節(jié)：

雅黑要比宋體寬一像素 
雅黑讓每個(gè)筆畫往四周撐，雅黑顯得就要豐滿
這么做的意圖只要一個(gè)，讓中文字體更容易構(gòu)成線，然后讀起來更流通。咱們能夠看到，盡管雅黑不是真實(shí)的正方形，但它看起來要比宋體方一些。

看完上面這個(gè)比方，我的觀念也就出來了：別把你的文字當(dāng)作字，而是當(dāng)作點(diǎn)，文字的視覺規(guī)劃其實(shí)便是處理點(diǎn)線面的關(guān)系。

下面是具體規(guī)劃方面的點(diǎn)：

字體的單位用em而不用px，盡管12px和0.8em巨細(xì)差不多。

在css文件body中的font-family里邊確�！彼误w”前面有Arial或許verdana，個(gè)人引薦這么寫：font-family:Helvetica,Georgia,Arial,sans-serif，宋體。這樣能確保你界面中的字母、數(shù)字、符號(hào)看上去美觀一些，更重要的是愈加易讀。 
12號(hào)宋體時(shí)，咱們一般使用18-20像素的行距。14號(hào)宋體一般使用22-24像素的行距。
很贊同，這個(gè)行距巨細(xì)跟著單行字?jǐn)?shù)的多少而上下浮動(dòng)。我認(rèn)為12px字假如單行字?jǐn)?shù)少的話，17也是能夠接受的。 
正文一行字?jǐn)?shù)最好不超越50，主頁的標(biāo)題文字以8-20字為佳。 
12和14px字相對(duì)來說最精致，13px在需求的時(shí)候能夠做正文字，word里邊默認(rèn)的字的巨細(xì)相當(dāng)于網(wǎng)頁的13px字。 
關(guān)于一段文字，尤其是正文部分，確保左右至少有15px的留白，便于用戶換行時(shí)不受到干擾。 
文字和背景比照要滿足顯著，確保最弱文字的可讀性。