---
disqus: hackmd-3
---

# 資訊流？
由於最近在設計大人小孩都能看的網頁，發現一個很研究的事情，有人覺得字太大，又有人覺得字太小，到底有沒有一個比較好的設計方法來設定字體大小這件事？

設計大師 EvenWu 告訴我們「網頁不是畫布，是資訊流」，但我發現這件事大家都只在乎版面，而少了我認為很重要的一點 "文字大小"，事實上不管是 mac 的 Chrome、Safari、 還是 ios 都有單獨調整文字大小的設定。

> macOS Chrome ( 設定 > 進階 > 網頁內容 > 字型大小 )
> 

> iOS ( 設定 > 螢幕顯示與亮度 > 文字大小 )
> 

但這部分的設定，卻很少設計師在用，包含 [apple 官方](http://www.apple.com/tw/iphone/) 本身的官方、 Even Wu 的 [點亮台灣](http://iing.tw/) 、 Taylor 的 [uxabc](https://www.uxabc.tw/) 手機版，連些大師級的作品都沒有實作？

你會發現下方圖片藍、紅區塊，都沒有差！
內建的調整字體大小，完全沒用！ 對於視力較差的人來說，是非常難閱讀的！
現在的 WEB UI/UX 市場，是不是少了針對視力較差的族群，沒有做出良好的規劃？

> 

> 事實上 uxabc 的桌面版有比較好的設計，但有點跑版了
> 

# 怎麼解?
要解這樣的問題你必須要有px和em的概念，如果沒有可以先看[這篇](http://jas9.blogspot.com/2011/09/pxemrem.html)

我認為網頁的單位選用時應該分成以下兩個部分:
#### 文字相關部分
> 不僅僅只是文字本身，應該依照字體大小的改變而調整大小的地方，也都應該用 em
> 例如: input 的 padding、 label 的 width、兩個 input 的間距等⋯⋯

#### 其他部分
> 不會因為字體大小的改變而調整大小，所以應該用 px
> 如: 圖片、區塊跟區塊中的間距等⋯⋯

透過這樣的設計，無需額外的CSS定義，使用者將可以自行調整文字大小而且不會跑版，網站將可以讓提供個年齡層使用。

> 以下為工作上的實例，已刪除敏感資訊，左方藍色區域為圖片
> 

> 同一個網站，設定字體為非常大，並不會有太嚴重的跑版
> 

# 手機呢?
照著上述規則實作之後，你會發現你的網站在 ios 手機上面還是沒有辦法動態調整字型大小？ 原因是 body 並沒有讀取到系統的字體大小，但只要在 CSS 加上 font: -apple-system-body 即可讀取到系統的字體大小了！

body{
  font: -apple-system-body
}

> 手邊沒有可以展示的手機版網站，傷一下大家的眼睛
> 

[D.weizhe](http://fb.com/d.weizhe) 2017.03.23 撰