iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
2
Modern Web

鉄人28号FX系列 第 5

鉄人28号FX 鉄人5号「功能獸」Display vs Text typeface

★ 村外西南方樹林間 ↓↓↓

顯示樹林位置圖

(☍﹏⁰。) 慌亂逃走樣 )
看來好像暫時逃脫了。咻~呼

回過神後,目前在哪~)
不管了,看紙條上有無提示:

功能取向分為 展示性字體內文性字體
前者則較常用在主標題,通常風格外顯性較高,
而後者常用於內文、次標題等相關位置。
兩者主要差別為閱讀情境不同。

:什麼東西啊!
誰來翻譯 )

既然你誠心誠意的發問了
還來!!)

給我等等!(台詞沒換?)
角色也沒一個對!!!!

樹林間 [功能獸]
展示性字體,
內文性字體,

我們是穿梭在字型的功能獸二人組,

(ノ∀`*) 喵控:
就是這樣喵~~
搶先喊!!)

閱讀前,建議先向 鉄人4号「字戰隊」搜集相關材料,此為延續樹林後章。


★★★ 關卡條件 ↓↓↓

功能導向 (Display vs Text)

展示性字體(display Typeface)
起源於 19 世紀中期之後。隨著工業革命進入高峰,歐美各國勞動力漸漸從鄉村移往都市。泛指各種形式標題、招牌。它要能抓住目光,要吵鬧,而且最好要有味道。如「不被人記得」,那可能就不是一個理想的展示性字體。通常需要更多的空間( 如 padding )視覺上才會更舒適,需留意較適合跟中庸一點的字型搭配,否則易失控。

當「襯線字體」和「無襯線字體」都無法滿足需求時,可以選用展示性字體試試,會是一種不錯的選擇。

內文性字體(text Typeface)
內文性字體用於長時間的閱讀,講究均值平穩的特性。如閱讀長篇小說,仍然能沈浸其中。日本著名字體設計師小林章提到:「最好的字型就是看了之後忘記樣子的字型」強調的就是內文字體的功能性。如'minion pro'與儷細宋就是內文字型,完全為了承載資訊而不讓讀者分心在它的字體形態上。

語重心長樣 [功能獸]
展示字體與內文字體的分野是很近代的概念。
一個很常見的排印設計缺陷就是將這兩種字體的使用情境搞混了。

:少給我裝得一副困擾樣!
我才困擾好嗎?) (◞‸◟) (

一臉得意樣 [功能獸]
另外從瀏覽器 (撇除字重差異) 對文本預設 <h4><p> 字級尺寸皆為 16px,可得知 <h5><h6> 字級都小於 <p> 內文。

HTML 區域標題元素

MDN 進一步使用說明提到下方幾點:

  • 避免使用標題標籤來調整文本字級,如需調整建議使用 font-size 樣式屬性。
  • 避免跳過標題級別,始終從 <h1> 開始,依序 <h2> 等。
  • 應該考慮避免 <h1> 在版面上多次使用。

↑ EXP! +140% )
↑↑ EXP! +220% )
↑↑↑ EXP! +360% )

瞬間腦子一閃而過,
(☉д⊙) 難道:

  • 同功能取向歸為同類型,不以字級尺寸作為層次分辨依據。
  • 同標題元素,例 <h3> 可包含 相鄰近範圍 的字級尺寸。
  • 避免使用標題元素標籤來調整文本字級。

(#`Д\´)ノ 目不轉睛 )
看著紙條最後一小段話:

在行動裝置上,雖閱讀距離相對近,但文本字級又相對偏小,手機螢幕更適合選用 x-height 較高字型,能有效幫助眼睛認為這個字是相較明顯的。

最後記得同時丟丟背包小禮物,
左上追蹤,右上按通知小鈴鐺。

:疑~誰求關注? 村長!!!
(¬_¬) 眼神死。

啾咪 ( ^.< ) 適合 UI 字型

SF and SF Compact

Apple 統一標準字體 San Francisco,字體就被分為「Display」和「Text」兩個字集可供選擇的尺寸。SF 用於 iOS / Mac,SF Compact 用於 Apple Watch。
可以從圓形的字母中發現區別,比如「o、e」,SF Compact 比起 SF 有更為扁平的直線,字級較小與螢幕顯示都經特別優化。兩者在文本中的區別則表現在字母間隙的地方。 SF Compact 字體間有更多的空白。系統根據自主動態優化文本大小自動的轉換 Display / Text 字型,20pt 是分界點。


[ 追加經驗值 ]
註:參考來源 justfont blog Google fonts 的字體(display) 篇
Akira Kobayashi
[新手村] 內文字型與展示字型
A Typographic Foundation
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人4号「字戰隊」font-family
下一篇
鉄人28号FX 鉄人6号「字級羊」font-size
系列文
鉄人28号FX30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言