Line-Height Calculator
Calculate common CSS line-height values from a font size and compare live previews at several ratios.
Common Ratios
Preview
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
What is Line-Height Calculator?
Calculate common CSS line-height values from a font size and compare live previews at several ratios. A font size in pixels. Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
Open the tool
What the tool does
- Input: A font size in pixels.
- Controls and processing: Change the font size and compare compact heading, subheading, body, long-form, loose, and golden-ratio starting points.
- Output: Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
How to use it
- Provide the input. A font size in pixels.
- Review the settings. Change the font size and compare compact heading, subheading, body, long-form, loose, and golden-ratio starting points.
- Generate, inspect, and export. Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
Key features
- Input: A font size in pixels.
- Controls and processing: Change the font size and compare compact heading, subheading, body, long-form, loose, and golden-ratio starting points.
- Output: Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
Useful workflows
- Calculate common CSS line-height values from a font size and compare live previews at several ratios.
- Use it when you need this deliverable or diagnostic result: Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
- Place it before the next verified workflow step: testing the chosen line-height with the actual font, width, and language.
Limits and safety notes
- These ratios are starting points, not universal “optimal” values. WCAG 1.4.12 requires content not to break when users set line height to at least 1.5×; it does not mandate every default line-height to be 1.5.
Troubleshooting
- Use a plain numeric value and confirm the decimal separator, source/target unit, base or root size, DPI, and allowed range required by the page.
- Recalculate one known reference value, then compare assumptions and rounding before converting a list or applying the result in CSS or print.
- These ratios are starting points, not universal “optimal” values. WCAG 1.4.12 requires content not to break when users set line height to at least 1.5×; it does not mandate every default line-height to be 1.5.
Frequently asked questions
What is Line-Height Calculator?
Calculate common CSS line-height values from a font size and compare live previews at several ratios.
How do I use Line-Height Calculator?
Provide the expected input, review the page settings, then verify the result before copying or downloading it. Expected output: Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
What input does it accept?
A font size in pixels.
What output does it produce?
Pixel values for ratios 1.2, 1.375, 1.5, 1.625, 2, and the 1.618 golden-ratio option, with live text previews.
What are the limits?
These ratios are starting points, not universal “optimal” values. WCAG 1.4.12 requires content not to break when users set line height to at least 1.5×; it does not mandate every default line-height to be 1.5.
Related AppKiro tools
Start with a verified input
Test with a small, non-sensitive sample, verify the key settings and output, then apply the result to the real workflow.
Open the tool