Photoshop/Illustrator→CSS数値変換

よくある質問

Photoshopのトラッキング100はletter-spacingでいくつですか？

0.1emです。PhotoshopやIllustratorのトラッキング／カーニングの単位は1/1000emなので、値を1000で割るとそのままemになります。トラッキング50なら0.05em、200なら0.2emです。emは文字サイズに対する相対値なので、デザインカンプと同じ詰まり具合をフォントサイズが変わっても保てます。

行送りが「（自動）」になっているときはどうすればよいですか？

PhotoshopやIllustratorの自動行送りは、初期設定では文字サイズの175%です（環境設定で変更可能）。たとえば16pxの文字ならline-height: 1.75に相当します。ただしカンプ上で詰めて見える場合はデザイナーが意図的に変えていることも多いので、可能であれば行送りの実数値を確認するのが確実です。Webの本文ではline-height 1.5〜1.8あたりがよく使われます。

変換した値をレスポンシブにしたいときは？

CSSのclamp()関数を使うと、画面幅に応じて滑らかに変化する文字サイズを1行で書けます。たとえば font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); と書くと、最小16px・最大24pxの間で画面幅に連動して変化します。カンプのpx値をこのツールでremに直し、最小値・最大値として使うのがおすすめです。letter-spacingやline-heightは相対単位（em・比率）にしておけば、そのまま追従します。