Generator Tools
CSS Line-Height Generator
Pick a CSS line-height with a live paragraph preview, unitless or em or px or percent output, body and heading presets, measure check, and Tailwind config.
Configure line height
Ratio, font size, measure, and unit
Matches preset: Relaxed. Body text (WCAG minimum).
Pick a font size to see how the same ratio behaves at body, heading, and display sizes.
Measure is the line width. The classic readable range is 45 to 75 characters per line; wider paragraphs need more line height.
Unit
Recommended. Scales with font-size in the cascade.
Font family
Different families read at different x-heights, so the same line height feels tighter or looser depending on the typeface.
Sample text
Live preview
Renders at 16 px with line-height 1.5 on a 640 px measure.
Line-height check
Comfortable body
Inside the 1.5 to 1.75 sweet spot for readable body copy.
Ratio 1.5 at 16 px = 24 px between baselines.
Measure check
A bit wide
Acceptable for long-form, but consider extra line height.
About 80 characters per line at 640 px wide with System Sans.
Export
Copy the line-height into your stylesheet, design tokens, or Tailwind config.
A drop-in line-height declaration
p {
line-height: 1.5;
}Picking a line height
Prefer a unitless ratio. CSS line-height accepts a bare number, which the cascade multiplies against the current font-size. Any child element that overrides font-size still inherits a proportional line-height, so 1.5 stays 1.5 of whatever size each element ends up using.
Body text usually wants 1.5 to 1.75. The WCAG 2.2 Text Spacing success criterion expects pages to remain readable when users set line-height to at least 1.5 of the font size, so starting at 1.5 in your stylesheet keeps you ahead of that floor.
Headings go tighter. Large display copy at 48 px or more often sits between 1.0 and 1.2 because the visual mass already carries the rhythm. Subheads land around 1.2 to 1.35, comfortable in the hierarchy without feeling cramped.
Watch the measure. The same ratio reads tight on a narrow column and airy on a wide one. The classic comfortable range is 45 to 75 characters per line; widen the measure and you usually want a slightly higher line-height to give the eye a clearer path back.
How to use
- Drag the Line-height ratio slider, or click a preset (Display, Tight, Snug, Normal, Relaxed, Loose, Double) to start from a known-good value.
- Set the font size and the measure (line width) so the preview matches the place this rule will actually be used: a 16 px body paragraph in a 640 px column reads very differently from a 48 px hero at 960 px.
- Pick a font family stack and a sample (body paragraph, heading stack, lorem ipsum, or code listing). Paste your own copy in the textarea to test brand-specific text.
- Switch the Unit between Unitless, em, px, and Percent. Unitless is recommended because it scales with the cascade so descendants inherit a proportional line-height.
- Read the Line-height check and Measure check verdicts to confirm the value is appropriate for the font size and column width. Switch the Export tab between CSS rule, CSS variables, and Tailwind config, then click Copy output.
About this tool
CSS Line-Height Generator helps you settle the most common typography call on the web: what value should I put on line-height? The tool renders a real paragraph at your chosen font size, font family, ratio, and measure (line width), because line-height feels right or wrong only when seen at the actual reading conditions, not as a number on a slider. Drag the ratio between 0.5 and 3 in 0.05 steps, switch the font size between 10 and 96 pixels, change the measure between 200 and 960 pixels, and try a system sans, serif, or mono stack to see how each option reads. Seven curated presets cover the situations you actually hit in product work: Display (1.0) for hero copy, Tight (1.15) and Snug (1.25) for headings and short labels, Normal (1.4) for long-form intros, Relaxed (1.5) for body text (the WCAG 2.2 Text Spacing minimum), Loose (1.625) for editorial body, and Double (2.0) for code blocks or drafts. Unit toggles let you export the line-height as a unitless ratio (recommended, since it scales with the cascade), em (explicit to the current element's font-size), px (fixed), or percent (behaves like em on most engines). Two automated checks watch your shoulder: a line-height verdict that knows display copy wants tighter leading than body copy, and a measure verdict that flags lines under 35 or over 85 characters per line, where readability research consistently shows comprehension drops. Three copy-ready exports are available: a drop-in CSS rule with a selector of your choice, a CSS custom-property block keyed to --leading for design tokens, and a Tailwind v3+ theme.extend.lineHeight entry. A four-cell value panel always shows the equivalent unitless, em, px, and percent values so you can hand-paste whichever your codebase expects. Useful for picking a stylesheet default, auditing a marketing site, fixing tight headings in a design review, building a typography token in a design system, or just learning which line-height numbers look good at which font sizes. Everything runs locally in your browser; the text and numbers you type here never leave your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
Type Scale Generator
Build a modular font size ladder with live preview and copy-ready CSS, Tailwind, and JSON.
Open tool
ConverterPixels to REM Converter
Bidirectional pixel and rem or em converter with batch mode and a reference chart.
Open tool
GeneratorCSS Text Shadow Generator
Visual editor for stacked CSS text-shadow with neon, retro, and outline presets.
Open tool
GeneratorCSS Clamp Generator
Build clamp() for fluid type and spacing with a live viewport preview.
Open tool
GeneratorCSS Gradient Generator
Linear, radial, and conic gradients with multi-stop editor and live preview.
Open tool
DeveloperTailwind Color Finder
Browse, search, and reverse-lookup the full Tailwind CSS color palette.
Open tool