• HOME
  • Adobe XD
  • AdobeXDで文字カーニング/トラッキング、行間を調整する方法

AdobeXDで文字カーニング/トラッキング、行間を調整する方法

文字間と行間の調整方法

文字間(トラッキングの設定)

これまでXDは文字間(トラッキング)の設定はできなかったのですが、アップデートが繰り返され、現在では設定可能になっています。

❶まずテキストを用意します。

❷赤丸部分の値を300に設定してみてください。全体のテキスト間隔が変わります。

行間の設定

先ほどの赤丸の隣にある数値を変更してみてください。行間の設定が可能です。

カーニングとトラッキングの違い

文字間(トラッキング)を調整する際に誤ってカーニングと表記する方やサイトが非常に多く困ったものですが、カーニングとは個別の文字に対して下記の画像のようにタイトルなどを詰めていく作業のことです。Adobe XDではカーニング設定はできません。その理由も紹介します。

印刷物制作では目立つタイトル部分の調整や注釈を決まったサイズの箱に入れる時などに使用します。字詰めとも呼ばれます。

『全体の文字の密度と比較して、VとTの間にはアキが大きすぎるので調整しよう』という文字間調整がカーニング

『全体的にもっとゆったり見せたいから単純に文字と文字の間の感覚を広げよう』がトラッキング

多くの人やサイトが全体の文字間隔を広げる(トラッキング)意味でカーニングという言葉を誤用していることが多いです。

自動カーニングやプロモーショナルメトリクスなどの全体にかかる自動カーニングについてボディ全体のカーニングを行いたいという場合は、そもそもプロポーショナルメトリクスが活きの状態になっている上、コーディング時CSSにfont-feature-settingsを入れるなどの設定変更は可能です。表示するブラウザによっても見え方が異なるため、XDでカンプ作成する際はボディのそれぞれのカーニングに対してそこまで気にする必要は無いと思います。

タイトル文字などの目立つ場所にはカーニング(字詰め)が必要なので、イラレ等で画像を準備するなどして対応しましょう。

おまけ

Adobe XDで便利な上付き文字の設定を紹介します。

❶※をテキストで打って、選択した状態にする

❷上付き文字を選択

上付き文字の設定ができました。

【総集編】驚異のイラストレーター仕事術 | designist:デザイニスト

イラストレーターを使うプロのために、ちょっとしたことで劇的にパフォーマンスが改善されるコツをドバドバ紹介していくコーナーです。悩んでいても、悩んでなくても、イラストレーターを使用する方なら絶対知っておいてほしい内容をまとめています。是非活用してくださいね! 深い階層にある文字を一発で選択する方法。 【驚異のイラストレーター仕事術01】深い階層にある文字を一発で選択する方法。 | designist