【5分で解決】CSSのletter-spacingからAdobe XDでの文字間を計算する方法

Webデザイン現場で「既存サイトのフォントの文字間(トラッキング)を知りたいけど計算方法がわからない…」と困ったことはないでしょうか?
キャプチャー画像の上から文字を重ね、見た目を合わせようとしても、時間がかかった割に結局ずれてしまったりして大変ですよね。

そこで今回は、以下のような方の課題を解決します。

  • 既存サイトと同じ文字間をデザインで正確に再現したい
  • CSSのletter-spacingの値をAdobe XDやPhotoshop上での値に変換したい
  • コーディングをする時のletter-spacingの計算方法は知っているが、その逆がわからない

ご紹介する計算式に数字を当てはめるだけで、簡単にAdobe XDの文字間の値が算出できます!
デザイン作業の効率を大幅にあげられるので、是非ご活用ください。

結論:計算方法

サイト全体のフォントサイズ指定に影響されることがあるので、詳細なem指定の数値をとるよりも、検証ツールの計算済み(Computed)の「px値」から算出する方法がおすすめです。

それでは早速、計算式に当てはめる数値の確認方法から解説していきます。

①フォントのCSS情報を確認する

知りたいCSSの数値はfont-sizeとletter-spacingです。
以下より例を使って実際に値を出していきたいと思います。

※ここではGoogle Chromeを使って解説

文字間の数値を取得したいテキストを選択(ドラッグ)して右クリック。表示されたメニューから「検証」をクリックします。

fig01

検証をクリックすると、以下のデベロッパー ツールが表示されます。
選択したテキストのソース部分がハイライトされるので、その状態のまま右の「Computed(計算済み)」タブを表示。すると、このテキストに最終的に適用されたCSSの設定値が確認できます。

fig02

「Computed(計算済み)」タブで表示されたCSSの設定値の中から以下の数値を確認。

fig03

今回の例では以下となります。

  • font-size: 20px;
  • letter-spacing: 1px;

 

②確認したCSSの数値から計算する(計算式)

font-size(px値)とletter-spacing(px値)がわかったら、以下の計算式に当てはめて計算します。

letter-spacing(px値) ÷ フォントサイズ(px値) × 1000 = 文字間(AV)

例の数値を計算式に当てはめると、答えは「50」となり、Adobe XDやPhotoshop上の文字間(トラッキング、AV)で「50」を指定すると正しく再現されます。

1px ÷ 20px × 1000 = 50


③Adobe XDでAV(トラッキング)の数値を入れる

今回は例のテキストの文字間が、実際に正しい見栄えになるか検証しました。
(※フォントの種類も既存サイトと合わせておいてください。)

fig04

少しわかりにくいですが、キャプチャー画像の上に赤文字を半透明にして重ねています。ぴったりと文字間(トラッキング)が合っていることが確認できます。
以下は、わかりやすいよう重ねている文字をずらし、文字の間には等間隔のラインを引きました。

fig05

 

また、Photoshop(フォトショ)やIllustrator(イラレ)の場合も、「VA」の箇所に同様に数値を入れることで再現できます。

▼Photoshop

fig06

▼Illustrator

fig07

 

Webページの文字のletter-spacingからAdobe XD等のデザインツールの文字間(AV、VA)の数値を算出する計算方法はここまでとなります。簡単に計算ができたと思います!

コーディング時のCSSのletter-spacingの計算方法

先ほど紹介したコーディング→デザインの文字間の算出とは逆に、コーディングする時にAdobe XD等のデザインファイルのトラッキング(AV)の数値からCSSのletter-spacingの数値を算出する方法をご紹介したいと思います。

①デザインファイルのトラッキング値を確認

デザインファイルを開いて対象のテキストを選択し、Adobe XDの場合は「AV」の値、PhotoshopやIllustratorの場合は「VA」の値を見て、文字間(トラッキング)の数値を確認します。

以下の例はAdobe XDですが、数値は80です。

fig08

 

②letter-spacingの数値を算出する

トラッキングの数値が分かったら、以下の計算式に当てはめて計算します。

フォントのAV(トラッキング)の値 ÷ 1000 = letter-spacing(em値)

例の数値を計算式に当てはめると、答えは「0.08」となりますので、コーディングの際はCSSにて「letter-spacing: 0.08em;」を指定しましょう。

80 ÷ 1000 = 0.08em

なぜ文字間の計算では×1000(÷1000)を使うのか

今回、文字間の計算の際に「×1000」や「÷1000」という数値がでてきましたが、なぜ「1000」なのかという点が気になり、調査しました。

Adobe XDの文字間(トラッキング)の指定方法は「milli-em」

Adobe XDのユーザーガイドでは以下のように文字間は「milli-em」で変更すると表記されています。
以下はAdobe XDのユーザーガイドのページから該当箇所を抜粋したものです。

参考:Adobe XD ユーザーガイド >描画ツールとテキストツールの操作>テキストの書式設定
https://helpx.adobe.com/jp/xd/help/drawing-text-tools.html

fig09

テキストのサブセット内の字間を変更するには、テキストを選択し、プロパティインスペクターを使って milli-em で字間を変更します。

「milli-em」とは?

「milli-em」の意味を調べてみました。
以下はweblio英和和英辞典のページから該当箇所を抜粋したものです。

参考:weblio英和和英辞典
https://ejje.weblio.jp/content/milli-

fig14

「…の 1000 分の 1」の意

つまり、「milli-em」は 1/1000emという意味だったのですね。
今回の計算式がXDだけでなく、Photoshop等でも適用可能ということを踏まえてAdobeのユーザーガイドも調べてみました。

以下はPhotoshop ユーザーガイドのページから該当箇所を抜粋したものです。

参考:Photoshop ユーザーガイド>テキスト>行と文字の間隔「カーニングとトラッキング」
https://helpx.adobe.com/jp/photoshop/using/line-character-spacing.html

fig12

トラッキングとカーニングの値は、現在の文字サイズを基準とした 1/1000 em 単位で指定します。1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。カーニングとトラッキングの値は、現在の文字サイズに対して常に相対的な値になります。

参考:Illustrator ユーザーガイド>コンテンツの追加と編集>文字>行間と字間「カーニングと字送りの調整」
https://helpx.adobe.com/jp/illustrator/using/line-character-spacing.html

fig13

字送りとカーニングの値は、現在の書体サイズを基準とした 1/1000 em 単位で指定します。 1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。 カーニングと字送りは、現在の書体サイズに比例します。

上記のことから、トラッキング(AV、VA)の数値はその文字サイズを基準とした1/1000emという単位で指定されているので、今回の算出したかった文字間の計算式では「×1000(÷1000)」をするということがわかりました。

まとめ

今回は計算式だけではなく少し深掘りして調べてみましたが、いかがだったでしょうか。

文字間(letter-spacing)の計算方法を知っておくと、デザインやコーディングの作業時間を大幅に短縮できるので、困ったときはぜひ使ってみてください!

この記事をシェアする

Facebook Twitter LinkedIn note はてなブログ
アクセサイト編集担当

アクセサイト編集担当

マーケティングDX・営業DXに関連するお役立ち情報を投稿しています。
以下の公式SNSでも情報を発信していますので、ぜひフォローをお願いします!

SHARE

Facebook Twitter LinkedIn note はてなブログ
前の記事へ ブログ一覧へ戻る 次の記事へ