ForHosting KIT · PDF・文書ツール

文字サイズと用途からCSS行間の推奨値を計算

16 pxの本文には行間1.5、つまり24 pxが推奨され、見出しは1.2、キャプションは1.4を使います。文字サイズと用途を入力すれば、そのまま使える初期値が分かります。ブラウザで無料で使えます。

  • 無料
  • ブラウザで動作
  • 登録不要
  • データは端末の外に出ません
ご利用方法 ウェブAPIメールTelegramアプリ 近日
入力した場合
文字サイズ
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からも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

POSThttps://api.kit.forhosting.com/doc/line-height-recommend

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"}'
{
  "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リクエストまでです。

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

max_mb25
max_pages200
HTTPコード意味
401unauthorizedAPIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
402insufficient_balance残高が不足しています。チャージ後に再度お試しください。
404unknown_type指定されたタスクタイプは存在しません。タイプ名を確認してください。
429rate_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 です。ブラウザー版は対話的な確認にご利用いただけます。

KITの完全なドキュメントを見る →