デザインデータで設定されているカーニングをCSSで再現したい

illustratorやPhotoshopのデザインデータ上で設定された数値を再現するためのメモです。

https://helpx.adobe.com/jp/illustrator/using/line-character-spacing.html

字送りとカーニングの値は、現在の書体サイズを基準とした 1/1000 em 単位で指定します。 1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。 カーニングと字送りは、現在の書体サイズに比例します。

デザインデータで設定されている数値の1000分の1の値を「em」単位で設定してあげれば再現される。

例えば、イラレやフォトショで下記のように「80」が設定されていれば

SCSSでこうしてあげればよい。

.text {
    letter-spacing: #{(80/1000)}em;
}

MIXINにしておけば調整の数値を忘れずで簡単に対応できそうですね。