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・比率）にしておけば、そのまま追従します。

Photoshop/Illustrator→CSS数値変換（トラッキング・行送り）

デザインの文字間隔・行送り・文字サイズを、CSSに変換できます。

1トラッキング／カーニング → letter-spacing

トラッキング値（1/1000em）

letter-spacing: 0.05em;

2フォントサイズ＋行送り → line-height

フォントサイズ（px）行送り（px）

line-height: 1.75;

line-height: 175%;

単位なしの比率指定がおすすめです（子要素にもサイズ比で継承されるため）。

3pt ⇔ px・Q数 → px

pt（ポイント） px（ピクセル）

font-size: 16px;

Q数（級）

font-size: 12.28px;

pt⇔pxは96dpi基準（1pt＝4/3px）、Q数は1Q＝0.25mmとして96dpiでpxに換算しています。

4px → rem

px（ピクセル）ルートのフォントサイズ（px）

font-size: 1.5rem;

使い方

PhotoshopやIllustratorの文字パネルに表示されている数値を、それぞれの欄に入力します。
結果はCSS宣言の形で即表示されます。「コピー」ボタンでそのままスタイルシートに貼り付けられます。

変換式のまとめ

変換	計算式	例
トラッキング → letter-spacing	値 ÷ 1000（em）	100 → 0.1em
行送り → line-height	行送りpx ÷ フォントサイズpx	28px ÷ 16px → 1.75
pt → px	pt × 4 ÷ 3	12pt → 16px
px → pt	px × 3 ÷ 4	16px → 12pt
Q数 → px	Q × 0.25mm ÷ 25.4 × 96	13Q → 約12.28px
px → rem	px ÷ ルートのフォントサイズ	24px → 1.5rem（基準16px）

なぜ1/1000emなのか

PhotoshopやIllustratorのトラッキング・カーニングは、文字サイズの1/1000を1単位とする「1000分率のem」で指定します。 CSSのletter-spacingをemで書けば同じ「文字サイズ基準の相対値」になるため、単純に1000で割るだけでカンプの字間を再現できます。 pxで指定すると文字サイズを変えたときに詰まり具合が変わってしまうので、emでの指定がおすすめです。

文字サイズの単位そのものの換算はポイント・Q数変換もあわせてどうぞ。

よくある質問

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・比率）にしておけば、そのまま追従します。