ペアリングセットを生成
フィルタやプレビューテキストを変更して、新しいギャラリーを描画します。入力値が空の場合や範囲外の場合は、自動的に補正されます。
前提: ローカルシステムフォントの利用可能性はデバイスによって異なります。
フォールバックの順序はすべてのCSSブロックで保持されます。
本番環境への導入前に、実機での検証を推奨します。
仕組み
この生成ツールは、実用的なフォントスタックペアリングの厳選されたローカルデータセットを使用しています。意図に応じたフィルタリングを行い、プレビュー設定を適用し、CSS変数を生成します。
1
コンテキストを選択
ユースケース、ムード、コントラストで絞り込みます。一致するものがない場合は、全データセットを表示します。
2
リズムを調整
見出しサイズ、本文サイズ、行の高さは安全な範囲に制限されています。これにより可読性を保ち、無効なCSSが生成されるのを防ぎます。
3
比較してコピー
各結果にはスタック名、font-family宣言、コピーボタンが含まれます。CSSは変数形式なので、デザイントークンファイルに簡単に導入できます。
4
実機で確認
システムスタックは信頼できますが、レンダリングはOSやブラウザによって異なります。このギャラリーはあくまでショートリストとして活用してください。