移行中の知識
文字サイズ
Font Size
定義
文字サイズ（font size）とは、文字を組む時に指定するtypographic sizeです。WebではCSSのfont-sizeなどで指定しますが、同じ数値でも書体のx-height、字面、weight、言語によって実際に見える大きさは変わります。文字サイズは判読性だけでなく、視覚的階層、行長、行間、情報密度とも連動するため、単独の正解値として決めません。viewportが変わる場合も、端末カテゴリごとに固定値を当てるだけでなく、実際の行長や階層との関係を見ます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
responsive article page
スマホとPCで本文の読み条件を揃える
見るポイント
desktopとmobileで同じfont-sizeを維持すること自体を目標にせず、実際の書体、container幅、line-height、line-lengthを合わせて確認する。狭幅で文字だけを小さくして一行へ詰め込んだり、wide screenでviewport比例の文字を無制限に大きくしたりしない。
業務用Webアプリ
密度の高いdata table
見るポイント
一覧性を上げるために文字を小さくする時、表示件数だけでなくlabel・数値・statusを瞬時に見分けられるかを見る。secondary情報だけを小さくする場合も、役割差と判読性を同時に確認する。
理解
理解のポイント
- font sizeは文字の見え方と階層へ強く関わるが、同じ指定値でもtypefaceやweightによってperceived sizeとlegibilityは変わりうる。
注意
誤解しやすい点
- 同じpxやptなら異なる書体でも同じ大きさに見えると考える。
- 情報階層を作るためにsecondary textを小さくし続け、判読性を犠牲にする。
- font sizeだけを変更し、line-height、line-length、layout widthとの関係を見直さない。
- mobile用・desktop用の固定font-sizeを決めればresponsive typographyが完了すると考える。
- viewport unitだけで文字サイズを比例変化させ、userのtext resizingや極端なviewport幅を確認しない。
関連
関連する概念
出典