首先，當談到排版，我們先要了解基線是什么？維基百科是這樣定義)的：在排版和書法中，基線是以字終sit底線為基礎，并且向兩邊延伸的直線。
好極了，但我為什么要忽視他呢？好希望你充滿激情的去設計一個非常好看的網站。我的愚見是，一個驚人的網站的基礎在于他的排版。為了讓網站上的所有文本流動順暢對齊，我們就要基于一個網格線來排版，這也就有了基線網格一說，也使基線網格有用武之處。基線將確保有一個適當的行高，這是非常重要的，它適用于任何列的布局當中。
讓我們繼續深入！正如我將要創建一個具有響應性的基線，我使用em做為單位，并且在
元素中設置默認font-size值，以確保所有瀏覽器呈現的文字大小是一致的。body {
font-size: 100%;
}
采用100%值，瀏覽器將會渲染字體大小等于瀏覽器的默認值，也就是16px。接下來，我們需要創建一個排版的樣式風格。根據排版元素的層次結構，我將文本字號定義為：16,18,21,24,36,48。我們來看看樣式：
h1 {
font-size: 3em; /* 48 ÷ 16 = 3 */
}
h2 {
font-size: 2.25em; /* 36 ÷ 16 = 2.25 */
}
h3 {
font-size: 1.5em; /* 24 ÷ 16 = 1.5 */
}
h4 {
font-size: 1.3125em; /* 21 ÷ 16 = 1.3125 */
}
h5 {
font-size: 1.125em; /* 18 ÷ 16 = 1.125 */
}
h6 {
font-size: 1em; /* 16 ÷ 16 = 1 */
}
p {
font-size: 1em; /* 16 ÷ 16 = 1 */
}
這里就是一大堆數學運算，可能讓人感覺頭暈，會比較混亂。em是一個相對單位，1em是當前font-size的一倍，而3em就是當前font-size的3倍(記住，我們當前字體大小是100％或16px)。我們排版需要將單位轉換成em。我這里有一個公式："目標字號 ÷ 當前字號"。如果我們希望
的font-size設置值為32px，根據公式可以計算出:"32px ÷ 16px = 2em"。我給每個樣式后面注釋了計算方法，以免混淆。
em是一個相對單位，在px和em之間轉換時是一門復雜的數學運算，其中具有一定的規則。如果你從未深入了解過兩者之間的轉換，我個強烈建議您閱讀《CSS中強大的EM》一文。——@大漠
現在我們已經有了一份使用em制作的排版風格，我們還需要創建一個合適的行高line-height。正是這種行高加上元素上下外邊距，并且根據不同的排版元素做相應的調整，創建了我們的基線。根據經驗，可讀文本的一般規則是將行高設置為字體大小的1.4~1.5倍。我這里使用的是1.5倍，我不介意給文本之間留有更多的間隙。鑒于我們的默認字體大小是16px，那么行高就是24px(16px的1.5倍)。
還記得前面算出font-size的em公式嗎？我們也可以運用到我們行高的計算中來："目標行高 ÷ 當前字號"。加上行高的排版樣式是這樣：
h1 {
font-size: 3em; /* 48 ÷ 16 = 3*/
line-height: 1em; /* 48 ÷ 48 = 1 */
}
h2 {
font-size: 2.25em; /* 36 ÷ 16 = 2.25 */
line-height: 1.333333333333333em; /* 48 ÷ 36 */
}
h3 {
font-size: 1.5em; /* 24 ÷ 16 */
line-height: 1em; /* 24 ÷ 24 */
}
h4 {
font-size: 1.3125em; /* 21 ÷ 16 */
line-height: 1.142857142857143em; /* 24 ÷ 21 */
}
h5 {
font-size: 1.125em; /* 18 ÷ 16 */
line-height: 1.333333333333333em; /* 24 ÷ 18 */
}
h6 {
font-size: 1em; /* 16 ÷ 16 */
line-height: 1.5em; /* 24 ÷ 16 */
}
p {
font-size: 1em; /* 16 ÷ 16 */
line-height: 1.5em; /* 24 ÷ 16 */
}
正如大家所看到的，h1和h2的字號比較大，我們把行高也翻倍了。
剩下的事情就是給這些元素添加一些間距。我喜歡將行高的值用到margin-bottom上去。這樣我們的垂直規律(ver-tical rhythm)看起來蠻不錯，而且均勻。我創建的基線網格：
h1 {
font-size: 3em; /* 48 ÷ 16 */
line-height: 1em; /* 48 ÷ 48 */
margin-bottom: .5em; /* 24 ÷ 48 */
}
h2 {
font-size: 2.25em; /* 36 ÷ 16 */
line-height: 1.333333333333333em; /* 48 ÷ 36 */
margin-bottom: .6666666666666667em; /* 24 ÷ 36 */
}
h3 {
font-size: 1.5em; /* 24 ÷ 16 */
line-height: 1em; /* 24 ÷ 24 */
margin-bottom: 1em; /* 24 ÷ 24 */
}
h4 {
font-size: 1.3125em; /* 21 ÷ 16 */
line-height: 1.142857142857143em; /* 24 ÷ 21 */
margin-bottom: 1.142857142857143em; /* 24 ÷ 21 */
}
h5 {
font-size: 1.125em; /* 18 ÷ 16 */
line-height: 1.333333333333333em; /* 24 ÷ 18 */
margin-bottom: 1.333333333333333em; /* 24 ÷ 18 */
}
h6 {
font-size: 1em; /* 16 ÷ 16 */
line-height: 1.5em; /* 24 ÷ 16 */
margin-bottom: 1.5em; /* 24 ÷ 16 */
}
p {
font-size: 1em; /* 16 ÷ 16 */
line-height: 1.5em; /* 24 ÷ 16 */
margin-bottom: 1.5em; /* 24 ÷ 16 */
}
就這樣，我們有一個漂亮的文字排版的基礎。但使用em對于大家來說是一個挑戰，但對于基線網格來說是一個很好的處理方式，可以讓你的排版更方便而且還可以做到大小響應(用戶修改字體大小)。您的訪問會非常欣賞你的網站，因為你為此付投入了時間與精力。
譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載煩請注明出處：
