Tiny Online Tools
行間をただの初期値ではなく、読みやすさの調整手段として使う
適切な行間は慣習だけでは決まりません。文字サイズ、行の幅、情報量によって読み心地は大きく変わるため、このツールでは複数の値を文脈の中で比べやすくしています。
効果が出やすい場面
本文、記事、設定画面、長めの説明文が続く UI で特に役立ちます。値を決めたら、実際の文章量や画面幅でも確認して、サンプル外でもリズムが保てるかを見ておくと安心です。
行間計算ツール
読みやすいタイポグラフィのための最適な行間を計算します。
1.5
計算された最適値
1.625
黄金比 (1.618)
line-height: 1Too Tight
line-height: 1.2Compact
line-height: 1.4Optimal
line-height: 1.6Optimal
line-height: 1.8Optimal
line-height: 2Relaxed
The quick brown fox jumps over the lazy dog. Typography is the craft of giving language a durable visual form.
font-size: 16px;
line-height: 1.6;
関連ツール
テキストシャドウジェネレーター
ライブプレビュー付きで CSS text-shadow を作成します。
文字間隔ツール
CSS の letter-spacing を調整し、読みやすさと一緒に確認できます。
Border Radius ジェネレーター
コーナーの丸みを視覚的にコントロールしてCSSをコピーします。
Box Shadow ジェネレーター
CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。
IP アドレス検証
IPv4、IPv6、CIDR 表記を検証し、アドレス種別やサブネット情報を確認できます。
SVG バーストジェネレーター
SVG スターバースト、サンバースト、スパークル形状を、光線数、半径、鋭さ、回転、色を調整して生成。バッジ、セールバナー、装飾アクセントに最適。
SVGをCSS背景に変換
SVGコードをCSS background-image用データURLに変換します。
もっと見る
無料オンラインツールの全コレクションを見る。