Photoshopの文字設定をCSSに落とし込む手順とツール

だいたい Photoshop のままだけれど、行送り・トラッキングはそのままではないので変換が必要になる。

相互関係

行送り

行送り / フォントサイズ

行送りが30でフォントサイズが20の場合、30/20で1.5となる。
→ line-height: 1.5

トラッキング

トラッキング / 1000

トラッキングが50の場合、50/1000で0.05になる。
→ letter-spacing : 0.05em

ツール（Photoshop Value to CSS Value）

追記：必要な値を入力すると各情報に計算されるツールを作成しました。