CSS Line Height Calculator

Online CSS line-height calculator with font-size, ratio, and baseline grid sync, live text preview, common size table, and one-click CSS code copy.

Ready. Update inputs to recalculate in real time.

Calculator Settings

Font Size (px)

Line-height Ratio

Baseline Grid (px)

Results

Line height: 24px

Grid alignment: 3行

Actual ratio: 1.50

Preview

Text Preview

This paragraph shows how line height changes readability. A proper value improves scan speed and makes long-form reading easier.

The second paragraph continues the rhythm check. When line height, font size, and spacing follow a system, pages feel cleaner and more structured.

Grid Alignment (8px per row)

Try to keep text on a consistent vertical baseline so headings, body text, and lists maintain stable rhythm across long pages.

line-height: 24px;

Common Font Size & Line-height Table

Font size	Compact (1.2)	Standard (1.4)	Comfortable (1.5)	Loose (1.6)

Documentation

About CSS Line-height Calculator

This tool calculates line-height from font size and target ratio, with baseline-grid alignment hints and live readability preview.

Key Features

Line-height Calculation: Convert ratio-based input to pixel values.
Baseline Grid Fit: Evaluate alignment with selected grid size.
Ratio Presets: Quick options like 1.4/1.5/1.6.
Text Preview: Real-time paragraph readability checks.
Reference Table: Suggested line-height ranges for common font sizes.

Steps

Set font size.
Choose target line-height ratio.
Set baseline grid value and review outputs.
Validate in preview and copy CSS.

Use Cases

Standardizing heading/body vertical rhythm.
Defining typography tokens in design systems.
Improving readability across responsive pages.

FAQ

Is higher line-height always better?

Not always. Too large spacing can reduce text density and visual cohesion.

Why do recommendations differ from my mock?

Different font families have different metrics (x-height/glyph proportions); tune values for your actual font.