設定行間距 設計師應該如何設定文字排版中的行高

2021-10-14 17:15:11 字數 3524 閱讀 7687

各位,你們要的細節來了,文字排版中的行高設定。

目錄

1.字型大小的設定

2.根據需求隨意組合

3.英文的行高

4.英文的行間距

5.中文的行高

6.中文的行間距

7.行高的禁忌

8.標題行高

9.正文行高

10.混合編排

11.字型選擇

1.字型大小的設定

字型大小就是字型的大小,文字從大標題h1-h7、小標題、正文、注釋都要配置相對應的字型大小。頁面的字型大小我是以4為基數進行遞增的,最好採用偶數。像14號字的正文和13號字的注釋,這種比較小的字可以不以4為基數來做。不管設計師怎麼去定義字型大小,只要視覺上美觀大方並具有關聯性,採用哪種規則去約束它都可以。

另外所有的字型都要除錯出深色和淺色兩種配色,並分別應用在白色底色和黑色底色當中。黑色底色展示效果不好就不做展示了。

2.根據需求隨意組合

當我們定義好字型大小,標題和正文就可以根據實際專案需求進行自由搭配了。在給標題和正文選擇字型大小時要注意它們之間的對比關係,字型大小差異越大它們的層級關係就越明顯,但它們之間的差異又不能太大,差異過大會影響整體的視覺平衡性,給人一種不和諧不自然的感覺。

例如:標題字型大小20px搭配正文本號12px;標題字型大小24px搭配正文本號16px。選用哪種標題搭配哪種正文也是由設計師的美感決定的。

3.英文的行高

在設定文字行高的之前,需要理解一下「行高」與「行間距」的差別。前端div+css和設計affinity designer等繪圖軟體都是以「行高」來進行定義的。在css-style line-height屬性是行高,值分別以百分比、數值和畫素來表示。例如:h1.test ,那標題h1的行高就是112畫素了;繪圖軟體中控制行上下距離的也是行高。好的言歸正傳,中文的行高與英文行高會有一些差異,英文的行高指的是一行英文的基線與下一行英文的基線之間的距離,如下圖所示。

基線是英文本型結構中的概念,先簡單了解一下它吧,以後講到字型的時候再講它吧。我們在繪圖軟體填寫行高的數值時,改變的就是上圖所示的這段距離。

4.英文的行間距

英文的行間距就沒有行高那麼複雜,也不用畫基線。英文的行間距跟中文相同,指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實也可以簡單的理解為「行與行之間的距離」並稱之為行間距。另外英文底部和頂部都有對應的專有名詞的,在英文本型結構中最頂部/最底部隱性的兩條線稱為「上沿線/上限線」和「下沿線/下限線」。這塊的知識先了解一下就行,以後在字型結構中會講到。

5.中文的行高

接下來理解下中文的行高。上面講到說英文的行高是由基線決定的,但中文字型與英文本型結構不一樣,中文裡沒有基線的概念,那該怎麼定義行高呢。中文的結構屬於方塊字沒有基線,所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字型結構中沒有上沿線/上限線和下沿線/下限線的概念,它們只存在於英文本型結構中。

6.中文的行間距

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

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

7.行高的禁忌

不管是標題、正文還是注釋,他們的行高都不宜過高,行高過高會導致內容不易閱讀,文字之間的整體性也會被打散。標題的字型大小越大行高應該越小,正文的字型大小越小行高應該越大。當然這些規則都是相對的,行高大小要合理把控,不能太大或過小。那要如何合理設定行高呢,往下看。

8.標題行高

標題的行高由字型大小決定的。平面設計中有時候可以把行高設定與字型大小相同,例如120pt的字型大小設定120pt的行高是沒有問題的。在頁面中行高是這麼計算的,字型大小x倍數=行高。例如下圖所示,大標題h3設定的字型大小是48px(12a),那行高就是62.4,即48x1.3倍=62.4。字型大小與行高的倍數是一點點測的,因為字型大小與行高的比例不會小於1.0(1倍),我就根據自身審美進行測試,從1.0/1.1/1.2/1.3....開始測,直到測出自己滿意的行高。如下圖所示,帶顏色數字的是倍數。

從測試結果中找到自己滿意的行高就可以了。字型大小x倍數=行高,這裡也不怕倍數小數字太多的問題。在繪圖軟體中是以畫素為單位,但有時候前端**會用父繼承單位「em」。例如:大標題h3的字型大小是48px,行高是62.4px(48x1.3倍),62.4px=1.2816667em,那轉換為前端**就是h3.test,直接做約等於就行了,差一點點看不出來的。

9.正文行高

來接著往下講。正文行高與標題行高相同,差異就字型大小的不同選擇的行高也不同。標題行高倍數大概1.0-1.6不等,正文行高倍數大概1.6-2.4不等,這也沒有一定的標準,還是得根據專案情況與實際效果綜合來看。如下圖所示,帶顏色的數字是行高的倍數。

10.混合編排

好的,完全理解上述所有知識就可以把標題、正文和注釋進行混合編排了。大標題字型大小40px、正文本號20px、正文行高40px、注釋字型大小18px、注釋行高32px、標題與正文的間距88px、正文與注釋的間距64px。

11.字型選擇

選擇字型就沒有什麼技術含量了。做頁面常用字型就只有那幾種,微軟雅黑、宋體、verdana、arial、times new roman,就不舉例說明了。中文**最常用的就是微軟雅黑+arial,瀏覽器相容性也最好。讀到這裡有人可能就會問了,載入其他字型也可以啊,是的做企業**可以載入其他字型,但像做功能頁面啊、後台頁面啊,載入其他字型幾乎就不可能了。所以還是要估計實際專案需求/品牌需求來選擇與其相符的字型樣式。

iOS 設定行間距

uilabel設定行間距 uilabel bodylabel uilabel new bodylabel.frame cgrectmake 0 0,self view dd w 120 bodylabel.text 有人說,生活如水,何必要顛簸出浪花,最後,濺了自己一身水,平平淡淡才是真。但我其實並...

View TextView行間距設定

1 設定行間距 android linespacingextra,取值範圍 正數 負數和0,正數表示增加相應的大小,負數表示減少相應的大小,0表示無變化。android id id txt msg android layout width wrap content android layout he...

Android TextView 設定行間距字間距

行間距 android textview 設定行間距的相對來說比較簡單,可以通過設定textview的android linespacingextra或android linespacingmultiplier來達到你希望看到的結果。android linespacingextra 設定行間距 如下...