デザインカンプの文字の行間やトラッキングをCSSで正確に反映させたい

PhotoshopやIllustratorで作成されたデザインのデータで、テキストにトラッキングが設定されていることってありますよね。

テキストをhtmlに表示させてみたときに、トラッキングが設定されていることに気がつかないと、「あれ？なんか文字と文字の横の間がカンプで見たときより詰まってる。。。」なんてことになります。
でも、トラッキングの設定をCSSで反映させるにはどうしたら良いのでしょうか？

解決策としては、letter-spacingを使います。1px単位で指定できるので、

letter-spacing: 1px;

こんな感じで使います。

ただ、わざわざ文字と文字の間の幅をその都度ピクセル単位で測るのはちょっと面倒。
ていうか、今までなんとなく感覚でピクセル単位で指定してました(^^;

ですが、やはりできる限り正確にデザインをCSSで再現させるのがコーダーの務めですので、文字の大きさとトラッキングの関係を調べてみました。
するとAdobeさんのこんな記事が！

Adobe Photoshop での行と文字の間隔

これによると、

トラッキングとカーニングの値は、現在の文字サイズを基準とした 1/1000 em 単位で指定します。1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。カーニングとトラッキングの値は、現在の文字サイズに対して常に相対的な値になります。

だそうです。なるほど〜。

つまり、トラッキングを指定したいときは「トラッキングの数値 ÷ 1000」という計算の結果に単位はemを指定してあげると良いのですね。

仮にフォントサイズが16pxでトラッキングの数値が200だった場合は、「16 ÷ 1000 = 0.016」なので

letter-spacing: 0.016em;

となるわけです。

で、これも毎回いちいち計算するのは手間なので（1000分の1だから単位をずらせば良いだけといえばそれはまあそうなんですが、一瞬100分の1と勘違いするようなこともよくあるので汗）、Sassのmixinを作っておけば、何も考えずに数値を入れるだけでOKです！

// トラッキングのmixin
@mixin tracking($tracking) {
  letter-spacing: ($tracking / 1000 ) + em;
}

// 利用するとき
p {
 @include tracking(16);
}

//コンパイル後
p {
 letter-spacing: 0.016em;
}

わー、楽ちん♪

ついでなので、文字と行間から簡単にline-heightを計算するmixinも作っておきましょう。

// 行間のmixin
@mixin fontsize($fontsize, $lin) {  //$fontsizeの数値の単位はpx
  line-height: $lin / $fontsize;
  font-size: #{$fontsize / 10}rem;
}

//　利用するとき
p {
  @include fontsize(16, 24);
}

// コンパイル後
p {
  line-height: 1.5;
  font-size: 1.6rem;
}

上の例では1rem=10pxとなるようルートのフォントサイズをhtml {font-size:62.5%;}としたときに、mixinの中でフォントサイズ（単位：px）を指定すると、コンパイル結果でremにして返してくれるようにしています。

コーディングの作業はSassのmixinを使って効率化を進めたいですね！