材料設計-文字排版與應用
BY Grace │ 2019-02-27 09:10:38

材料設計-文字排版與應用

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

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


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

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



更多文章:

  1. 卡片列表與圖片列表
  2. Material Design 動態效果
  3. 比較Material Design 1
  4. Material Design 如何應用
  5. Material Design 網頁版比較

回應