Material Design-文字排版與應用
BY Grace │

Material Design-文字排版與應用

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

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


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

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



更多文章:

  1. Material Design 網頁版比較
  2. Material Design 改版實例
  3. Material Design 按鈕介紹
  4. Material Design 的對話視窗
  5. Dark theme 深色主題

回應