文字サイズと用途からCSS行間の推奨値を計算
16 pxの本文には行間1.5、つまり24 pxが推奨され、見出しは1.2、キャプションは1.4を使います。文字サイズと用途を入力すれば、そのまま使える初期値が分かります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 文字サイズ
- 16
- コンテンツの種類
- Body text
- フォントサイズ (px)
- 16
- 推奨比率
- 1.5
- 行の高さ (px)
- 24
- Css
- line-height: 24px;
このツールは、文字サイズと組版上の用途から、CSSの行間を決めるための実用的な初期値を算出します。本文、見出し、キャプションのいずれかを選ぶと、一般的な比率を適用し、単位なしの値とピクセル換算値の両方を返します。文字サイズは決まっていても、縦方向のリズムを表すトークンが未整備なデザインに便利です。結果は常に再現でき、CSSへ簡単に転記できます。ただし、あらゆるフォントに共通する唯一の正解ではなく、検討の出発点としてお使いください。
間隔より先に文章の用途を選びます
行間は、画面全体で同じ倍率を繰り返すのではなく、文章がどのように読まれるかに合わせて決める必要があります。本文は複数行にわたることが多く、ある行の末尾から次の行頭へ視線を移しやすくするため、このツールでは1.5を推奨します。見出しは通常、大きく短く、1行か2行に収まるため、1.2という狭めの比率でまとまりを保ちます。
キャプションは小さい一方で短いことが多く、1.4なら周囲の要素より目立ちすぎず、必要な余白を確保できます。
返される比率とピクセル値を理解します
推奨値は、正のCSSピクセルによる文字サイズに、選択した用途の固定比率を掛けて算出します。16ピクセルの本文では1.5を使って24ピクセルになり、32ピクセルの見出しでは1.2を使って38.4ピクセルになります。実運用のCSSでは、子要素の文字サイズが変わっても比例して継承されるため、単位なしの比率が適する場合が多いです。
ピクセル値は、固定仕様、デザインの引き渡し、表示確認、メール、明示的な長さを必要とするトークンで役立ちます。小数サイズを維持しつつ浮動小数点のノイズを避けるため、結果は小数第4位までに丸めます。未入力、0、負数、無限大、数値以外はエラーになります。
フォントごとに字面や内部余白が異なるので、最終決定前に実際の表示をご確認ください。
実際のレイアウトで推奨値を検証します
値を算出したら、理想的な短文だけでなく、実際に近い内容を最終レイアウトへ配置して検証してください。本文では、複数の段落、長いリンク、強調、数字、狭いモバイル幅を含めます。行を移る際に読み位置を見失わず、段落全体が一まとまりに感じられるかを確認します。
見出しでは、各ブレークポイントで想定される最長のタイトルを試してください。1.2は力強い見出しを作りやすい比率ですが、背の高いアクセントを持つ書体や3行に折り返す題名では、余白を増やす必要があります。キャプションでは、情報量の多いカード、画像クレジット、表の注記、翻訳後の長い文を確認します。
ズーム表示や代替フォントもお試しください。必要な例外は散在するCSSではなく、意図の明確なデザイントークンとして管理します。この機能はフォントメトリクス、行長、言語、ウェイト、描画環境を測定しないため、目視確認やアクセシビリティ検証の代わりにはなりません。
説明可能で再現性のある初期値を提供するものです。
活用例
文字組みスケールの作成を始める
選定済みの文字サイズから、本文、見出し、キャプション用の初期行間トークンを作成し、表示を調整できます。
デザイン資料を生成する
コンポーネントライブラリや引き渡し資料向けに、比率、ピクセル値、CSS宣言を一貫して出力できます。
文章用途の対応を検証する
自動処理で未登録の用途を既定値へ置き換えず、入力エラーとして確実に検出できます。
よくある質問
どの比率が推奨されますか?
本文には1.5、見出しには1.2、キャプションには1.4を使用します。
CSSでは比率とピクセル値のどちらを使うべきですか?
継承には単位なしの比率が適し、固定仕様やデザインの引き渡しにはピクセル値が便利です。
この結果だけでアクセシビリティを保証できますか?
いいえ。 実際のフォント、行幅、配置、ズーム、文章内容を使って追加検証を行ってください。
16 pxの本文にはどの行間が適していますか?
行間1.5、つまり24 pxです。本文は複数行にわたるため、この余白があると行末から次の行頭へ視線を移しやすくなります。
見出しの行間が段落より狭いのはなぜですか?
見出しは大きく短く、1〜2行で収まることが多いためです。比率1.2なら折り返した見出しもまとまって見え、32 pxの見出しは38.4 pxになります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/doc/line-height-recommend \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"content_type":"body_text"}'const res = await fetch("https://api.kit.forhosting.com/doc/line-height-recommend", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"content_type": "body_text"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/line-height-recommend",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"content_type": "body_text"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/line-height-recommend", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"content_type":"body_text"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"content_type":"body_text"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/line-height-recommend", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"font_size": 16,
"content_type": "body_text"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.line_height_recommend",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
ブラウザーで試すほか、1回 $0.002 のAPIとして自動処理にも組み込めます。
間隔より先に文章の用途を選びます
段落、記事、説明文にはbody_text、タイトルや節見出しにはheading、画像注記、クレジット、短い補足にはcaptionを選んでください。body textという入力はbody_textへ正規化されますが、それ以外の未登録の用途は既定値で処理せず、明示的にエラーにします。そのため、トークン生成工程の入力ミスを発生源で修正できます。これらは一般的な組版慣行に基づく初期値ですので、実際のフォントとレイアウトを確認した後で調整してください。
返される比率とピクセル値を理解します
応答には、正規化した文字サイズ、用途、推奨比率、line_height_px、コピー可能なCSS宣言が含まれます。ネットワーク、モデル、乱数、時刻には依存しないため、同じ入力から常に同じJSONを得られます。この値はグリフの見た目の高さではなく行ボックスを表します。
実際のレイアウトで推奨値を検証します
ブラウザーでは対話的に使え、APIは1回 $0.002 で、どちらも同じ決定的な処理を使用します。
技術的な質問
どの用途を指定できますか?
body_text(またはbody text)、heading、captionを指定できます。それ以外はinvalid_inputになります。
APIリクエストの料金はいくらですか?
APIは1回 $0.002 です。ブラウザー版は対話的な確認にご利用いただけます。