字間調整ツール: CSS・Figma・Photoshop・Word の値に換算

字間を目で選び、CSS・Figma・Photoshop の値に換算するツール

字間調整ツールは、文字と文字のあいだの間隔、つまり字間(letter-spacing)を実寸のサンプルで変えながら選ぶためのツールです。値を決めると CSS コードと Tailwind のクラスを作り、同じ値を Figma・Photoshop・Word で使う単位にも換算して表示します。たとえば 16px の文字に letter-spacing: -0.02em; を指定すると、1文字ごとに 0.32px ずつ間隔が詰まります。これは Figma の −2%、Photoshop のトラッキング −20、12pt の文字に対する Word の −0.24pt と同じ値です。

サンプル欄に好きな文章を入力すると、拡大ルーペが先頭の数文字を大きく描き、間隔が付く位置を斜線で示します。比較ラダーは現在の値の上下 6 段を並べて、目で選ぶのを助けます。サイズ別の基準グラフでは、Apple SF Pro・Inter・Material 3 が文字サイズごとに定めた字間を、現在の値と並べて確認できます。

字間はなぜ、いつ調整するのか

フォントにはデザイナーが決めた標準の間隔があるので、ほとんどの文章はそのままで問題ありません。ただし、その間隔は特定のサイズと用途を想定して整えられたものです。極端に小さい文字や大きい文字、英大文字だけの文字列では、間隔が不自然に見えることがあります。字間の調整は、そうした場面で文字のあいだをわずかに広げたり詰めたりして、読みやすく整える作業です。

デザインカンプを Web に移すとき: Figma の −2% や Photoshop の −20 をそのまま CSS に書くと、まったく別の値になります。カンプの値を下の換算欄に入力すれば、em と px の値がすぐに出ます。
大きな見出しがゆるく見えるとき: 文字が大きくなると、文字間の空きも一緒に大きくなって目立ちます。少し詰めると引き締まって見えることが多いものの、フォントによっては逆になるので、比較ラダーで上下の値を見比べます。
小さい文字と英大文字のラベル: 写真のキャプション、注記、ボタンのような小さい文字や、英大文字だけのラベルは、間隔を少し広げると文字が詰まって見えにくくなります。Google Fonts の解説も、大文字には間隔を広げたほうが読みやすいと説明しています。
ロゴとワードマーク: 短い文字列を広く開いて雰囲気を出す場合です。0.1em 以上広げるときは、最後の文字の後ろに付く間隔のせいで、中央揃えがずれていないかを確認します。
文書を1行・1ページに収めるとき: Word の文書で1、2文字だけが次の行にはみ出すとき、字間を少し詰めて収めることがあります。アプリごとに単位とメニューが違うため、下にまとめました。

使い方

上の例(本文、小さい文字、見出し、大見出し、英大文字ラベル、ロゴ文字)から用途の近いものを選ぶか、フォント・文字サイズ・太さ・行間を自分で決めます。この端末にインストールされていないフォントは、一覧に「この端末にはありません」と表示されます。
実寸サンプルの欄に使いたい文章を入力します。拡大ルーペと比較ラダーも、この文章の1行目に切り替わります。
字間のスライダーを動かすか、比較ラダーで読みやすい行を押します。押した値が中央に来るので、何度か押すうちに目的の値に絞り込めます。ラダーの刻み幅は 0.005em、0.01em、0.025em から選べます。
カンプの値がすでにある場合は、「ほかのアプリでの値」の欄(Figma %、Photoshop トラッキング、Word pt など)に入力します。どの欄に入力しても、ほかの欄が連動して変わります。
CSS の出力単位を em か px から選び、CSS 全体、字間の1行、Tailwind のクラスのいずれかをコピーします。サンプルを画像で保存したり、現在の設定を含むリンクをコピーして共有したりすることもできます。

単位の換算: em、px、%、トラッキング、pt

