Line Height Calculator
Calculate line-height ratio from font size and line height (leading) in pixels.
px → Ratio
Ratio
1.75
Top/Bottom Margin
each 6px
line-height: 1.75;
Preview
イーハトーヴォというのは一体どこのことなのか、
私にはそれがよくわかりませんでした。
私にはそれがよくわかりませんでした。
font-size: 16px
line-height: 1.75
Ratio → px
28px
How to Use
1
Enter Font Size
Input the font size from your design comp.
2
Enter Line Height
Input the "line height" or "leading" value from your design tool.
3
Apply Ratio to CSS
Use the calculated ratio in your CSS line-height property.
What is Line Height Calculation
line-height is a CSS property that sets the height of a line box. When specified as a unitless number, it acts as a multiplier of the font size and inherits properly to child elements. Use this tool to convert design comp values to CSS.
Features
- px to RatioCalculate line-height ratio from pixel values
- Ratio to pxReverse calculate pixels from ratio
- Margin DisplayShows top/bottom margins around text
- Live PreviewPreview text with current settings
Use Cases
- Figma/XD to CSS conversion
- Typography design
- Readable body text settings
- Heading line height adjustment
- Design system line height rules
FAQ
Why use unitless values?
Unitless values calculate line height relative to the font size and inherit properly. Using px or em can cause inappropriate line heights when child elements have different font sizes.
What's the recommended line-height for body text?
For English text, 1.5 is common. For Japanese text, 1.7–2.0 is often more readable. Choose a value that's not too tight or too loose.
What is "leading" in design software?
Leading is the distance from one baseline to the next. Figma shows it as "Line height", while XD calls it "Line spacing".