Line Height Calculator
Font size / line height / spacing calculator
Font Size
Scale Ratio
Base Line Height
✓ Results
Recommended Line Height
1.50
Line Height (px)
24.0px
Paragraph Spacing
19.2px
Heading Spacing
14.4px
📐 Scale Preview
Sample typography preview
Sample typography preview
Sample typography preview
Sample typography preview
Sample typography preview
Sample typography preview
👁️ Live Preview
Sample Heading Text
This is a sample body text paragraph. Line-height is one of the most important typography properties — proper line height significantly improves readability. Body text line height is typically recommended at 1.4x to 1.6x of font size.
This second paragraph demonstrates paragraph spacing. Good spacing helps readers distinguish content sections and improves readability.
📋 CSS Variables
:root {
/* Typography Scale (1.25) */
--font-size-base: 16px;
--font-size-sm: 12.8px;
--font-size-base: 16.0px;
--font-size-h4: 20.0px;
--font-size-h3: 25.0px;
--font-size-h2: 31.3px;
--font-size-h1: 39.1px;
--font-size-display: 48.8px;
--line-height-base: 1.50;
--paragraph-spacing: 19.2px;
--heading-spacing: 14.4px;
}Usage Guide
Scale Ratios
- Minor Second (1.067) — Tight micro adjustment
- Major Second (1.125) — Compact
- Minor Third (1.2) — Great for mobile
- Major Third (1.25) — General purpose
- Perfect Fourth (1.333) — Classic
- Augmented Fourth (1.414) — Golden section
- Perfect Fifth (1.5) — Large scale
- Golden Ratio (1.618) — Golden ratio
Usage Tips
- Body text: 1.4x ~ 1.6x line height
- Headings: 1.1x ~ 1.3x line height
- Paragraph spacing ~= line height value
- rem units are better for responsive design