字間の単位はアプリごとに異なります。CSS の em、Figma の %、Adobe アプリのトラッキングは、いずれも文字サイズに比例する単位なので、文字サイズが変わっても比率が保たれます。一方、px と Word の pt は固定の長さなので、同じ比率を保つには文字サイズに合わせて計算し直す必要があります。下の表は、16px(12pt)の文字に −0.02em を指定したときの各アプリでの値です。

入力する場所	単位	em への換算式	16px の文字の −0.02em
CSS letter-spacing、Android letterSpacing	em	そのまま	−0.02em
CSS px、Figma px	px	px ÷ 文字サイズ(px)	−0.32px
Figma Letter spacing (%)	%	% ÷ 100	−2%
Photoshop・Illustrator・InDesign のトラッキング	1/1000 em	トラッキング ÷ 1000	−20
Word の文字間隔(展開・圧縮)	pt	pt ÷ 文字サイズ(pt)	−0.24pt

Word の文字サイズは pt で指定するため、Web の px サイズと合わせるときは 1px = 0.75pt で換算します(16px = 12pt)。iOS の kern と SwiftUI の tracking は pt 単位の固定長なので、文字サイズの数値が同じなら px 欄と同じ数を入力します。Tailwind CSS の字間クラスは次の 6 段階で、このツールは値がちょうど一致する場合はその名前を、一致しない場合は tracking-[-0.02em] のような任意値のクラスを作ります。

Tailwind のクラス	em	16px の文字	Figma %	トラッキング
`tracking-tighter`	−0.05em	−0.8px	−5%	−50
`tracking-tight`	−0.025em	−0.4px	−2.5%	−25
`tracking-normal`	0em	0px	0%	0
`tracking-wide`	0.025em	0.4px	2.5%	25
`tracking-wider`	0.05em	0.8px	5%	50
`tracking-widest`	0.1em	1.6px	10%	100

文字サイズによって変わる字間

同じフォントでも、サイズによって適切な字間は変わります。Apple は SF Pro フォントに 6pt から 96pt までのサイズ別トラッキング表を用意し、Inter フォントは文字サイズを入れると字間が出る式(−0.0223 + 0.185 × e^{−0.1745 × サイズ})を公開しています。Material 3 は文字の役割 15 種類ごとに字間を定めています。小さい文字ほど間隔を空ける方向は共通ですが、細部は異なります。Apple と Inter は 12px 前後で 0 になり、本文サイズ(14〜20px)では負の値で詰めます。Material 3 は本文・ラベルと小さめのタイトル(Title Medium・Small)の役割に正の値(+0.007〜+0.045em)を、Title Large と Headline・Display の役割には 0 を割り当てています(最大の Display Large だけが −0.004em)。大きな文字では、Inter が −0.022em 付近にとどまる一方、SF Pro の表は 24pt から再びプラスに転じ、80pt 以上では 0 です。

文字サイズ	Apple SF Pro	Inter	Material 3 (最も近い役割)
11px	+0.006em	+0.005em	Label Small 11 · +0.045em
12px	0em	0em	Body Small 12 · +0.033em
14px	−0.011em	−0.006em	Body Medium 14 · +0.014em
16px	−0.02em	−0.011em	Body Large 16 · +0.031em
17px	−0.026em	−0.013em	Body Large 16 · +0.031em
20px	−0.023em	−0.017em	Title Large 22 · 0em
24px	+0.003em	−0.019em	Headline Small 24 · 0em
32px	+0.013em	−0.022em	Headline Large 32 · 0em
48px	+0.008em	−0.022em	Display Medium 45 · 0em
64px	+0.004em	−0.022em	Display Large 57 · −0.004em

Apple の表の単位は pt、Material 3 は sp なので、Web では同じ数値の px とみなして em に換算しました(小数第 3 位まで)。Apple の表は iOS と macOS で同じ値です。このように大きな見出しの字間は基準ごとに向きが異なるため、使うフォントでサンプルを作り、自分の目で見比べるのが確実です。

Word・Figma・Adobe アプリで字間を変える

