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

re: 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 ...


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