Web制作をしていると、「文字の上下に謎の余白がある」という問題に悩んだことはありませんか？

例えば次のようなケースです。

• 見出しの上下に余白ができる
• ボタンの文字が中央に見えない
• Figmaのデザインとピッタリ合わない
• line-height を調整しても微妙にズレる

これはフォントが持っているメトリクス（フォント設計上の余白）が原因です。

この問題を解決するために登場したのが、CSSの新しい仕様である

leading-trim と text-edge

です。

この記事では、

• leading-trimとは何か
• text-edgeとは何か
• なぜ必要なのか
• どんな場面で使うのか
• 実際のコード例
• 現在のブラウザ対応状況
• 今後のCSS設計への影響

まで、Web制作者向けに分かりやすく解説します。

leading-trim / text-edgeとは？

leading-trim は、
フォントの上下にある余白（leading）を削るCSSプロパティです。

これにより、

• 文字の上下の余白を削除
• 視覚的にピッタリ揃える
• デザインツールと一致させる

ことができます。

そして text-edge は

どの基準でトリミングするかを指定するプロパティ

です。

つまり

leading-trim = 余白を削る
text-edge   = どこを基準に削るか

という関係になります。

なぜ文字には余白があるのか

実はフォントには、文字の見た目よりも大きい見えない余白があります。

これはフォント設計上必要なものです。

理由は主にこの3つ。

① アクセント文字のため

例えば英語には

Á
é
ü

のような文字があります。

これらは文字の上にアクセントが付きます。

そのためフォントには

上方向の余白

が確保されています。

② 文字の下に伸びる部分

例えば

g
y
p

などの文字。

これらは下に伸びます。

そのためフォントには

下方向の余白もあります。

③ 行間（leading）

タイポグラフィでは

文字と文字の間の余白を

leadingと呼びます。

印刷時代の活字の名残です。

Web制作で起きる問題

このフォント余白は、Web制作でよく問題になります。

例えばこのCSS。

h1{
  font-size:40px;
  line-height:1;
}

見た目はこうなります。

[余白]
文字
[余白]

つまり

文字サイズ = 見た目サイズ

ではないのです。

これが原因で

• ボタンの中央がズレる
• 見出しが上下にズレる
• Figmaとズレる

といった問題が発生します。

これまでの解決方法

これまでは、次のような方法で対処していました。

方法① line-height調整

line-height:1

ただし完全には消えません。

方法② paddingで調整

padding-top:-2px

デザインごとに微調整が必要になります。

方法③ transformで調整

transform:translateY(-2px)

かなりハック的です。

つまり根本的な解決ではなかったのです。

leading-trimの登場

そこで登場したのが

leading-trim

です。

これを使うとフォント余白を直接削除できます。

例

.title{
  leading-trim: both;
}

これだけで

[文字]

のように余白が削除されます。

text-edgeとは

text-edgeはトリミング基準を指定します。

例えば

text-edge: cap alphabetic;

意味は

上 = 大文字高さ
下 = ベースライン

です。

つまり

A

の高さを基準にトリミングします。

基本の書き方

基本形はこちらです。

.title{
  leading-trim: both;
  text-edge: cap alphabetic;
}

意味

上下の余白を削る
大文字高さを基準

よくある使用例

見出し

h1{
  font-size:48px;
  leading-trim:both;
  text-edge:cap alphabetic;
}

見出しの上下余白が消えます。

ボタン

button{
  leading-trim:both;
  text-edge:cap alphabetic;
}

これで文字が完全中央になります。

ナビゲーション

nav a{
  leading-trim:both;
}

メニューの高さが揃います。

Figmaとの相性

実はこのプロパティ、Figmaとの相性が非常に良いです。

理由はFigmaは基本的に文字の見た目サイズでレイアウトするからです。

一方Webはフォントメトリクスを基準にします。

そのため

Figma → Web

でズレます。

leading-trimを使うとFigmaと完全一致に近づきます。

デザインシステムへの影響

このプロパティはデザインシステムにも影響します

例えば

Before

line-height:1.4
padding調整

After

leading-trim
line-heightは純粋に行間

つまりタイポグラフィ設計がシンプルになります。

現在のブラウザ対応

2026年現在、まだ完全対応ではありません。

主に

• Chrome 一部対応
• Safari 未対応
• Firefox 未対応

です。

つまり本番での全面採用はまだ難しい状況です。

安全な書き方

将来対応に備えるなら

次の書き方がおすすめです。

.title{
  line-height:1;
}@supports (leading-trim: both){
  .title{
    leading-trim:both;
    text-edge:cap alphabetic;
  }
}

これなら

対応ブラウザ → leading-trim
未対応 → line-height

になります。

Web制作はどう変わるのか

leading-trimが普及すると

Web制作は大きく変わります。

主にこの3つ。

① ボタン中央問題が消える

文字が完全中央になります。

② Figmaとズレない

デザイン再現性が上がります。

③ タイポグラフィ設計が簡単

line-heightが

純粋な行間

になります。

今後のCSSの流れ

CSSは今

タイポグラフィ革命

が起きています。

例えば最近のCSS。

• text-wrap: balance
• text-box-trim
• text-box-edge
• leading-trim

つまり

文字レイアウトを細かく制御できる時代

になってきています。

まとめ

leading-trim / text-edgeは

フォント余白問題を解決する新しいCSS

です。

ポイントをまとめます。

• フォントには見えない余白がある
• Web制作ではこれがズレの原因
• leading-trimで余白を削除できる
• text-edgeで基準を指定できる
• Figmaとのズレが解消される
• まだブラウザ対応は限定的

今すぐ必須ではありませんが、

これからのCSSタイポグラフィの標準

になる可能性が高いプロパティです。