字間スケール

このツールでできること

• 字間スケールでは、tighter から widest まで 6 段階の letter-spacing トークンと em 値を一覧で確認できます。
• 関連する観点として 字間スケール、letter spacing scale、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列から tighter から widest までの段階名を選びます。
2. Content 列で各段階の em 値を確認します。
3. 文字を詰めるトークンは tighter または tight、広げるトークンは wide 以上を使います。
4. デザインシステムへ登録する場合は、表の段階名と値を CSS カスタムプロパティへ写します。

入力例・出力例

よくある利用シーン

• Tailwind 風の tracking トークンを CSS 変数へ落とし込むとき。
• 見出し、ボタン、キャプションで共有する字間段階を決めるとき。
• 単発 px 生成ではなく、フォントサイズに比例する em スケールを選びたいとき。
• 既存 UI の letter-spacing 値を tighter / wide などの名前に整理するとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• 字間スケール、letter spacing scale、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• 字間スケールの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール