移行中の知識
文字幅
Font Width
定義
文字幅（font width）とは、typefaceやfont faceが標準的な幅に対してどの程度condensed / expandedに設計されているかというtypographic propertyです。同じfont-size・weightでもwidthが変わると1行へ入る文字量、字形のproportion、見かけの密度が変わります。文字列をCSS transformで横方向へ潰すことと、幅用に設計されたfont face / variation axisを使うことは同じではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
desktop appのsidebar
狭いnavigation label
見るポイント
長いlabelを収めるためにfont-sizeだけを下げる前に、適切なcondensed faceがあるか検討する。幅を詰めた結果、文字識別や階層が弱くならないか確認する。
editorial hero
大見出しの横幅調整
見るポイント
viewportに対して見出しが長い時、font widthを変えて改行位置と視覚的重さを調整する。transform scaleXで字形を機械的に変形して代用しない。
注意
誤解しやすい点
- condensed fontと、通常fontをtransformで横に縮めたものを同じ品質だと考える。
- 文字幅を狭めれば、可読性への影響なしに情報密度だけ上げられると考える。
- widthの数値や名称を、異なるfont family間で同じ実寸・見え方だと扱う。
関連
関連する概念
出典