iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

前端「設計」聖光之路系列 第 13

文字大小、行高與空間上的關係

https://ithelp.ithome.com.tw/upload/images/20181027/20083608Qoz1DgS8DQ.png

一般平面設計師再進入網頁環境時,會不清楚網頁設計所用的單位數值,造成設計稿與開發的畫面有嚴重的落差;且網頁設計本身有許多「慣用的數值」,建議一開始也能先使用大家通用的數值,待了解所有數值對於畫面、軟體、技術上等影響後再做調整。

文字樣式屬性

由於網頁並沒有像繪圖軟體那麼的自由,所以才會有許多文章提到「設計師需要學程式」,因為之中有許多技術限制需要設計師去理解,這會有助於設計執行上的可行性。

文字單位

文字分為絕對單位及相對單位,絕對單位與平面設計概念一致,基本上是設定多少,畫面呈現就是固定大小;而相對單位則是沒有固定大小,所設定的數值會受到外層、HTML 設定、裝置畫面大小等等而定,相對來說靈活很多,但在掌握上也困難許多。

絕對尺寸:

  • px:最常使用的絕對單位,過去會使用略小的數值,目前是以預設的 16px 為主,請避免設定過小的字體導致閱讀上的困難。
  • pt:很少用到的數值,請不要用印刷的 "pt" 作為「螢幕顯示」時的單位(另一種 pt 為 iOS 上所定義的 pt,是接近於 CSS 上的 px,這段確實很容易搞混,請謹記不要使用印刷及 CSS 的 pt 單位即可)。

相對尺寸:

  • em:1em = 一個字體大小,是相對於父層的單位,所以當父層為 32px 時, 1em 則為 32px 大,而這個數值可以不斷疊加。
  • rem:目前主流的單位尺寸,1rem = 一個字體大小,相對於 HTML 所定義的文字大小而定,可以在頁面呈現後調整設定值修改畫面的單位尺寸。
  • %:類似 em,使用上沒有太大差異,細節可參考
  • vw, vh:1vw = 瀏覽器的寬度,1vh = 瀏覽器的高度,比較常用在畫面上,但也是有機會用在文字上,如:Header 的主要文字。

延伸介紹:實際展示 EM 與 REM 的差異

文字尺寸

目前來說,網頁開發大多都是使用 16px 作為基準字,雖然設計訓練中都習慣將文字縮寫以增加質感,但請別忽略網頁本質是為了傳達訊息,且小字在行動版上閱讀上更為困難,盡可能維持預設值來製作網頁設計。

由於 rem 的出現,我們不再需要行動版與桌面版完全統一相同的字體大小(雖然實作上還是同一為主)。設計時我們依然會以 px 為主,但為了配合開發上的方便,通常會使用固定級數的方式作為大小字的變換,範例如下:

設計師用的尺寸:   工程師所用的尺寸
16px        :   1rem
20px        :   1.25rem
24px        :   1.5rem
28px        :   1.75rem
32px        :   2rem
40px        :   2.5rem

同理,如果將預設尺寸改為 15px,相關的數值也會重新調整(15px = 1rem,30px = 2rem...)。

設計上注意事項

當如果使用 rem 為單位時且預設值為 16px 時,應避免出現 17px, 21px, 25px 這種尺寸造成轉換上的困擾(就算不使用 rem 也不該如此 :D),盡可能維持相同邏輯在執行網頁設計。

行高

平面設計中,我們習慣使用固定的數值,例如 12pt 的文字大小搭配 16pt 的行高,但在網頁設計中則習慣使用相對的倍數來呈現;如 line-height: 1.5 來代表 1.5 倍的行高,此時文字大小如果設定為 16px,那麼行高則為 24px。

並且行高的設定,通常會設置於網頁的 body 上,也就是全網站套用相同的預設行高,如果有例外再另外條整。

如果 body 行高設定為 1.5
其它文字大小的相對行高
16px :   24px
20px :   30px
24px :   36px

除此之外,行高的設計也會影響到「空間的顯示」,平面設計中的文字空間與其它圖文基本上是毫無關聯性的,但在網頁設計中除了設定成絕對定位,其餘物件的空間都會有彼此的關連性。

下方是行高 1.5 倍的文字段落,所佔用的區塊則使用橘色顯示,後方緊貼著一塊紫色方塊,這個方框並不會與文字產生空間上的交錯。

https://ithelp.ithome.com.tw/upload/images/20181027/20083608AHYvUcItwp.png
以下分別使用行高 0.6、1、1.5、3 再呈現一次,如果行高使用 0.6 的情況,文字會超出橘色的空間範圍,並且與紫色產生些微的交錯;而在行高 3 時文字距離橘色邊框距離增加許多,並且會將紫色方框推向後方。

https://ithelp.ithome.com.tw/upload/images/20181027/20083608enQ98Rf26Y.png

設計上注意事項

因此在設計文字時,也要注意繪圖軟體所呈現的範圍,如下圖:當設計 line-height 為 3 倍時,繪圖軟體自然會使用正確的方框尺寸,此時應避免與其它元素產生交錯。

https://ithelp.ithome.com.tw/upload/images/20181027/20083608gasvzvbvn7.png

另一個常見的錯誤習慣

因為行高會影響到文字呈現的空間,因此會有不少網頁設計師透過 line-height 來製作垂直置中。這會導致文字再多行時也會使用到錯誤的行高,並且會降低 CSS 的設計彈性,因此非常不建議使用 line-height 的數值製作垂直置中。

.vertical-align {
  line-height: 48px;
  height: 48px;
}

正確應使用 padding、flex 等方法來做垂直置中。

結語

本篇的文字設定在畫面上很難找到問題,但會影響該設計師是否易於與工程師配合,所以追求美感的同時,依然要注意畫面的邏輯及可行性。


上一篇
網頁設計 - 網路字體運用
下一篇
網頁圖片格式的運用
系列文
前端「設計」聖光之路30

尚未有邦友留言

立即登入留言