日本語の組版では、文字は正方形の枠に収まるように設計され、余分な間隔を入れずに並べるのが基本です。W3C の「日本語組版処理の要件」(JLREQ)は、これを「原則として，文字の外枠を密着させて配置するベタ組にする」と記しています(英語版では "solid setting")。つまり日本語本文の基準は字間 0 のベタ組みで、見出しや狭い欄など必要な場所でだけ調整します。アプリごとに字間を変える場所は次のとおりです。

Word: [ホーム] タブで [フォント] ダイアログボックス起動ツールを開き、[詳細設定] タブの [間隔] ボックスで [展開] か [圧縮] を選んで、[指定] ボックスに値を pt で入力します。選択したすべての文字のあいだが同じ長さだけ変わります。
Figma: テキストのプロパティにある Letter spacing に、% か px で入力します。Figma の Plugin API のドキュメントは、この値の単位を PERCENT と PIXELS の 2 種類と定めています。
Photoshop・Illustrator・InDesign: 文字パネルのトラッキング欄に入力します。Adobe のヘルプは、トラッキングもカーニングも 1/1000 em 単位で測ると説明しています。

WCAG 2.2 の達成基準 1.4.12 テキストの間隔(AA)は、ユーザーが行間を文字サイズの 1.5 倍、段落の後の間隔を 2 倍、字間を 0.12 倍、単語の間隔を 0.16 倍に変更しても、内容や機能が失われないことを求めています。この値をデザインに使えという意味ではなく、読むことに困難のあるユーザーが間隔を広げたときに、文字が切れたり重なったりしないように作る、という意味です。字間スライダーの「WCAG 0.12」の目盛りがその値で、幅が固定のボタンや1行で切り取った見出しは、この値であふれないかを確認しておきます。

Google Fonts の解説は、大文字だけの文字列には間隔を広げたほうが読みやすく、負の字間は非常に大きな見出しサイズでなければ勧められないと説明しています。本文は 0 から始めて、比較ラダーで上下の値を見比べるのが無難です。

CSS letter-spacing の実際の動き

em は宣言した要素で px に固定されて継承されます。CSS Text 3 は letter-spacing の計算値を絶対長と定めています。そのため、16px の親に letter-spacing: 0.1em を指定すると、32px の子も 1.6px をそのまま受け継ぎます(Chrome 151 で測定した値)。サイズの異なる子でも比率を保ちたい場合は、子に em の値を書き直します。CSS Text 4 が新たに定めた % 単位は比率のまま継承され、MDN の互換性データは Chrome 145・Firefox 45・Safari 7 から対応と記しています。
最後の文字の後ろにも間隔が付くブラウザーがあります。仕様は行頭と行末には字間を入れないと定めていますが、Chrome 151 では最後の文字の後ろにも間隔が付きます。そのため、中央揃えにした見出しが字間の半分だけ左に寄ります。見出しのブロックに同じ値の padding-left を指定するか、文字を包む要素に margin-right で同じ値を引くと、中央に戻ります。拡大ルーペで薄く塗った最後の斜線が、その間隔です。
合字が無効になることがあります。仕様は、字間が 0 でないとき fi などの任意の合字を使わないよう勧めています。合字が必要な場合は font-feature-settings で有効にでき、仕様もこの設定を優先すると記しています。
アラビア文字のような連綿体の文字には間隔を入れません。仕様は、文字をつないで書く文字体系では文字間に字間を入れないよう定めています。

よくある間違い

