準(zhǔn)備工作

去年的時(shí)候,青云發(fā)表過(guò) 關(guān)于柵格系統(tǒng)的文章  . 我們知道網(wǎng)頁(yè)的柵格系統(tǒng)是運(yùn)用固定的格子設(shè)計(jì)版面布局,使其風(fēng)格工整簡(jiǎn)潔. 視覺(jué)上來(lái)說(shuō),柵格系統(tǒng)能夠?qū)⒋髩K區(qū)域分割成小區(qū)域,清楚地展示頁(yè)面的布局,并能夠引導(dǎo)視覺(jué)線(xiàn)在各個(gè)板塊之間掃描、閱讀. 從信息上來(lái)說(shuō),柵格系統(tǒng)讓信息的呈現(xiàn)方式更加直觀,從而有效提高易讀性.
 但是大部分柵格系統(tǒng)是在水平方向上的布局,其實(shí),我們的垂直方向也是有柵格系統(tǒng)的——也就是我們的“垂直韻律”.

垂直韻律的就像好比我們手上拿著的線(xiàn)格本子，有著一行行的網(wǎng)格線(xiàn)，安排著垂直方向上的文字排版。“排版中的空間就像是音樂(lè)里的節(jié)拍. ”音樂(lè)的節(jié)拍雖然有許多變化,但是幾乎每首歌都會(huì)有一個(gè)固定的節(jié)拍來(lái)掌握整個(gè)歌曲的節(jié)奏. 這就是為什么柵格系統(tǒng)一般用固定寬度的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布.
其實(shí)，那么,在網(wǎng)頁(yè)里,垂直韻律應(yīng)由三個(gè)因素控制：

• 字體大小(font-size)
• 行距(line-height)
  具體定義可以參照我的《字體、排版簡(jiǎn)明入門(mén)》 中行距這一節(jié)
• 間距(margin,padding)
  認(rèn)真考量這三個(gè)因素的值,才能實(shí)現(xiàn)垂直韻律.

開(kāi)工

基礎(chǔ)行距

在垂直韻律中,基本的單位是行距. 在整個(gè)頁(yè)面上設(shè)定一個(gè)合適的行距是垂直韻律之所以能夠成為韻律的必要條件. 這個(gè)行距,我們將應(yīng)用于整個(gè)頁(yè)面的所有文字上,包括正文、標(biāo)題、側(cè)邊欄等. 例如,我們現(xiàn)在設(shè)定我們的字體大小(css font-size)為12px,行距(css line-height)為18px. (對(duì)于中文宋體來(lái)說(shuō),12px是能夠清晰顯示的最小字號(hào). 為了保證可讀性,12px的1.5倍行距就是18px. 同時(shí)12px/18px也是中文互聯(lián)網(wǎng)上最常用的字號(hào)和行距. )我們?cè)诳瞻醉?yè)面的垂直方向上以18px為單位做垂直網(wǎng)格,就像我們線(xiàn)格本子上的線(xiàn)條,每條網(wǎng)格線(xiàn)也就是基線(xiàn)的對(duì)齊線(xiàn). 接著，我們放上三個(gè)段落(12px/18px)作為例子講解.

(demo-1.html)

段落間距

段落間加上段間距不但美觀,而且容易在視覺(jué)上區(qū)別各段落. 但是要注意的是,垂直韻律最容易被打破的地方就是兩個(gè)元素在垂直方向上的空白了. 所以,為了讓下一段的文字內(nèi)容落在網(wǎng)格內(nèi),我們要將段落間距設(shè)置為基礎(chǔ)的倍數(shù). 例如：我們可以設(shè)置段前距為9px,段后距為9px,9px+9px=18px；或者設(shè)置段前距(css margin-top)為0,段后距(css margin-bottom)為18px；或者段前距和段后距都是18px. 這里,我們選取第二種方案,即,設(shè)置段前距為0,段后距為18px. 圖中可以看到,每段段落的文字都落在了格子內(nèi). 關(guān)閉網(wǎng)格可以發(fā)現(xiàn),段落清晰明了,比之前容易閱讀多了.

(demo-2.html)

添加標(biāo)題

使用瀏覽器默認(rèn)的樣式,你會(huì)發(fā)現(xiàn),大多數(shù)情況下,垂直韻律都被打破了. 所以,添加標(biāo)題,我們需要選擇正確的行距和間距才可以.

有了添加段間距的經(jīng)驗(yàn),相信添加標(biāo)題也不是一件難事了. 標(biāo)題的文字要比正文的文字要大的多. 例如,我們現(xiàn)在選擇h1的字體大小為24px.
那么,根據(jù)附錄結(jié)論有：

• 行距和全部垂直間距之和為基礎(chǔ)行距的倍數(shù)。

那么，我們假設(shè)行距為36px,則可以設(shè)置段前距為9px，段后距為9px (驗(yàn)證有：36 + 9 + 9 = 54 = 3 * 18).
 同樣，我們也可以設(shè)置h2:字體大小18px，行高24px，段前距3px，段后距9px(驗(yàn)證有：24 + 3 + 9 = 36 = 2 * 18)。

(demo-3.html)

添加邊注

網(wǎng)站我們常常有側(cè)邊欄，我們這里就用右邊的邊注來(lái)代表。在這里的例子中，我們和正文一樣設(shè)定邊注的排版：字體12px，行距18px。正是由于我們 前面的努力，我們可以看到，邊注的基線(xiàn)和正文的基線(xiàn)是對(duì)齊的。關(guān)閉網(wǎng)格可以看到，由于基線(xiàn)的對(duì)齊，整個(gè)排版有條不紊，十分美觀。

(demo-4.html)

添加邊框

添加邊框道理相同，無(wú)非要的就是最后要求基線(xiàn)與網(wǎng)格對(duì)齊。這里的例子中，我們來(lái)給邊注加個(gè)邊框吧。給他加上1px邊框(css border)后，還要再加上8px的補(bǔ)白(css padding).細(xì)心的同學(xué)們一定發(fā)現(xiàn)了，為什么補(bǔ)白是8px呢？其實(shí)很簡(jiǎn)單，這就是保證垂直方向上的補(bǔ)白和邊框之和，是我們的基礎(chǔ)行高18px的倍 數(shù)：垂直方向上兩個(gè)補(bǔ)白兩個(gè)邊框，那么1 + 8 + 8 + 1 = 18.

加上去后，我們發(fā)現(xiàn)，恩？怎么沒(méi)有右邊文字沒(méi)有對(duì)齊到網(wǎng)格上呢？原來(lái)加上了補(bǔ)白和邊框后，邊注下移了9px，所以網(wǎng)格就沒(méi)有對(duì)齊啦。那么，我們就要把邊注上移9px。現(xiàn)在，我們可以看到右邊的文字已經(jīng)對(duì)齊到網(wǎng)格。是不是感覺(jué)不錯(cuò)？

(demo-5.html)