ForHosting KIT · 文章作成・要約AI

行送り計算

16 pxの本文を比率1.5で組むと、ベースラインから次のベースラインまで24 pxが必要です。文字サイズを超える余分な間隔とその半分も分かるので、モックアップやメールのテンプレート、印刷の仕様書にそのまま使えます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

文字サイズ: 16
比: 1.5

結果

行の高さ (px): 24
追加の行間 (px): 8
半行間 (px): 4
精度: 10

この行送り（leading）計算ツールは、CSSピクセルのフォントサイズと単位なしのline-height比から、ベースライン間の正確な間隔（ピクセル）—伝統的なタイポグラフィでリーディングと呼ばれる値—に加え、余白のリーディングとhalf-leadingをレイアウト計算用に求めます。デザイナーやフロントエンド開発者が日常的に使う場面は多く、十六ピクセルの本文に一・五の比なら二十四ピクセルの行送り、十八ピクセルの見出しに一・六の比なら二十八・八が必要です。恒等式は完全に決定的で、ピクセルの行送りはフォントサイズに比を掛けたもの、余白は行送りからフォントサイズを引いたもの、half-leadingはその余白の半分です。ネットワーク呼び出しもサンプリングも日付依存の近道もなく、二つの正のスカラーに対する有限算術だけです。タイポグラフィのスケール、デザイン・トークン表、CSS執筆中の素早い確認にはブラウザで無料でお使いください。

行送りの意味とこの計算ツールが返すもの

行送り（leading）はテキストの垂直リズム、つまり段落の行を積み上げるときに印刷所・レイアウトエンジン・CSSの行ボックスが使う、あるベースラインから次までの距離です。

語源は金属活字のあいだに挟んだ鉛の帯であり、デジタルデザインでは同じ概念をしばしばline-heightと書きますが、デザインブリーフや編集スタイルガイド、タイポの本は今も絶対単位の行送りを求めます。継承用にトークン層で単位なし比を保ち、継承できない固定モックアップ、Figma仕様、メールテンプレート、印刷PDFの書き出し時に絶対ピクセル値を具体化できます。

本計算は行送り（px）＝フォントサイズ×比を実装し、単位なしline-heightが使用中フォントサイズに掛けるのと同じです。さらに本文サイズを超える余白（行送り−フォントサイズ）と、その半分のhalf-leadingも報告し、多くのエンジンが行ボックス内でグリフ上下に分配する余白と対応します。

OpenTypeメトリクスの照会、remやemへの変換、フォントファイル解析はありません。ゼロや負の文字サイズでは有用な行ボックスを定義できないためです。

ピクセル行送りがデザインシステム・CSS・教育で果たす役割

プロダクトデザイナーは、モバイルのモックアップ引き渡し、メールクライアントが単位なし継承を無視する場面、印刷PDF書き出しが測定をピクセルやポイントに固定する場面で、モジュラーなタイポスケールを絶対行送りに変換します。

タイポグラフィとCSS基礎の教育では、十六ピクセルで単位なし比一・五が二十四ピクセルのベースライン間隔、余白八、half-leading四になることを、不透明なブラウザDevToolsの丸めに頼らず示せます。アクセシビリティレビューでは、元トークンがまだ比でも、長文読解に必要な最小の絶対行間を本文が満たすか素早く確認することがあります。

伝統的な意味で行送りを指定する編集・印刷チームも、比を同じように適用すればCSSのline-height積と同じ数値が得られます。pxをemやremにもしたい場合は単位変換と併用し、ピクセル値が本計算を離れたあとの実描画はフォントメトリクスとボックスモデルになお依存することに留意してください。

活用例

CSSとコンポーネントの文書化

本番スタイルシートの単位なし比と一致する正確な行送りpxで、Storybookやスタイルガイドの例を文書化します。

よくある質問

行送りはどう計算されますか？

例：16 px と比 1.5 なら行送り 24 px、余白 8 px、half-leading 4 px です。

フォントサイズがゼロまたは負の場合は？

非正のフォントサイズはこのモデルで有用な行送りを定義できません。

行送りはCSSのline-heightと同じですか？

本ツールはレイアウト用に余白とhalf-leadingも報告します。

なぜ結果は精度で丸められますか？

既定精度は小数点以下10桁で、precision は 0 から 15 に設定できます。

余分な間隔とハーフレディングとは何ですか？

余分な間隔は行送りからフォントサイズを引いた値で、16 px・比率1.5の例では8 pxです。ハーフレディングはその半分の4 pxで、多くのレイアウトでは文字の上と下に振り分けられます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/str/leading-from-ratio

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/str/leading-from-ratio \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_size":16,"ratio":1.5}'

const res = await fetch("https://api.kit.forhosting.com/str/leading-from-ratio", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_size": 16,
    "ratio": 1.5
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/leading-from-ratio",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_size": 16,
    "ratio": 1.5
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/leading-from-ratio", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"font_size":16,"ratio":1.5}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/leading-from-ratio", 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,
  "ratio": 1.5
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "str.leading_from_ratio",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

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

制限

max_abs_value 1000000000000000

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

CIやデザインシステム、教材デモで再現可能な行送りフィクスチャが必要な場合は、手計算の掛け算を再実装せず、成功したリクエストごとに $0.002 のAPIをご利用ください。

行送りの意味とこの計算ツールが返すもの

正のCSSピクセルのフォントサイズと正の単位なし比を与えると、正規化済みサイズ、比、leading_px、extra_leading_px、half_leading_px、メソッドタグ leading_from_ratio、丸め精度、短い式の文字列が返ります。それらは別問題です。欠落したサイズや比、非有限値、文書化された上限を超える大きさ、非正のサイズや比など無効入力は invalid_input を起こします。経路は決定的で、同じ入力は表計算・単体テスト・トークン生成器・間隔を捏造してはならないAPI利用者に対して常に同じ丸め結果を生みます。

フォントサイズと比の読み方と結果の再現性

数値文字列の任意の正符号や科学記法は有限小数として解釈できる場合に許可し、埋め込み空白・十六進接頭辞・非数値トークンは明確なメッセージで拒否し、悪いセルが誤った行送りにならないようにします。比も正でなければならず、乗数ゼロは行ボックスを潰し、負の比はこのモデルで有効な行送り積ではありません。推奨フィールド名はCSSピクセルのサイズを font_size、単位なし乗数を ratio としますが、サイズには fontSize・size・fs・px、比には line_height_ratio・lineHeight・multiplier・lh・leading_ratio などの別名を受け付け、スプレッドシートやクエリ文字列、型付きフォームが一つの契約を再利用できます。ゼロや負のフォントサイズは常に invalid_input で失敗し、非正の文字に対する行送り算術は未定義という製品ルールに合致します。同一の数学結果が自動パイプラインやデザイン・トークンビルドで必要なときは、このページの無料ブラウザ実行と有料APIを組み合わせ、掛け算を自分で再実装せずにお使いください。

ピクセル行送りがデザインシステム・CSS・教育で果たす役割

フロントエンド技術者は、トークンJSONからCSSカスタムプロパティを生成するとき、Storybookでタイポランプを文書化するとき、十六ピクセル本文と一・五の比で二十四の行送りを期待するスナップショットテストを書くときに同じ算術を使います。このページでは処理はすべてブラウザ内で行われ、APIでは成功した照会ごとに $0.002 がかかり、検証失敗は課金されず、応答後に何も保存しません。無料の対話的探索と有料で同一のAPIという分担はKITのティアAカタログの他項目と一致し、デザイン批評から自動トークンパイプラインへ、数学結果を変えずに移行できます。

連携の活用例

デザイン・トークンのタイポランプ

各段のフォントサイズと共通の比から、Figma引き渡し・メールCSS・トークンJSON書き出し向けに絶対行送り（px）と余白・half-leadingを具体化します。

決定的なCIフィクスチャ

手書きの掛け算なしで、単体テスト・スナップショット・デザインシステム用ビルドスクリプト向けに再現可能な leading_px を生成します。

技術的な質問

行送り計算ツールの料金は？

このページではブラウザで無料です。APIでは成功したリクエストが $0.002 で、無効な入力は課金されません。

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

行送り計算

無料で実行

計算例

行送りの意味とこの計算ツールが返すもの

ピクセル行送りがデザインシステム・CSS・教育で果たす役割

活用例

CSSとコンポーネントの文書化

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

行送りの意味とこの計算ツールが返すもの

フォントサイズと比の読み方と結果の再現性

ピクセル行送りがデザインシステム・CSS・教育で果たす役割

連携の活用例

デザイン・トークンのタイポランプ

決定的なCIフィクスチャ

技術的な質問

ありがとう