一目瞭然，清楚的視覺層次

根據 Kelley Gordon（她是 UX 始祖公司的頭頭之一）說：

清楚的視覺層次結構，將視線引導至頁面上最重要的元素，
這可以透過顏色、對比、比例和分組的變化來建立。

引用自：https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
中文資料來源：聽 UX 開山始祖們談 UX！Nielsen Norman Group 修課觀察

• 目前作法是用 body 內的設定字體去做縮放，大部分會設定為 16px。
• 也有特別針對使用者偏好，如：年長者字偏大，英文字偏小，去參考。
• 必須包含網頁、平板、手機

~~ 題外話，好奇怎麼能確定每個瀏覽器都是 16px ？~~
各瀏覽器的基本字的大小測試：
這位仁兄有用 js 做測試，瀏覽器沒有調整的 default 值是 16px，
另外，他建議 default 不要設定 font-size 為絕對值(eg.px)！wow～
恩，不過他是全端工程師先參考就好～
使用者如果自行調整，導致整個跑版了話又有得忙了～
Detecting the default browser font size in JavaScript
~~

不過有用 css reset，像是 normalize.css, cssreset.css, bootstrap, 都會直接被歸 0，就不用考慮那麼多啦～

相關字體工具：
https://type-scale.com/
https://www.modularscale.com/

可參考的規範設計：

• google material - 新版 3
  Material You是什麼？Material Design3 與2的比較
• apple human-interface-guidelines
• Bootstrap 也在用的 8 point grid system

延伸閱讀：
Rem in CSS: Understanding and Using rem Units