由於最近在設計大人小孩都能看的網頁，發現一個很研究的事情，有人覺得字太大，又有人覺得字太小，到底有沒有一個比較好的設計方法來設定字體大小這件事？
設計大師 EvenWu 告訴我們「網頁不是畫布，是資訊流」，但我發現這件事大家都只在乎版面，而少了我認為很重要的一點 "文字大小"，事實上不管是 mac 的 Chrome、Safari、 還是 ios 都有單獨調整文字大小的設定。
macOS Chrome ( 設定 > 進階 > 網頁內容 > 字型大小 )
iOS ( 設定 > 螢幕顯示與亮度 > 文字大小 )
但這部分的設定，卻很少設計師在用，包含 apple 官方 本身的官方、 Even Wu 的 點亮台灣 、 Taylor 的 uxabc 手機版，連些大師級的作品都沒有實作？
你會發現下方圖片藍、紅區塊，都沒有差！ 內建的調整字體大小，完全沒用！ 對於視力較差的人來說，是非常難閱讀的！ 現在的 WEB UI/UX 市場，是不是少了針對視力較差的族群，沒有做出良好的規劃？
事實上 uxabc 的桌面版有比較好的設計，但有點跑版了
要解這樣的問題你必須要有px和em的概念，如果沒有可以先看這篇
我認為網頁必須分成以下兩個部分，文字相關、不是文字。
應該依照字體大小的改變而調整大小，所以應該用 em 而非 px
如: input 的 padding 、 label 的 width、兩個 input 的間距
不會因為字體大小的改變而調整大小，所以應該用 px 而非 em
如: 圖片、區塊跟區塊中的間距等⋯⋯
透過這樣的設計，無需額外的CSS定義，使用者將可以自行調整文字大小而且不會跑版，網站將可以讓提供個年齡層使用。
以下為工作上的實例，已刪除敏感資訊，左方藍色區域為圖片
同一個網站，設定字體為非常大，並不會有太嚴重的跑版
照著上述規則實作之後，你會發現你的網站在 ios 手機上面還是沒有辦法動態調整字型大小？ 原因是 body 並沒有讀取到系統的字體大小，但只要在 CSS 加上 font: -apple-system-body 即可讀取到系統的字體大小了！
body{
font: -apple-system-body
}手邊沒有可以展示的手機版網站，傷一下大家的眼睛
D.weizhe 2017.03.23 撰