Line Height Calculator
Calculate optimal line-height for readable text.
Based on font size, content width, and reading context.
Live Preview
The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.
Recommended Line Height
line-height: 1.6;Line Height Comparison
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
The quick brown fox jumps over the lazy dog. This sample text helps visualize spacing.
Line Height Best Practices
Use Unitless Values
Unitless line-height (like 1.5) scales proportionally with font size. This is more maintainable than fixed px values and prevents inheritance issues.
The 45-75 Character Rule
For optimal readability, aim for 45-75 characters per line. Longer lines need more line-height (1.6-1.8), shorter lines can use less (1.4-1.5).
Context Matters
Body text needs more breathing room (1.5-1.6). Headings can be tighter (1.1-1.3) since they are shorter. UI elements work well with 1.2-1.4.
Common Line Height Guidelines
| Content Type | Recommended Range | Notes |
|---|---|---|
| Body text (paragraphs) | 1.5 - 1.7 | Higher for narrow columns, lower for wide |
| Headings (H1-H3) | 1.1 - 1.3 | Tighter for larger display text |
| Subheadings (H4-H6) | 1.2 - 1.4 | Slightly looser than main headings |
| UI text (buttons, labels) | 1.2 - 1.4 | Compact but readable |
| Captions / Small text | 1.4 - 1.6 | More space helps small text |
| Code / Monospace | 1.4 - 1.6 | Enough room for character details |
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes