設計理論:網頁設計中的垂直韻律

原文：
http://ued.taobao.com/blog/2009/03/31/vertical-rhythm-and-the-incremental-leading/

準備工作

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

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

• 字型大小(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)