スタイルに合う見出しと本文のフォント組み合わせ提案
書体が担う視覚的な役割を分けて考えると、フォント選びは容易になります。見出しの書体がserif、sans-serif、slab、displayのどれに当たるかを指定し、表現したい雰囲気をお選びください。本文向けの一般的なフォント、その分類、2つの代替案、対比が有効な理由を返します。これは実際のデザインシステムを検討するための根拠ある出発点であり、具体的なウェイト、サイズ、文章を試さずに相性を保証するものではありません。
無料で実行
見出しの視覚的な役割から始めます
見出しのフォントは個性、階層、リズムを形づくります。一方、本文のフォントには、文、段落、キャプション、画面上のラベルを無理なく読めることが求められます。まず、見出しの主な造形をserif、sans-serif、slab、displayのいずれかに分類してください。serifには文字端の飾りがあり、文学的または歴史的な印象を与えることがあります。sans-serifはその飾りを持たず、率直、中立的、現代的に見せられます。slabは太く角張ったセリフによって、力強さと安定感を生みます。displayは最も広い区分で、装飾的、強いコントラスト、細長い、個性的など、大きなサイズでの使用を主目的とする書体を含みます。分類だけですべての特徴を表すことはできませんが、最初の条件として有効です。その後、見出しと明確に対比するか、制御された共通性を持つ本文書体を選びます。2つの区分にまたがる場合は、閲覧者が最初に気づく特徴を優先し、隣の区分の結果とも比較してください。
雰囲気に合わせて対比の種類を決めます
対比とは、serifとsans-serifを必ず組み合わせるという単純な規則ではありません。構造、比率、線の強弱、文字幅、ウェイト、個性の違いからも生まれます。選択した雰囲気によって、どの違いを目立たせるかが決まります。上品な方向では抑制の効いた見出しに洗練された本文用serifを合わせ、ミニマルな方向では静かで中立的な本文の質感を採ることが一般的です。遊び心には丸みや生き生きした細部が合い、技術的な表現には判別しやすい字形と精密な比率が役立ちます。アルゴリズムは固定した指針表を使うため、同じ入力には必ず同じ候補が返ります。この再現性は、判断の記録や提案工程の自動化に便利です。最初の候補を選択した条件に最も明確に合う案、代替候補を近い方向性としてご覧ください。人気順ではありません。また、フォントファイルの取得、検査、ライセンス確認、計測は行いません。
実際のレイアウトで組み合わせを検証します
提案された組み合わせは、実際のフォントと文章で試して初めて実用的な選択になります。複数段階の見出し、長い段落、短いラベル、数字、句読点、リンク、強調部分を組んでください。見出しの個性を保ちながら、本文が弱く見えたり無関係に感じられたりしないかを確認します。本文はregularまたはmediumのウェイトから始め、ファミリーを候補から外す前に、文字サイズ、行間、行長を調整してください。余白の設定はフォント選びと同じほど重要な場合があります。必要な言語や文字体系に対応するboldとitalicが揃っているか、プロジェクトのライセンス条件を満たすかも確認します。小さな画面、低コントラストの表示、ブラウザーの代替フォントでもお試しください。両方が目立ちすぎる場合は本文を簡素にします。偶然似て見える場合は、大きさ、ウェイト、構造上の対比によって階層を強めます。返される理由は、検証すべき関係を具体的な仮説として示します。
活用例
ブランドの方向性を定める
初期の雰囲気を、ムードボードで使える具体的な見出しと本文の書体方針に変換します。
Webレイアウトの検討を進める
個性的な見出し書体が決まっているときに、読みやすい本文の相手を見つけます。
デザインシステムに記録する
ウェイト、間隔、レスポンシブなサイズを試す前に、再現可能な候補と理由を残します。
よくある質問
見出しのフォントファイルを解析しますか?
いいえ。指定された分類と雰囲気だけを使用し、フォントファイルの受信や解析は行いません。
提案には再現性がありますか?
はい。正規化後の分類と雰囲気が同じであれば、推奨案と代替案は常に同じです。
同じ分類のフォント同士でも組み合わせられますか?
はい。分類を変えなくても、ウェイト、サイズ、幅、質感によって階層を作れます。
必要な言語への対応は保証されますか?
いいえ。必要な言語、文字体系、ウェイト、スタイルが実ファイルに含まれるかをご確認ください。
不明な分類を指定するとどうなりますか?
無効な入力としてエラーになります。見出しにはserif、sans-serif、slab、displayを指定できます。
APIリクエストの料金はいくらですか?
APIリクエスト1回につき$0.002です。ブラウザー版では同じ決定的な処理をローカルで実行できます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/doc/font-pairing-suggest \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"classification":"serif","mood":"elegant"}'const res = await fetch("https://api.kit.forhosting.com/doc/font-pairing-suggest", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"classification": "serif",
"mood": "elegant"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/font-pairing-suggest",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"classification": "serif",
"mood": "elegant"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/font-pairing-suggest", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"classification":"serif","mood":"elegant"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"classification":"serif","mood":"elegant"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/font-pairing-suggest", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"classification": "serif",
"mood": "elegant"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.font_pairing_suggest",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 25 |
max_pages | 200 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |