行送り計算機
16 pxの本文に比率1.5を使うと、行の高さは24 pxになります。文字サイズと比率を入れれば、固定レイアウトやデザイン仕様書、メールのひな形に書き込むピクセル値が分かります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 文字サイズ
- 16
- 単位なしの行送り比率
- 1.5
- 行送り(px)
- 24
- 精度
- 10
この行送り計算機は、CSSピクセルでのフォントサイズと単位なしの行送り比率から、line-heightに設定するピクセル値そのものを求めます。単位なしの倍率よりも絶対ピクセルのスタックを好む場面向けです。デザイナーやフロントエンド開発者は今でもこの計算を頻繁に使います:16pxの本文に1.5の比率なら24pxの行送りが必要になり、18pxの見出しに1.6の比率なら28.8pxが必要になります。この関係は完全に決定的です:行送りのピクセル値はフォントサイズ×比率です。通信もサンプリングも日付依存の近道もなく、2つの正のスカラー値に対する有限の算術のみで成り立っています。CSSを書きながらのタイプスケールやデザイントークン表、簡易チェックにはブラウザで無料でお使いいただけます。
行送りとは何か、この計算機が返す内容
行送りとはテキストの垂直方向のリズム、つまりブラウザやレイアウトエンジンが段落の行を積み重ねる際に使うベースラインからベースラインまでの距離です。CSSではline-heightを1.5のような単位なしの比率、パーセンテージ、あるいはピクセルの絶対長として書けます。
多くのデザインシステムは継承のためにトークン層では単位なしの比率を保持し、Figma仕様や継承できないメールテンプレートなど固定モックアップを書き出す際に絶対ピクセル値へ具体化します。
この計算機は単純な積である「行送りのピクセル値 = フォントサイズ × 比率」を実装しており、これは単位なしのline-heightが実際に使われるフォントサイズに掛け合わせる値そのものです。金属活字時代の行間の再現やOpenTypeメトリクスの参照、remとemの変換は扱いません。0や負のフォントサイズは有用な行ボックスを定義できないためです。
比率も同様に正でなければ、結果は正のピクセル長になりません。
ピクセル単位の行送りがデザインシステム・CSS・教育で果たす役割
プロダクトデザイナーは、モバイルモックアップを引き渡すとき、メールクライアントが単位なしの継承を無視するとき、あるいは印刷用PDF書き出しがすべての寸法をピクセルやポイントで固定するときに、モジュラーなタイプスケールを絶対的な行送りへ変換します。
CSSの基礎を教える教育者は、不透明なブラウザDevToolsの丸めに頼らずとも、16pxで1.5の単位なし比率が24pxになることを示せます。アクセシビリティのレビュー担当者は、ソースのトークンがまだ比率であっても、長文を読むための最小限の絶対行送りを本文が満たしているかを素早く確認したい場合があります。
pxからemへの変換も必要な場合はタイポグラフィの単位変換ツールと組み合わせ、ピクセル値がこの計算機を離れた後は実際のレンダリングがフォントメトリクス、ハーフリーディング、ボックスモデルに依存し続けることを念頭に置いてください。
活用例
CSSとコンポーネントのドキュメント
本番のスタイルシートで使われている単位なしの比率と一致する正確なline-height px値で、Storybookやスタイルガイドの例を記録します。
よくある質問
フォントサイズが0または負の場合はどうなりますか?
正でないフォントサイズは、このモデルでは有用な行送りを定義できません。
remやemの単位を変換しますか?
いいえ。 フォントサイズはCSSピクセルとして解釈され、比率は単位なしです。remやemが必要な場合は専用の単位変換ツールをお使いください。
結果はなぜ精度で丸められるのですか?
既定の精度は小数点以下10桁で、0から15の範囲で設定できます。
16 pxの本文にはどの行の高さが合いますか？
比率1.5なら24 pxです。文字サイズに比率を掛けると、固定レイアウトやデザイン案、メールのひな形に使うピクセル値が得られます。
なぜ比率をピクセルの値に直すのですか？
固定のデザイン案やメールのひな形では、比率をそのまま引き継げないことがあるためです。その場合はピクセルの値をそのまま書き込みます。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/hobby/line-height \
-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/hobby/line-height", {
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/hobby/line-height",
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/hobby/line-height", 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/hobby/line-height", 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": "hobby.line_height",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_abs_value | 1000000000000000 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
CIやデザインシステム、教育デモで再現性のある行送りのフィクスチャが必要な場合は、乗算を自前で再実装せずに、成功したリクエストごとに$0.002のAPIをご利用ください。
行送りとは何か、この計算機が返す内容
正のCSSピクセルのフォントサイズと正の単位なしの比率を渡すと、エンジンは正規化されたフォントサイズ、比率、算出された行送りのピクセル値、methodタグのline_height、丸めに使ったprecision、短いformulaの説明文字列を返します。それらは別の問題です。 フォントサイズや比率の欠落、有限でない値、規定の上限を超える大きさ、そして正でないフォントサイズはすべてinvalid_inputになります。この経路は決定的であるため、同じ入力は常に同じ丸め値を返し、ワークシート、単体テスト、デザイントークンジェネレーター、そして間隔を勝手に作ってはならないAPI利用者に適しています。
フォントサイズと比率の読み取り方と再現性の保ち方
数値文字列の先頭のプラス記号や指数表記は、有限の10進数として解釈できる限り許可されますが、埋め込まれた空白、16進数のプレフィックス、数値でないトークンは明確なメッセージとともに拒否され、不正なセルが誤った行送りにすり替わることを防ぎます。比率も正でなければならず、0の倍率は行ボックスを潰してしまい、負の比率はこのモデルでは有効なCSSのline-heightの積になりません。優先されるフィールド名はCSSピクセルでのサイズを表すfont_sizeと、単位なしの倍率を表すratioですが、サイズにはfontSize、size、fs、pxのエイリアス、比率にはline_height_ratio、lineHeight、multiplier、lhのエイリアスも受け付けるため、スプレッドシートやクエリ文字列、型付きフォームでも1つの契約を再利用できます。0や負のフォントサイズは常にinvalid_inputで失敗し、正でないタイプに対して行送りの算術は未定義であるという製品ルールと一致しています。任意のprecisionフィールド(エイリアスdecimals、dp)は全数値出力で公開する小数桁数を選び、既定は10、上限は15でランタイムをまたいでJSONのgoldensを安定させます。自動パイプラインやデザイントークンのビルドで同一の数学的結果が必要な場合は、このページの無料ブラウザ実行と有料APIを組み合わせ、乗算を自前で再実装せずに済ませてください。
ピクセル単位の行送りがデザインシステム・CSS・教育で果たす役割
フロントエンドエンジニアは、トークンJSONファイルからCSSカスタムプロパティを生成するとき、StorybookでタイプランプをドキュメントするとしてChar、16pxの本文サイズに対してline-heightが24を期待するスナップショットテストを書くときに同じ算術を使います。このページでは処理はすべてブラウザ内で完結し、API経由では成功した照会1件ごとに$0.002かかり、検証に失敗した場合は課金されず、レスポンスを返した後は何も保存されません。無料のインタラクティブな検証と、同一の結果を返す有料APIというこの分離はKITのtier Aカタログ全体の方針と一致しており、デザインレビューから自動トークンパイプラインへ、数学的な結果を変えることなく移行できます。
連携の活用例
デザイントークンのタイプランプ
各ステップのフォントサイズと共通の比率から、Figmaへの引き渡しやメールCSS、トークンJSON書き出し用の絶対行送りピクセル値を具体化します。
決定的なCIフィクスチャ
手書きの乗算なしで、単体テスト、スナップショットテスト、デザインシステムのビルドスクリプト向けに再現性のあるline_height_px結果を生成します。
技術的な質問
行送り計算機の料金は?
このページのブラウザ上では無料です。API経由では成功したリクエストごとに$0.002かかり、無効な入力には課金されません。
行送りはどう計算されますか?
line_height_px = font_size × ratio です。たとえば16pxに比率1.5をかけると24pxになります。