開発者ツール
Font Pairing Tool
Pick two Google Fonts and preview them together as heading + body to find the perfect typographic combination
Heading Font
36px
Body Font
16px
Playfair Display • 36px
The quick brown fox jumps
Source Sans 3 • 16px
Great typography creates hierarchy and readability. The right font pairing can make your design feel intentional, polished, and professional.
The bold weight of the body font and the italic variant both inherit the font family choice.
CSS
/* Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair%20Display:wght@400;600;700&family=Source%20Sans%203:wght@400;700&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: 700;
}
body, p {
font-family: 'Source Sans 3', sans-serif;
font-size: 16px;
line-height: 1.7;
}Popular Pairings
さらに探す
おすすめのその他の 開発者ツール…
JSONフォーマッター
構文ハイライトとエラー検出でJSONを整形、検証、圧縮
試す
Base64エンコーダー/デコーダー
テキストやファイルをBase64にエンコードし、Base64文字列を読めるテキストにデコード
試す
URLエンコーダー/デコーダー
URLコンポーネントとクエリ文字列パラメータをエンコード・デコード
試す
UUIDジェネレーター
ランダムUUID（v1、v4）を生成するか、複数のUUIDを一括生成
試す
ハッシュジェネレーター
テキストやファイルからMD5、SHA-1、SHA-256、SHA-512ハッシュを生成
試す
正規表現テスター
リアルタイムのマッチハイライトとグループ抽出で正規表現をテスト
試す
JWTデコーダー
JSON Web Tokenをデコードして検査 — ヘッダー、ペイロード、署名を確認
試す
HTMLフォーマッター
適切なインデントと構文ハイライトでHTMLコードを整形・美化
試す