Material Design-文字排版與應用

Material Design-文字排版與應用
在網頁設計開始前,除了要定義顏色以外,定義字型也是很重要的事,把13種字型定義出來,在建構各種元素才能達到畫面統一和協。

  • H1-H6屬於標題,可以使用的字形較多元的
  • H6 (20px)適用於小螢幕時的標題使用,例如行動裝置上,app bar上的標題,字形統常只使用明體或黑體
  • Subtitle 可以當副標題使用,重點強度僅次於headline。通常只使用明體或黑體
  • Body 正文內容,建議使用明體或黑體
  • Caption and overline 最小的字體,用於圖像註解或是引入標題
  • Button (14px) 按鈕只使用黑體,不能用明體


網頁預設文字大小一般為16,如果為內容式網站,版面閱讀最恰當的寬度介於800px-850px 之間

網頁上的行高要能被4整除,讓版面排版都能於齊於4的網格上面



更多文章:

  1. Design system設計系統概述
  2. Material You是什麼?Material Design3 與2的比較
  3. 網頁配色怎麼選?使用配色工具挑顏色2
  4. 網頁配色怎麼選?使用配色工具挑顏色1
  5. Material Design-Android網站分析2