re: How CSS line-height works and best practices VIEW POST


Hey! Have a question. Most of design services (Adobe XD, Sketch) use "leading" and developers use "line-height" in CSS. So I'm designer and I work in Adobe XD now, which was chosen cos it gives a dev link with all the parameters etc. So my developer sees this "leading" parameter and he doesn't know how to convert it into "line-height" so he can make it pixel perfect.

Do you know how to convert "leading" into "line-height"? or how to code "leading" instead of "line-height"?



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.

code of conduct - report abuse