移行中の知識
文字ウェイト
Font Weight
定義
文字ウェイト（font weight）とは、書体内で文字のstrokeがどの程度細く・太く設計されているかを表すtypographic propertyです。Webではfont-weightで指定できますが、同じ400や700でも書体ごとに実際の太さ・黒み・字形差は一致しません。variable fontではweight axisとして連続的に持つ場合もあります。ウェイトは強調や視覚的階層を作る一方、小さい文字・低contrast・細い書体では判読性にも影響します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
product detail page
見出しと本文の差
見るポイント
headingを太くする時、size差やcolor差も同時に大きくしすぎず、どの要素が階層を作っているか確認する。太さだけで十分なら他のcontrastを減らし、過剰な強調を避ける。
navigationやtab UI
selected stateの強調
見るポイント
active itemだけをSemiboldにする場合、layout shiftや文字幅の変化、隣接項目とのcontrastを確認する。weight差だけでstateを伝える必要があるか、indicatorやcolorとの役割分担も見る。
理解
理解のポイント
- font weightはinformation hierarchyとlegibilityへ関わりうるが、同じnominal weightでもtypeface、size、rendering環境によって見え方は変わる。
注意
誤解しやすい点
- 400、600、700などの数値を異なるfont family間で同じ視覚的太さだと考える。
- hierarchyを作るたびにBoldを追加し、画面全体で強調が競合する。
- 小さい文字へ極端にlightなweightを使い、見た目の軽さを優先して判読性を落とす。
関連
関連する概念
出典