【Figma & Illustrator】テキストの上下余白をきれいに揃える方法memo

デザイン作業をしていると、テキストの上下余白が気になること、ありませんか？

FigmaやIllustratorでは、設定を変えるだけで「見た目どおり」にテキストを整列できます。
（※ただし、Webデザインでは注意が必要です！）

Figmaの設定方法

「上下トリミング」+「ベースラインまでのキャップハイト」

1. テキストを選択
2. プロパティパネルの「上下トリミング」→「ベースラインまでのキャップハイト」を選択

これで余白部分がきれいに消えました！

この設定にすると、余分な余白が消えて文字の高さぴったりになるよ〜！

Illustratorの設定方法

「プレビュー境界を使用」+「オブジェクトのアウトライン」

1. テキストを選択
2. ［整列］パネル右上メニューから「プレビュー境界を使用にチェック

3. ［アピアランス］テキストを選択→［パス］→［オブジェクトのアウトライン］ を選択

これで余白部分がきれいに消えました！

上下トリミング機能は便利だけど、Web実装にはまだ注意が必要

ここで重要なポイント。

Figmaでの「上下トリミング」やIllustratorの「プレビュー境界」設定は、Webデザインにはおすすめできません。

どうしてダメなの？

• 文字の表示サイズ＝フォントのサイズ＋line-heightの余白なので、デザインどおりに見えないことがあるんです。
• デザインで見た目がそろっていても、コーディング時にはズレてしまうことが…。

Figmaの開発ツールではどう見える？

Figmaで「上下トリミング」を「ベースラインまでのキャップハイト」に設定し開発モードで確認すると、text-box-trim というCSSプロパティが使われます。
この text-box-trim は、2024年12月〜2025年2月ごろにかけてSafari・Chrome・Edgeなど主要ブラウザで徐々に対応が始まったばかりの、比較的新しい仕様で、実務レベルでは採用が難しいのが現状です。

対応状況にバラつきもあるため、「Figmaではキレイに見えるのに、コーディングするとズレる……」というギャップが起きやすい点には注意が必要です。
ICS MEDIAさんの記事がとても参考になりました。
CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 – ICS MEDIA

Web用のデザインでは、デフォルトの余白ありの状態で作った方が安全

用途に合わせて設定を使い分けよう

以上！！