Photoshopのトラッキングの設定をコーディングに反映する

テキストのトラッキングの設定をPhotoshopのデータ通りに指定する方法をメモ。

サンプルコード

Photoshopの文字設定の下記部分で設定する項目がトラッキングで、文字と文字の間隔を指定します。

文字と文字の間隔はCSSプロパティのletter-spacingで設定できますが、Photoshop上のトラッキングの値そのままではletter-spacingで使用できません。
letter-spacingで使用する際は「トラッキングの値 / 1000」 の計算で単位をemとすればいいようで、例えば上記画像の「50」の場合は「50 / 1000」で0.05emとなります。

Photoshop上でトラッキングの設定をした画像とletter-spacingの設定をしたテキストで比較してみます。

<p><img src="img01.png"></p>
<p class="type01">文字サイズ16pxトラッキング50</p>
<hr>
<p><img src="img02.png"></p>
<p class="type02">文字サイズ14pxトラッキング200</p>
<hr>
<p><img src="img03.png"></p>
<p class="type03">文字サイズ14pxトラッキング400</p>
<hr>
<p><img src="img04.png"></p>
<p class="type04">文字サイズ12pxトラッキング1000</p>

.type01 {
	font-size: 16px;
	letter-spacing: 0.05em;
}
.type02 {
	font-size: 14px;
	letter-spacing: 0.2em;
}
.type03 {
	font-size: 14px;
	letter-spacing: 0.4em;
}
.type04 {
	font-size: 12px;
	letter-spacing: 1em;
}

letter-spacing指定のデモページ
これでPhotoshopのトラッキングの設定をコーディングに反映することができました。