移行中の知識
ベースライン
Baseline
定義
ベースライン（baseline）とは、typeface内で多くの文字がその上に置かれる想定上の基準線です。文字サイズの外枠や行の中央線ではなく、異なるfontやsizeを同じ行へ並べた時の垂直位置を理解する基準になります。descenderを持つ文字はbaselineより下へ伸びます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
dashboardのKPI表示
数値と単位の位置を揃える
見るポイント
大きな数値と小さなunitを同じbaselineで揃える案と中央揃えを比較し、文字の足元が一続きに読めるかを見る。font-sizeだけで垂直位置を判断しない。
navigation item
iconとtext labelの見かけの位置
見るポイント
icon boxの幾何学中心と文字のbaselineは別なので、単純なcenter alignmentだけで不自然に見える場合がある。文字のbaselineとiconのvisual centerを見ながら調整する。
注意
誤解しやすい点
- baselineを文字boxの下端やline-height boxの下端と同じものとして扱う。
- 異なるtypefaceを同じbaselineへ置けば、見かけの高さや位置も自動的に揃うと考える。
- baseline alignmentをすべてのicon / text組み合わせへ機械的に適用する。
関連
関連する概念
出典