垂直柵格與漸進式行距(上)

2008/02/28

準備工作

去年的時候,青雲發表過關於柵格系統的文章 . 我們知道網頁的柵格系統是運用固定的格子設計版面佈局,使其風格工整簡潔. 視覺上來說,柵格系統能夠將大塊區域分割成小區域,清楚地展示頁面的佈局,並能夠引導視覺線在各個板塊之間掃瞄、閱讀. 從信息上來說,柵格系統讓信息的呈現方式更加直觀,從而有效提高易讀性.
但是大部分柵格系統是在水平方向上的佈局,其實,我們的垂直方向也是有柵格系統的——也就是我們的「垂直韻律」.

垂直韻律的就像好比我們手上拿著的線格本子，有著一行行的網格線，安排著垂直方向上的文字排版。「排版中的空間就像是音樂裡的節拍. 」音樂的節拍雖然有許多變化,但是幾乎每首歌都會有一個固定的節拍來掌握整個歌曲的節奏. 這就是為什麼柵格系統一般用固定寬度的網格陣列來指導和規範網頁中的版面佈局以及信息分佈.
其實，那麼,在網頁裡,垂直韻律應由三個因素控制：

字體大小(font-size)
行距(line-height)
具體定義可以參照我的《字體、排版簡明入門》中行距這一節
間距(margin,padding)

認真考量這三個因素的值,才能實現垂直韻律.

開工

基礎行距

在垂直韻律中,基本的單位是行距. 在整個頁面上設定一個合適的行距是垂直韻律之所以能夠成為韻律的必要條件. 這個行距,我們將應用於整個頁面的所有文字上,包括正文、標題、側邊欄等. 例如,我們現在設定我們的字體大小(css font-size)為12px,行距(css line-height)為18px. (對於中文宋體來說,12px是能夠清晰顯示的最小字號. 為了保證可讀性,12px的1.5倍行距就是18px. 同時12px/18px也是中文互聯網上最常用的字號和行距. )我們在空白頁面的垂直方向上以18px為單位做垂直網格,就像我們線格本子上的線條,每條網格線也就是基線的對齊線. 接著，我們放上三個段落(12px/18px)作為例子講解.

(demo-1.html)

段落間距

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

(demo-2.html)

添加標題

使用瀏覽器默認的樣式,你會發現,大多數情況下,垂直韻律都被打破了. 所以,添加標題,我們需要選擇正確的行距和間距才可以.

有了添加段間距的經驗,相信添加標題也不是一件難事了. 標題的文字要比正文的文字要大的多. 例如,我們現在選擇h1的字體大小為24px.

那麼,根據附錄結論有：

行距和全部垂直間距之和為基礎行距的倍數。

那麼，我們假設行距為36px,則可以設置段前距為9px，段後距為9px (驗證有：36 + 9 + 9 = 54 = 3 * 18).

同樣，我們也可以設置h2:字體大小18px，行高24px，段前距3px，段後距9px(驗證有：24 + 3 + 9 = 36 = 2 * 18)。

(demo-3.html)

添加邊注

網站我們常常有側邊欄，我們這裡就用右邊的邊注來代表。在這裡的例子中，我們和正文一樣設定邊注的排版：字體12px，行距18px。正是由於我們前面的努力，我們可以看到，邊注的基線和正文的基線是對齊的。關閉網格可以看到，由於基線的對齊，整個排版有條不紊，十分美觀。

(demo-4.html)

添加邊框

添加邊框道理相同，無非要的就是最後要求基線與網格對齊。這裡的例子中，我們來給邊注加個邊框吧。給他加上1px邊框(css border)後，還要再加上8px的補白(css padding).細心的同學們一定發現了，為什麼補白是8px呢？其實很簡單，這就是保證垂直方向上的補白和邊框之和，是我們的基礎行高18px的倍數：垂直方向上兩個補白兩個邊框，那麼1 + 8 + 8 + 1 = 18.