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.
Calculator Settings
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) |
|---|
Guide
CSS Line Height Calculator helps you compute readable line-height values, align them to a baseline grid, and keep consistent vertical rhythm for web pages and components.
What Is Line Height
Line height is the CSS property that controls spacing between lines of text. It directly impacts readability, visual hierarchy, and overall page rhythm.
Core Features
- Linked calculation for font size, line-height ratio, and baseline grid, with automatic grid snapping.
- Quick presets (1.2, 1.4, 1.5, 1.6) to compare reading density fast.
- Live text and grid preview to inspect rhythm and alignment instantly.
- Common font-size reference table and one-click CSS line-height copy.
How To Use
- Enter font size, ratio, and baseline grid to get a recommended line height.
- Use preset ratio buttons to compare compact and comfortable layouts.
- Review text and grid previews to verify rhythm for your page structure.
- Copy the generated line-height CSS and apply it to your stylesheet.
FAQ
What ratio is good for body text?
Most interfaces can start at 1.5, then tune to 1.4 or 1.6 depending on font weight, family, and layout density.
Why align to a baseline grid?
Baseline alignment keeps paragraphs, headings, and component spacing consistent, especially on long pages and multilingual layouts.
Should line height use px or unitless values?
Unitless values are common in scalable systems, while px values are practical when strict baseline alignment and visual QA are required.
Privacy
This tool does not upload your inputs or results. All calculations, previews, and CSS generation run locally in your browser.