px
推奨
24.0px
1.5× — 本文向け
黄金比
25.9px
φ (1.618) — 調和の取れた比率
一般的な比率
タイト1.2×
見出し、大きな文字
19.2px
ややタイト1.375×
小見出し
22.0px
標準1.5×
本文(推奨)
24.0px
ゆったり1.625×
長文の閲覧
26.0px
広め2×
大きな文章、アクセシビリティ
32.0px
プレビュー
1.2× line-height
いろはにほへと、ちりぬるを。複数の文字サイズで行間を確認します。
1.5× line-height
いろはにほへと、ちりぬるを。複数の文字サイズで行間を確認します。
2× line-height
いろはにほへと、ちりぬるを。複数の文字サイズで行間を確認します。
行間(line-height)計算とは何ですか?
フォントサイズから代表的な CSS line-height を計算し、複数比率のライブプレビューを比較します。 px 単位のフォントサイズ。 1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
ツールを開く
このツールでできること
- 入力: px 単位のフォントサイズ。
- 設定と処理: フォントサイズを変え、見出し・小見出し・本文・長文・ゆったりした行間・黄金比の出発点を比較します。
- 出力: 1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
使い方
- 入力を追加する。 px 単位のフォントサイズ。
- 設定を確認する。 フォントサイズを変え、見出し・小見出し・本文・長文・ゆったりした行間・黄金比の出発点を比較します。
- 生成・確認・書き出しを行う。 1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
主な機能
- 入力: px 単位のフォントサイズ。
- 設定と処理: フォントサイズを変え、見出し・小見出し・本文・長文・ゆったりした行間・黄金比の出発点を比較します。
- 出力: 1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
活用シーン
- フォントサイズから代表的な CSS line-height を計算し、複数比率のライブプレビューを比較します。
- 次の出力・診断結果が必要な場面で使います:1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
- 次の確認済み工程の前に配置します:実フォント・本文幅・対象言語で行間を確認。
制限と安全上の注意
- 各比率は出発点であり普遍的な「最適値」ではありません。 WCAG 1.4.12 は、利用者が行間を少なくとも1.5倍にしても内容や機能が失われないことを求めるもので、既定値1.5を義務付けません。
トラブルシューティング
- 数値だけを入力し、小数点記号、変換元・変換先単位、base/root size、DPI、許容範囲を確認してください。
- 既知の基準値を1つ再計算し、前提と丸め方を確認してから一括変換や CSS・印刷への適用を行ってください。
- 各比率は出発点であり普遍的な「最適値」ではありません。 WCAG 1.4.12 は、利用者が行間を少なくとも1.5倍にしても内容や機能が失われないことを求めるもので、既定値1.5を義務付けません。
よくある質問
行間(line-height)計算とは何ですか?
フォントサイズから代表的な CSS line-height を計算し、複数比率のライブプレビューを比較します。
行間(line-height)計算はどう使いますか?
想定された入力を追加し、ページ設定を確認してから、コピーまたはダウンロード前に結果を検証します。 想定出力:1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
どの入力に対応していますか?
px 単位のフォントサイズ。
どのような出力を生成しますか?
1.2/1.375/1.5/1.625/2、および 1.618 の黄金比に対応する px とライブプレビュー。
どのような制限がありますか?
各比率は出発点であり普遍的な「最適値」ではありません。 WCAG 1.4.12 は、利用者が行間を少なくとも1.5倍にしても内容や機能が失われないことを求めるもので、既定値1.5を義務付けません。
関連する AppKiro ツール
確認済みのサンプルから始める
小さく機密性のないサンプルで主要設定と出力を確認してから、実際のワークフローへ適用してください。
ツールを開く