移行中の知識
タイポグラフィックスケール
Typographic Scale
定義
タイポグラフィックスケール（typographic scale）とは、本文・見出し・displayなど複数の文字サイズを、その場ごとに個別決定するのではなく、段階的なsize体系として設計する考え方です。一定のratioを使う方法もありますが、scaleはratioそのものではなく、役割とhierarchyを支えるsize setです。weightやline heightなどを組み合わせたtype style / tokenとは区別します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
SaaS design system
product UIの見出し階層
見るポイント
body、label、section heading、page headingのsizeを独立に増減せず、少数のscale stepへ整理する。隣接stepの差が小さすぎて役割差が消えていないか確認する。
portfolio case study
editorialページのdisplay size
見るポイント
product UI用のcompact scaleをそのまま使わず、display向けの大きなstepを追加する。固定ratioを守ることより、viewportとcontent hierarchyで必要な差を作る。
注意
誤解しやすい点
- modular scaleの特定ratioを、普遍的に美しい文字サイズ体系として扱う。
- scaleのstep数を増やしすぎて、ほぼ同じ役割の文字サイズを乱立させる。
- font-sizeだけを体系化し、weight・line height・layoutとの関係を見ない。
関連
関連する概念
出典