leading-trimとtext-edgeでタイポグラフィを美しく整えるCSSテクニック

Posted on by

Webデザインにおいて「文字の見た目」は重要な要素です。フォントやサイズだけでなく、
行間の取り方や揃え方など、細部にこだわることでコンテンツの可読性や美しさが格段に向上します。
そんな中、近年注目されているのがCSSの実験的プロパティである leading-trim と text-edge。
これらを使えば、今まで難しかったピクセル単位でのタイポグラフィの精密な制御が可能になります。

この記事では、それぞれのプロパティがどのような効果を持ち、
どのような場面で活用できるのかを詳しく解説します。

leading-trimとは？

▶ 行間の「見えない余白」を削る

通常、Web上のテキストはフォントの仕様によって、文字の上下に目に見えない余白が付いています。
これはフォントのアセンダ（上に突き出た部分）やディセンダ（下に突き出た部分）
を考慮して行間を取っているためです。

例えば、以下のようなケースを考えてみましょう

p {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 24px;
}

この設定では、実際の文字の高さに対して上下に余白が追加されており、行間がゆったりして見えます。
この余白が悪いわけではありませんが、デザインによっては上下のマージンが過剰に見えることもあります。

ここで活躍するのが leading-trim です。

p {
  leading-trim: both;
}

この指定を加えることで、テキストの上下の余白をトリミングし、
実際の文字サイズにピタッと合った行ボックスになります。
行間を詰めたいデザインや、パーツの高さを正確に合わせたい時に便利です。

▶ 指定できる値

  • none（初期値）：余白をそのまま維持。
  • start：上側の余白のみをカット。
  • end：下側の余白のみをカット。
  • both：上下の余白を両方カット。

text-edgeとは？

▶ テキストの「揃え位置」を制御する

text-edge は、テキストのどの部分を基準としてボックスの端を揃えるかを指定するプロパティです。

通常、CSSでは vertical-align や line-height を使ってテキストの揃えを調整しますが、
フォントごとに高さの基準が異なるため、完璧に揃えるのが難しい場合があります。
特に大文字だけの見出しなどでは、上端がバラついて見えることも。

ここで登場するのが text-edge の cap 値です。

h1 {
  text-edge: cap;
}

この指定をすると、大文字の上端（Cap Height）を基準にテキストを揃えます。
つまり、フォントのサイズやスタイルに関係なく、見た目の高さを統一することが可能になります。

▶ 指定できる値の例

  • leading：行ボックスの上下に余白を含めた基準。
  • cap：大文字の上端を基準。
  • alphabetic：文字のベースライン基準（従来のCSSのデフォルト）。
  • text：テキスト全体の高さに基づく。

実際に使ってみる

以下は、leading-trim と text-edge を併用して、見出しと本文のラインをぴったり揃える実例です。

<style>
  h1 {
    font-size: 48px;
    line-height: 1;
    leading-trim: both;
    text-edge: cap;
    margin: 0;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
    leading-trim: both;
    text-edge: cap;
    margin: 0;
  }
</style>

<h1>Design System</h1>
<p>テキストの上下余白をなくして揃えると、全体のバランスが引き締まって見えます。</p>

これにより、見出しや本文が正確に上下整列され、モジュール間の余白調整も非常にスムーズになります。

注意点とブラウザ対応

対応状況（2025年6月現在）

ブラウザleading-trimtext-edge
Safari（v17以降）✅ 対応✅ 対応
Chrome（Canary）🧪 試験的対応中🧪 試験的対応中
Firefox❌ 未対応❌ 未対応
  • 実際に使用する場合は、以下のように @supports を使ってフォールバックを用意するのが安全です：
@supports (leading-trim: both) {
  p {
    leading-trim: both;
    text-edge: cap;
  }
}

どんな場面で使える？

  • デザインシステムのコンポーネントで、高さを正確に揃えたいとき
  • バナーやアイキャッチのテキストの整列を美しくしたいとき
  • アイコン＋テキストの組み合わせで、上下中央にきれいに揃えたいとき
  • PDFライクな見た目をWeb上で再現したいとき

まとめ：タイポグラフィを一段上の仕上がりに

leading-trim と text-edge は、まだ一部ブラウザのみの対応に留まっていますが、
今後のCSSタイポグラフィ表現を大きく変える可能性を秘めています。
従来の「なんとなく合っている」ではなく、
意図通りにピクセル単位で整った文字表示を実現できるようになるのは、
デザイナー・コーダーにとって大きな前進です。

ブラウザ対応が進むにつれて、より精密で一貫性のあるレイアウト構築が可能になるでしょう。
今のうちに使い方を覚えておくことで、将来のWebデザインに役立てられるはずです。