如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

目錄

1.字號(hào)的設(shè)置

2.根據(jù)需求隨意組合 

3.英文的行高

4.英文的行間距

5.中文的行高

6.中文的行間距

7.行高的禁忌

8.標(biāo)題行高

9.正文行高

10.混合編排

11.字體選擇

1.字號(hào)的設(shè)置

字號(hào)就是字體的大小，文字從大標(biāo)題H1-H7、小標(biāo)題、正文、注釋都要配置相對(duì)應(yīng)的字號(hào)。頁(yè)面的字號(hào)我是以4為基數(shù)進(jìn)行遞增的，最好采用偶數(shù)。像14號(hào)字的正文和13號(hào)字的注釋，這種比較小的字可以不以4為基數(shù)來(lái)做。不管設(shè)計(jì)師怎么去定義字號(hào)，只要視覺(jué)上美觀大方并具有關(guān)聯(lián)性，采用哪種規(guī)則去約束它都可以。

另外所有的字體都要調(diào)試出深色和淺色兩種配色，并分別應(yīng)用在白色底色和黑色底色當(dāng)中。黑色底色展示效果不好就不做展示了。

2.根據(jù)需求隨意組合

當(dāng)我們定義好字號(hào)，標(biāo)題和正文就可以根據(jù)實(shí)際項(xiàng)目需求進(jìn)行自由搭配了。在給標(biāo)題和正文選擇字號(hào)時(shí)要注意它們之間的對(duì)比關(guān)系，字號(hào)差異越大它們的層級(jí)關(guān)系就越明顯，但它們之間的差異又不能太大，差異過(guò)大會(huì)影響整體的視覺(jué)平衡性，給人一種不和諧不自然的感覺(jué)。

例如：標(biāo)題字號(hào)20px搭配正文字號(hào)12px；標(biāo)題字號(hào)24px搭配正文字號(hào)16px。選用哪種標(biāo)題搭配哪種正文也是由設(shè)計(jì)師的美感決定的。

3.英文的行高

在設(shè)置文本行高的之前，需要理解一下“行高”與“行間距”的差別。前端DIV+CSS和設(shè)計(jì)Affinity Designer等繪圖軟件都是以“行高”來(lái)進(jìn)行定義的。在CSS-Style line-height屬性是行高，值分別以百分比、數(shù)值和像素來(lái)表示。例如：h1.test {line-height:112px}，那標(biāo)題h1的行高就是112像素了；繪圖軟件中控制行上下距離的也是行高。好的言歸正傳，中文的行高與英文行高會(huì)有一些差異，英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，如下圖所示。

基線是英文字體結(jié)構(gòu)中的概念，先簡(jiǎn)單了解一下它吧，以后講到字體的時(shí)候再講它吧。我們?cè)诶L圖軟件填寫(xiě)行高的數(shù)值時(shí)，改變的就是上圖所示的這段距離。

4.英文的行間距

英文的行間距就沒(méi)有行高那么復(fù)雜，也不用畫(huà)基線。英文的行間距跟中文相同，指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實(shí)也可以簡(jiǎn)單的理解為“行與行之間的距離”并稱之為行間距。另外英文底部和頂部都有對(duì)應(yīng)的專有名詞的，在英文字體結(jié)構(gòu)中最頂部/最底部隱性的兩條線稱為“上沿線/上限線”和“下沿線/下限線”。這塊的知識(shí)先了解一下就行，以后在字體結(jié)構(gòu)中會(huì)講到。

5.中文的行高

接下來(lái)理解下中文的行高。上面講到說(shuō)英文的行高是由基線決定的，但中文字體與英文字體結(jié)構(gòu)不一樣，中文里沒(méi)有基線的概念，那該怎么定義行高呢。中文的結(jié)構(gòu)屬于方塊字沒(méi)有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字體結(jié)構(gòu)中沒(méi)有上沿線/上限線和下沿線/下限線的概念，它們只存在于英文字體結(jié)構(gòu)中。

6.中文的行間距

中文的行間距就比較好理解了，跟英文的行間距的道理相同。是指一行中文的最底部與下一行中文的最頂部之間的距離。也可以理解為行與行之間的距離。

雖然說(shuō)行高與行間距的差別不太好區(qū)分，而且還有些繞，但理解它們還是很有必要的。

7.行高的禁忌