Photoshop のトラッキングをそのまま px にする: トラッキング −20 は −20px ではなく −0.02em です。16px の文字なら −0.32px になります。
Figma の % を em として書く: Figma の −2% を −2em と書くと、文字が完全に重なります。100 で割って −0.02em にします。
px で決めたあとに文字サイズだけ変える: 16px の文字で −0.32px だった値を 32px の見出しにそのまま使うと、比率は半分の −0.01em になります。サイズが変わる場所には em を使います。
親の em の字間が子に px で渡るのを忘れる: 大きな見出しに指定した em の字間が、内側の小さい文字に px で渡って広がりすぎたり、その逆になったりします。
英大文字に負の字間を付ける: 大文字だけのラベルは、広げる側から始めます。英大文字ラベルの例は +0.08em です。
幅が固定のボタンに文字をぴったり合わせる: ユーザーが字間を 0.12em に広げると文字があふれます(WCAG 1.4.12)。ボタンの幅は文字に合わせて伸びるようにします。
広い字間を付けた文字を中央揃えにする: ロゴ文字のように 0.2em を指定すると、Chrome では 0.1em だけ左に寄ります。上の補正方法を併用します。

制限と注意

サンプルは、この端末にインストールされているフォントでしか描画できません。一覧で「この端末にはありません」と表示されたフォントや、直接入力した名前が見つからない場合は代替フォントで表示されるため、実際のサイトの Web フォントとは間隔が異なることがあります。
最後の文字の後ろの間隔や小数 px の丸めなど、ブラウザーによって異なる部分があります。本文の測定値は Chrome 151 のものです。Safari と Firefox では実測していません。拡大ルーペは、現在使っているブラウザーが最後の文字の後ろに間隔を付けるかどうかを測って表示します。
Figma のドキュメントは、Letter spacing の単位が % と px であるとだけ記し、% の基準を明記していません。このツールは % を文字サイズに対する百分率として計算しているので、Figma で単位を px に切り替えて出る値と、このツールの px 欄を一度照らし合わせてください。
画像の保存はサンプルをキャンバスに描き直したものなので、改行の位置が画面と異なることがあります。キャンバスの letterSpacing に対応していないブラウザー(MDN では Safari 18.4 より前)では、文字を1つずつ描くためカーニングが効きません。
サイズ別の基準グラフの値は、Apple・Inter・Material 3 がそれぞれ自分のフォントのために定めたものです。ほかのフォントでは出発点としてのみ使い、サンプルで確認してください。

