zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

文字サイズ

設定済みトークンまたは任意の CSS font-size 値から文字サイズを設定します。

キャプション、本文、見出しなど用途に合わせて文字サイズを指定します。名前付きの font-size トークンにはサイズと行の高さを組み合わせられ、任意値では検証済みの CSS 値を1要素に指定できます。

クラスと CSS の早見表

クラスの例期待される宣言
text-copyfont-size: var(--zw-font-size-copy); line-height: var(--zw-font-size-copy-leading);
text-[20px]font-size: 20px;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。各例は size と lineHeight を持つ tokens.fontSizes を宣言します。lineHeight がある名前付きテキストトークンは両方のプロパティを出力し、text-[20px] は font-size だけを出力します。wind-demo は枠と余白のみを加えます。

使い方の例

サイズと行の高さを比べる

各トークンはサイズと行の高さを組み合わせ、大きい表示用サイズでは行を詰めています。

サイズと行の高さを比べる
HTML
<div class="wind-demo-size">
  <p class="text-caption">Caption / 補足の文字: compact but readable.</p>
  <p class="text-copy">Body / 本文: choose a size that stays comfortable across a paragraph.</p>
  <p class="text-display">Display / 見出し: larger type uses a tighter paired leading.</p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-size-caption: .875rem;
    --zw-font-size-caption-leading: 1.45;
    --zw-font-size-copy: 1rem;
    --zw-font-size-copy-leading: 1.65;
    --zw-font-size-display: 1.5rem;
    --zw-font-size-display-leading: 1.2;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-size {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-size p {
  margin: 0;
  padding: .5rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-size p:last-child {
  border-bottom: 0;
}
.text-caption {
  font-size: var(--zw-font-size-caption);
  line-height: var(--zw-font-size-caption-leading);
}
.text-copy {
  font-size: var(--zw-font-size-copy);
  line-height: var(--zw-font-size-copy-leading);
}
.text-display {
  font-size: var(--zw-font-size-display);
  line-height: var(--zw-font-size-display-leading);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontSizes": {
        "caption": {
          "size": "0.875rem",
          "lineHeight": "1.45"
        },
        "copy": {
          "size": "1rem",
          "lineHeight": "1.65"
        },
        "display": {
          "size": "1.5rem",
          "lineHeight": "1.2"
        }
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-size": true
    },
    "safelist": {
      "docs-preview": [
        "text-caption",
        "text-copy",
        "text-display"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-size { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-size p { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-size p:last-child { border-bottom: 0; }

一度だけ使うサイズを指定する

text-[20px] は検証された font-size を出力し、line-height はブラウザーの値または別の明示的なユーティリティに任せます。

一度だけ使うサイズを指定する
HTML
<p class="wind-demo-size-custom text-[20px]">One-off 20px / 任意の20pxサイズ</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-size-caption: .875rem;
    --zw-font-size-caption-leading: 1.45;
    --zw-font-size-copy: 1rem;
    --zw-font-size-copy-leading: 1.65;
    --zw-font-size-display: 1.5rem;
    --zw-font-size-display-leading: 1.2;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-size-custom {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.text-\[20px\] {
  font-size: 20px;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontSizes": {
        "caption": {
          "size": "0.875rem",
          "lineHeight": "1.45"
        },
        "copy": {
          "size": "1rem",
          "lineHeight": "1.65"
        },
        "display": {
          "size": "1.5rem",
          "lineHeight": "1.2"
        }
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-size-custom": true
    },
    "safelist": {
      "docs-preview": [
        "text-[20px]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-size-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

任意値と名前付きの値

設定済みの値には text-copy、1回だけの指定には text-[20px] を使います。名前付き font-size は text ルートを色トークンと共有するため、同じ設定内で名前が重複しないようにします。ペアの leading は font-size トークンの一部です。slash 構文を付けない任意サイズから行の高さは自動で作られません。文章に決まったリズムが必要な場合は行の高さも明示します。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

text

フィールド値
カタログ識別子v1.text.size
クラスパターンtext-<suffix>
文法{"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"font-size","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリfontSizes
負の値の規則forbidden
競合グループと順位font-size (17)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティfont-size, line-height

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

プロパティ値の種類固定値
font-sizeresolvednull
line-heightoptionalFontSizeLeadingnull

カタログの例

クラスの例期待される宣言
text-[1rem]font-size: 1rem

Revision History

作成更新