不管是標(biāo)題、正文還是注釋，他們的行高都不宜過(guò)高，行高過(guò)高會(huì)導(dǎo)致內(nèi)容不易閱讀，文字之間的整體性也會(huì)被打散。標(biāo)題的字號(hào)越大行高應(yīng)該越小，正文的字號(hào)越小行高應(yīng)該越大。當(dāng)然這些規(guī)則都是相對(duì)的，行高大小要合理把控，不能太大或過(guò)小。那要如何合理設(shè)置行高呢，往下看。

8.標(biāo)題行高

標(biāo)題的行高由字號(hào)決定的。平面設(shè)計(jì)中有時(shí)候可以把行高設(shè)置與字號(hào)相同，例如120pt的字號(hào)設(shè)置120pt的行高是沒(méi)有問(wèn)題的。在頁(yè)面中行高是這么計(jì)算的，字號(hào)x倍數(shù)=行高。例如下圖所示，大標(biāo)題H3設(shè)置的字號(hào)是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字號(hào)與行高的倍數(shù)是一點(diǎn)點(diǎn)測(cè)的，因?yàn)樽痔?hào)與行高的比例不會(huì)小于1.0（1倍），我就根據(jù)自身審美進(jìn)行測(cè)試，從1.0/1.1/1.2/1.3....開(kāi)始測(cè)，直到測(cè)出自己滿意的行高。如下圖所示，帶顏色數(shù)字的是倍數(shù)。

最終的行高還是由設(shè)計(jì)師直觀判斷決定的。所以做設(shè)計(jì)要理性中夾雜感性，規(guī)則與創(chuàng)意并存才是一個(gè)優(yōu)秀設(shè)計(jì)師需要兼?zhèn)涞钠焚|(zhì)。那我就拿中文字號(hào)36px和英文字號(hào)24px來(lái)舉個(gè)例子，這樣大家好理解一些。如下圖所示：

從測(cè)試結(jié)果中找到自己滿意的行高就可以了。字號(hào)x倍數(shù)=行高，這里也不怕倍數(shù)小數(shù)位太多的問(wèn)題。在繪圖軟件中是以像素為單位，但有時(shí)候前端代碼會(huì)用父繼承單位“em”。例如：大標(biāo)題H3的字號(hào)是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那轉(zhuǎn)換為前端代碼就是h3.test{line-height: 1.3em}，直接做約等于就行了，差一點(diǎn)點(diǎn)看不出來(lái)的。

9.正文行高

來(lái)接著往下講。正文行高與標(biāo)題行高相同，差異就字號(hào)的不同選擇的行高也不同。標(biāo)題行高倍數(shù)大概1.0-1.6不等，正文行高倍數(shù)大概1.6-2.4不等，這也沒(méi)有一定的標(biāo)準(zhǔn)，還是得根據(jù)項(xiàng)目情況與實(shí)際效果綜合來(lái)看。如下圖所示，帶顏色的數(shù)字是行高的倍數(shù)。

說(shuō)到這里，經(jīng)常有人問(wèn)我正文的行高的值應(yīng)該怎么設(shè)置，大家在做設(shè)計(jì)時(shí)都會(huì)采用1.5/2倍關(guān)系，但這不是絕對(duì)的，行高的倍數(shù)也是受字號(hào)大小影響的。像新浪新聞的正文，字號(hào)是18px，行高設(shè)的是32px，即字號(hào)（18px）x1.777（倍數(shù)）=32px（行高），如果行高倍數(shù)設(shè)置2倍以上，字與字之間的距離變大，就不太好閱讀了。

10.混合編排

好的，完全理解上述所有知識(shí)就可以把標(biāo)題、正文和注釋進(jìn)行混合編排了。大標(biāo)題字號(hào)40px、正文字號(hào)20px、正文行高40px、注釋字號(hào)18px、注釋行高32px、標(biāo)題與正文的間距88px、正文與注釋的間距64px。

11.字體選擇

選擇字體就沒(méi)有什么技術(shù)含量了。做頁(yè)面常用字體就只有那幾種，微軟雅黑、宋體、Verdana、arial、Times New Roman，就不舉例說(shuō)明了。中文網(wǎng)站最常用的就是微軟雅黑+Arial，瀏覽器兼容性也最好。讀到這里有人可能就會(huì)問(wèn)了，載入其他字體也可以啊，是的做企業(yè)網(wǎng)站可以載入其他字體，但像做功能頁(yè)面啊、后臺(tái)頁(yè)面啊，載入其他字體幾乎就不可能了。所以還是要估計(jì)實(shí)際項(xiàng)目需求/品牌需求來(lái)選擇與其相符的字體樣式。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。