使い方

1. 18 種類のシステムフォントと一般的な Web フォント名から、見出しフォントと本文フォントを 1 つずつ選びます。
2. 基準サイズ（10〜32 px）を設定します。本文のサンプルがこのサイズで表示されます。
3. タイプスケールを選びます：1.125・1.2・1.25・1.333・1.414・1.5・1.618。
4. 本文の行の高さを選びます：1.3・1.5・1.6・1.8。
5. おすすめの組み合わせボタンで、Playfair Display + Lato のような定番のペアを読み込めます。
6. プレビューを確認し、出力カードから CSS 変数と規則をコピーします。

こんなときに

• サイトの排版体系: コンポーネントの CSS を書く前に、見出し書体・本文書体・スケールを決める。
• ランディングページの改修: スタイルシートを触らずに、セリフ系 display とニュートラルなサンセリフを比べる。
• ドキュメント・ブログのテーマ: 各テンプレートの h1・h2・本文のサイズをそろえる。
• 排版の授業: スケールの係数を 1 つ変えるとすべての見出しがどう動くかを実演する。
• 手早いデザインレビュー: 数秒でペアを入れ替え、読みやすいサイズはそのまま残す。

プライバシーについて

フォント名とサイズはこのページ内で CSS 文字列に組み立てられます。データの送信はなく、フォントファイルの取得もなく、オフラインでも動作します。

FAQ

Q: プレビューのフォントは Google Fonts から読み込まれますか？ A: いいえ。ツールが作るのはフォントスタックのみなので、プレビューにはこの端末にインストールされたフォントが使われます。Inter や Montserrat などの名前は、自分のサイトでフォントファイルを読み込むまでローカルの代替フォントで表示されます。コピーした CSS も、フォントファイルの提供は利用者側を前提としています。

Q: フォントスタックの中身は？ A: 選んだフォント、同系の代替フォント、CSS の一般キーワード（serif・sans-serif・monospace）の順に並びます。フォントがなくても文字は読めます。

Q: 見出しのサイズはどう計算されますか？ A: h2 は基準サイズにスケールを 1 回、h1 は 3 回掛けた値で、整数ピクセルに四捨五入されます。スケールを変えるとすべての見出しが一緒に動きます。

Q: どのペアから始めればよいですか？ A: 推薦ボタンには定番の組み合わせが入っています。セリフ系の display にニュートラルなサンセリフの本文、または幾何学的サンセリフにヒューマニストサンセリフ。役割で対比し、雰囲気で一致させるのが基本です。見出しがうるさく感じたら、まずスケールを下げてください。