Typography

Typography TokensはSparkle Design System全体で使用するタイポグラフィのための全ての要素を定義した物です。

Primitive Tokens はタイポグラフィそのものではなく、タイポグラフィを構成する要素を扱うトークン階層です。

コンポーネントで使用するタイポグラフィは後述する Semantics Tokens で定義します。

現在はこの5つの要素から成り立っています。

• fonts (フォントファミリー)
• fontSizes (フォントサイズ)
• fontWeights (フォントウェイト)
• lineHeights (行間)
• letterSpacings (文字間隔)

fonts はフォントファミリーを扱うための要素です。

テキストフォントには BIZ UD フォントを採用しており、トークンには等幅フォントと可変幅フォントの2種類のファミリーを用意しています。

アイコンフォントにはMaterial Symbols Roundedを採用しています。

• プロポーショナルフォント (proportional)
  • 文字の種類に応じて文字幅を調整して読みやすい文字組となるように設計されたフォント
  • 見出しや文章に適用させることに向いている
• モノスペースフォント (monospace)
  • 文字幅が固定化されているフォント
  • 幅が均一なので数字や文字同士を比較してもらう目的で提示する場合に効果的
• アイコンフォント（icon）
  • アイコンだけで構成されているフォント

fontSizes はフォントサイズを扱うための要素です。

12px を起点に、54px までの12段階を用意しています。

フォントサイズは以下の公式で求めることができます。

X₀ = 12px
Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2

def recurrence(x):
    if x == 1:
        return 12
    else:
        return recurrence(x - 1) + (int((x - 2) / 4) + 1) * 2


for i in range(1, 13):
    px = recurrence(i)
    rem = px / 16.00
    print("x{0}: {1}px ({2}rem)".format(i, px, rem))

fontWeights はフォントウェイトを扱うための要素です。

フォントウエイトにはテキスト用とアイコン用の2種類があります。

lineHeights は行高・行間を扱うための要素です。

line-heightに奇数や小数を含む値が適応されてしまうことを防ぐことを目的に、fontSizesを基準にバーティカルグリッドを適用した値を算出して定義します。

//計算式
verticalGridUnit: 4
baseLineHeight: none | small | medium | large
lineHeight: CEIL((fontSize * baseLineHeight) / verticalGridUnit ) * verticalGridUnit

baseLineHeight

none と small から large までの 計4段階を用意しています。

letterSpacings は文字間隔を扱うための要素です。

通常状態の normal と small から large までの 3 段階を用意しています。

Semantics Tokens は 実際にコンポーネントで使用するタイポグラフィを定義するためのトークン階層です。

Semantics Tokens は Primitive Tokens を継承して構築されています。

全てのタイポグラフィは Primitive Tokens で定義した5つの要素を組み合わせて構築されています。

以下のトークンは Text コンポーネント用のタイポグラフィの定義を一部抜粋した物です。

Figma では深いネスト構造にすると目的のタイポグラフィスタイルを参照する際に時間がかかるため、text.3.regular.pro のように 4 階層で定義するのではなく text.3.regular-pro のようにウエイトとファミリーを混合させることで 3階層で定義しています。

Headingコンポーネントの場合は同じフォントサイズであっても行高を広く取りたいのでLetter spacingを large に設定しています。
このように、目的に応じて参照するトークンだけを変更することでデザインの一貫性や実装時の保守性を保ちながらコンポーネントを定義することができます。