基準日 2026年10月22日。W3C CSS Text Level 3(Candidate Recommendation Draft 2026-08-14)・Level 4(Editor's Draft 2026-08-14)、WCAG 2.2(2024-12-12)、MDN browser-compat-data 8.1.6、Apple HIG Typography(2025-12-16 更新)、androidx Material 3 TypeScaleTokens、W3C JLREQ、Chrome 151 での実測に基づきます。

出典

01W3C: CSS Text Module Level 3Candidate Recommendation Draft 2026-08-14。letter-spacing の定義(normal | 長さ)、行頭と行末には入れない、任意の合字、連綿体の文字
02W3C: CSS Text Module Level 4Editor's Draft 2026-08-14。letter-spacing に % を許可、比率は使用される文字サイズが基準
03MDN: letter-spacing互換性データ browser-compat-data 8.1.6(2026-10-15): % 値は Chrome 145・Firefox 45・Safari 7、キャンバスの letterSpacing は Chrome 99・Firefox 115・Safari 18.4
04W3C WAI: Understanding Success Criterion 1.4.12 Text SpacingAA。行間 1.5 倍、段落後の間隔 2 倍、字間 0.12 倍、単語の間隔 0.16 倍に変えても内容が失われないこと
05Google Fonts Knowledge: Tracking / letter-spacing大文字は間隔を広げたほうが読みやすい、負の字間は大きな見出しサイズでのみ
06Apple: Human Interface Guidelines, TypographySF Pro のサイズ別トラッキング表(6〜96pt、1/1000 em)、2025-12-16 更新の記録
07Inter: Lab (Dynamic Metrics)トラッキング = −0.0223 + 0.185 × e^(−0.1745 × 文字サイズ)
08AndroidX: Material 3 TypeScaleTokensDisplay から Label までの 15 の役割のサイズと字間(sp)
09Adobe: Photoshop Line and character spacingトラッキングとカーニングは 1/1000 em 単位(InDesign・Illustrator のヘルプも同じ)
10Microsoft: Word でテキスト間のスペースを変更する[フォント] ダイアログボックスの [詳細設定] タブ、[間隔] の [展開] と [圧縮]。値の単位は pt(VBA Font.Spacing のドキュメント)
11Figma Plugin API: LetterSpacing字間の単位は PIXELS と PERCENT の 2 種類
12Android Developers: TextView.setLetterSpacingletter-spacing を em 単位で指定
13Apple Developer: NSAttributedString.Key.kern文字間を調整する値の単位は pt(SwiftUI の tracking も pt)
14Tailwind CSS: letter-spacingtracking-tighter の −0.05em から tracking-widest の 0.1em までの 6 段階
15W3C: 日本語組版処理の要件 (Requirements for Japanese Text Layout)原則として文字の外枠を密着させて配置するベタ組み(英語版では solid setting)

よくある質問

字間 −0.02em は px でいくつですか?

em の値に文字サイズを掛けると px になります。16px の文字なら −0.02 × 16 = −0.32px、14px なら −0.28px、24px なら −0.48px です。em は文字サイズに比例するので、同じ −0.02em でも文字が大きいほど詰まる長さは大きくなります。

Figma の字間の値は CSS ではどう書きますか?

Figma で Letter spacing を % で指定した値は、100 で割って em にします。−2% は letter-spacing: -0.02em で、px で指定した値は CSS でも同じ px で書きます。Figma のドキュメントは % の基準を明記していないため、Figma で単位を px に切り替えて出る値と、このツールの px 欄を一度照らし合わせると確実です。

Photoshop のトラッキングを CSS に換算するには?

Photoshop・Illustrator・InDesign のトラッキングは 1/1000 em 単位なので、1000 で割ると em になります。トラッキング −25 は −0.025em で、16px の文字では −0.4px です。トラッキングの値をそのまま px として書くと文字が大きく重なるので注意してください。

本文の字間はどのくらいが適切ですか?

決まった値はありません。W3C の日本語組版処理の要件(JLREQ)は、文字の外枠を密着させて配置するベタ組みを原則としています。Google Fonts の解説も、負の字間は非常に大きな見出しでなければ勧めないと説明しています。まず 0 から始めて比較ラダーで上下の値を見比べ、小さい文字や英大文字だけの文字列は少し広げる方向から確認します。

大きな見出しは字間を詰めるべきですか?

基準によって異なります。Material 3 は最大の Display Large に −0.2sp を指定していますが、ほかの Headline・Display の役割は 0 です。Apple SF Pro の表も 24〜76pt ではプラスの値で、80pt 以上は 0 です。使うフォントでサンプルを作り、比較ラダーで選ぶのが確実です。

letter-spacing には em と px のどちらを使うべきですか?

文字サイズが変わる場所には em を使います。レスポンシブな見出しのようにサイズが変わっても、同じ比率が保たれます。ただし letter-spacing の計算値は px のような絶対長なので、親に指定した em の値は子に px で渡ります。サイズの異なる子には em を書き直すか、% 単位を使います。% 値は MDN の互換性データで Chrome 145・Firefox 45・Safari 7 から対応しています。

字間を広げた見出しが、中央揃えで片側に寄って見えます。

仕様は行末には字間を入れないと定めていますが、Chrome 151 では最後の文字の後ろにも間隔が付き、文字が字間の半分だけ左に寄ります。見出しのブロックに字間と同じ値の padding-left を指定するか、文字を包む要素に margin-right で同じ値を引くと、中央に戻ります。

Web アクセシビリティの基準では、字間はいくつに合わせるべきですか?

WCAG 2.2 の 1.4.12 テキストの間隔(AA)は、特定の値を使うことを求める基準ではありません。ユーザーが字間を文字サイズの 0.12 倍、単語の間隔を 0.16 倍、行間を 1.5 倍、段落の間隔を 2 倍に変更しても、内容や機能が失われないことを求める基準です。幅が固定のボタンや1行で切り取った見出しが、0.12em であふれないかを確認します。