DEV Community

Discussion on: How CSS line-height works and best practices

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

Hey!

I can not say this for every application. It depends on the default settings of the application.

Photoshop(maybe in XD it is the same) for example:

  • If it is not set then you should set line-height: 1.2;
  • If you have it set to any other value the calculation is as follows: font-size + (leading / 2) = line-height

Also a value you should set is line-spacing: Line Spacing = (Line Height - Font Size) / 2

I hope I could help you at least a little bit.

In general pixel-perfect is hard to do. Font rendering works different on every OS and even sometimes depends on the resolution of the monitor/phone.