Adaptive Typography - Figma から CSS へ - Qiita

この記事の概要 デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。 しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。 Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。 Figma での定義 タイポグラフィスケール（グローバル） あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。 そのため 12px を下限とし、スケールをつくってみたいと思います。 今回はこの式を用いて、n = 3 からスタートします。 すると、次のような結果が得られます。 12 13 15 17 19 21 24 27 30 34