【CSS】忘れがちなletter-spacingとline-heightの計算方法

PhotoshopやXDで指定されている行間とトラッキングをCSSで表現する際の計算方法です。

こちらの画像は、Photoshopでの表示です。上が行間、下がトラッキングです。

letter-spacing（トラッキング）

トラッキングの値 ÷ 1000（単位はem)

行間の値（px）÷ フォントサイズ（px）(単位なし）

line-heightは、レスポンシブ対応などされていた場合にフォントサイズが変わるため、pxなどの単位をかかずに記載するほうが良いです。