Adaptive Typography - Figma から CSS へ #Design

この記事の概要

デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。

しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。

Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。

Figma での定義

タイポグラフィスケール（グローバル）

あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。

そのため 12px を下限とし、スケールをつくってみたいと思います。

今回はこの式を用いて、n = 3 からスタートします。

f_n = 12 \times 2^{\frac{n}{6}}

すると、次のような結果が得られます。

一旦 34 を上限として、Figma 上でデータにおこしてみます。

等差数列や等比数列では得られない、良い具合の変化だと思います。

こちらを variables に当てはめます。

数式でいえば n = 3 からスタートしていましたが、デザインデータとして扱いやすいよう、マイナス 2 して番号を振りました。

タイポグラフィスケール（エイリアス）

次に、先ほど設定したものをグローバルトークンとして、エイリアストークンを設定します。

今回はテストで作るだけなので、4 種類だけを作ります。

sm: 1
base: 3
lg: 5
xl: 7

更に、デバイスサイズごとに割り当てを変えます。
デバイスサイズが大きくなるごとに、サイズ大きく＆ジャンプ率高くなるように調整します。

そうして作ったものをおおよそ実際のデバイスサイズに当てはまるとこのようになります。
左から順に、モバイル、タブレット、デスクトップの想定です。

モバイルに揃えるとデスクトップが小ぶりに見え過ぎて、デスクトップに揃えるとモバイルで全然収まらなくなりがちですが、ちょうど良い塩梅になったと思います。

説明の都合上一本道で作業を進めていますが、実際は多少行ったり来たりを繰り返しています。

ある程度トークンを作ったらデバイスごとに当てはめてみて、適切でなければ最初の数式をアップデートする……などの調整はごく当たり前に発生するものと思っていてください。

CSS への移植

Figma にて見た目と variables の設定ができたら、後は CSS にて再現するだけです。

まずは、グローバルトークンを定義します。

:root {
  --font-size-1: 12px;
  --font-size-2: 13px;
  --font-size-3: 15px;
  --font-size-4: 17px;
  --font-size-5: 19px;
  --font-size-6: 21px;
  --font-size-7: 24px;
  --font-size-8: 27px;
  --font-size-9: 30px;
  --font-size-10: 34px;
}

そして、デバイスサイズごとのエイリアストークンを定義します。

@media (width <= 640px) {
  :root {
    --font-size-sm: var(--font-size-1);
    --font-size-base: var(--font-size-3);
    --font-size-lg: var(--font-size-5);
    --font-size-xl: var(--font-size-7);
  }
}

@media (640px < width < 960px) {
  :root {
    --font-size-sm: var(--font-size-2);
    --font-size-base: var(--font-size-4);
    --font-size-lg: var(--font-size-6);
    --font-size-xl: var(--font-size-9);
  }
}

@media (960px <= width) {
  :root {
    --font-size-sm: var(--font-size-2);
    --font-size-base: var(--font-size-4);
    --font-size-lg: var(--font-size-7);
    --font-size-xl: var(--font-size-10);
  }
}

最後に、今回はユーティリティクラスのような形式でフォントサイズ指定用クラスを定義します。

.text-xl {
  font-size: var(--font-size-xl);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-sm {
  font-size: var(--font-size-sm);
}

これにて、コードでもアダプティブなスケールを再現できました。

余談

Figma から CSS へ移植するだけと言っても、variables の数が多いとなかなか大変です。

プラグインで解消できるような気もするので、作ったらそれも記事にしてみようと思います。