概要

line-gap-overrideプロパティは、CSS @font-face ルール内で使用される記述子（descriptor）で、フォントのラインギャップ（行間）メトリクスを上書きします。

ラインギャップとは、フォントのアセンダー（上方延長部）とディセンダー（下方延長部）の外側に追加される垂直方向のスペースのことです。このプロパティを使用することで、フォールバックフォントとWebフォントの行間差を調整し、フォント切り替え時のレイアウトシフト（CLS: Cumulative Layout Shift）を軽減できます。

基本構文

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  /* ラインギャップを上書き */
  line-gap-override: normal;      /* デフォルト値 */
  line-gap-override: 10%;         /* フォントサイズの10% */
  line-gap-override: 0%;          /* ラインギャップなし */
}

値の詳細

値	説明
normal	ブラウザがフォントファイルに含まれるメトリクスを使用（デフォルト）
<percentage>	フォントサイズに対するパーセンテージで指定（0%以上の正の値）

フォントメトリクスの基礎知識

line-gap-overrideを理解するには、フォントメトリクスの基本を知る必要があります。

                    ┌─────────────────────────────────────┐
                    │         line-gap (上半分)           │ ← line-gap-override で制御
ascent-override →   ├─────────────────────────────────────┤
                    │                                     │
                    │         Åg  (アセンダーライン)      │ ← ascent-override で制御
                    │         --  (ベースライン)          │
                    │         gy  (ディセンダーライン)    │ ← descent-override で制御
                    │                                     │
descent-override →  ├─────────────────────────────────────┤
                    │         line-gap (下半分)           │ ← line-gap-override で制御
                    └─────────────────────────────────────┘

関連する3つの記述子

記述子	説明
ascent-override	アセンダー（上方延長部）の高さを上書き
descent-override	ディセンダー（下方延長部）の高さを上書き
line-gap-override	アセンダーとディセンダーの外側に追加されるスペースを上書き

実践的な使用例

例1: フォールバックフォントの調整

Webフォントとフォールバックフォントの行間を一致させて、レイアウトシフトを防ぎます。

/* Webフォント（Google Fontsなど）の定義 */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
}

/* フォールバックフォントをRobotoに合わせて調整 */
@font-face {
  font-family: 'Roboto-fallback';
  src: local('Arial');
  /* Robotoのメトリクスに合わせて調整 */
  ascent-override: 92.7734%;
  descent-override: 24.4141%;
  line-gap-override: 0%;
}

/* 使用例 */
body {
  font-family: 'Roboto', 'Roboto-fallback', sans-serif;
}

例2: ラインギャップを完全に削除

一部のフォントでは、予期しない行間が含まれている場合があります。

/* ラインギャップを0に設定 */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  line-gap-override: 0%;  /* 余分な行間を削除 */
}

/* CSSのline-heightで行間を制御 */
.text {
  font-family: 'CustomFont', sans-serif;
  font-size: 16px;
  line-height: 1.6;  /* 明示的に行間を設定 */
}

例3: 日本語Webフォントの調整

日本語フォントは欧文フォントと異なるメトリクスを持つことが多いです。

/* Noto Sans JPの定義 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('NotoSansJP-Regular.woff2') format('woff2');
  font-display: swap;
}

/* システムフォントをNoto Sans JPに合わせて調整 */
@font-face {
  font-family: 'NotoSansJP-fallback';
  src: local('Hiragino Sans'), local('Yu Gothic'), local('Meiryo');
  /* Noto Sans JPのメトリクスに合わせる */
  ascent-override: 109%;
  descent-override: 29%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

body {
  font-family: 'Noto Sans JP', 'NotoSansJP-fallback', sans-serif;
}

例4: size-adjustとの組み合わせ

size-adjustと組み合わせることで、より精密な調整が可能です。

/* フォールバックフォントを完全にカスタマイズ */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  /* Interフォントに合わせた調整 */
  size-adjust: 107.64%;      /* フォントサイズの調整 */
  ascent-override: 89.71%;   /* アセンダーの調整 */
  descent-override: 22.43%;  /* ディセンダーの調整 */
  line-gap-override: 0%;     /* ラインギャップの調整 */
}

@font-face {
  font-family: 'Inter';
  src: url('Inter.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'Inter', 'Inter-fallback', sans-serif;
}

CLS（Cumulative Layout Shift）の軽減

Before: 調整なし

/* 調整なしの場合、フォント切り替え時にレイアウトがシフトする */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'CustomFont', Arial, sans-serif;
}

フォント切り替え時の問題:

1. 最初にArialで表示される
2. CustomFontのダウンロード完了後、フォントが切り替わる
3. メトリクスの違いにより、テキストの高さが変わる
4. ページ全体のレイアウトがシフト（CLS発生）

After: line-gap-overrideで調整

/* フォールバックフォントのメトリクスを調整 */
@font-face {
  font-family: 'Arial-adjusted';
  src: local('Arial');
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 5%;
}

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'CustomFont', 'Arial-adjusted', sans-serif;
}

調整後の動作:

1. 調整されたArialで表示される
2. CustomFontのダウンロード完了後、フォントが切り替わる
3. メトリクスが一致しているため、テキストの高さは変わらない
4. レイアウトシフトなし

メトリクス値の計算方法

フォントのメトリクス値を計算するには、フォント解析ツールを使用します。

方法1: Font Style Matcherを使用

Font Style Matcher などのオンラインツールで視覚的に調整できます。

方法2: JavaScript APIを使用

// フォントメトリクスを取得する関数
async function getFontMetrics(fontFamily) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // フォントを設定
  ctx.font = `100px ${fontFamily}`;

  // メトリクスを取得
  const metrics = ctx.measureText('Ågy');

  return {
    actualBoundingBoxAscent: metrics.actualBoundingBoxAscent,
    actualBoundingBoxDescent: metrics.actualBoundingBoxDescent,
    fontBoundingBoxAscent: metrics.fontBoundingBoxAscent,
    fontBoundingBoxDescent: metrics.fontBoundingBoxDescent
  };
}

// 使用例
getFontMetrics('Arial').then(console.log);

方法3: Next.jsの@next/fontを使用

Next.jsでは、フォント最適化が組み込まれています。

// Next.js 13以降
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  // 自動的にフォールバックフォントが調整される
  adjustFontFallback: true,
});

export default function RootLayout({ children }) {
  return (
    <html lang="ja" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

主要フォントの推奨値

よく使われるフォントの調整値例です。

Google Fonts

/* Roboto用フォールバック（Arial） */
@font-face {
  font-family: 'Roboto-fallback';
  src: local('Arial');
  ascent-override: 92.77%;
  descent-override: 24.41%;
  line-gap-override: 0%;
}

/* Inter用フォールバック（Arial） */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 89.71%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* Open Sans用フォールバック（Arial） */
@font-face {
  font-family: 'OpenSans-fallback';
  src: local('Arial');
  ascent-override: 101.18%;
  descent-override: 27.73%;
  line-gap-override: 0%;
}

日本語フォント

/* Noto Sans JP用フォールバック */
@font-face {
  font-family: 'NotoSansJP-fallback';
  src: local('Hiragino Sans'), local('Yu Gothic');
  ascent-override: 109%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* M PLUS 1p用フォールバック */
@font-face {
  font-family: 'MPLUS1p-fallback';
  src: local('Hiragino Sans'), local('Yu Gothic');
  ascent-override: 115%;
  descent-override: 30%;
  line-gap-override: 0%;
}

ブラウザサポート

line-gap-overrideは比較的新しいプロパティですが、主要なブラウザでサポートされています。

ブラウザ	サポート開始バージョン
Chrome	87以降
Firefox	89以降
Safari	17以降
Edge	87以降
Opera	73以降

フォールバック対策

サポートされていないブラウザ向けには、@supportsを使用できます。

/* 基本のフォント定義 */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap;
}

/* サポートしているブラウザ向け */
@supports (line-gap-override: normal) {
  @font-face {
    font-family: 'CustomFont-fallback';
    src: local('Arial');
    line-gap-override: 5%;
    ascent-override: 95%;
    descent-override: 25%;
  }
}

よくある問題と解決策

問題1: 値の調整が難しい

解決策: 段階的に調整し、開発者ツールで確認

/* 段階的に値を変更して最適値を見つける */
@font-face {
  font-family: 'test-fallback';
  src: local('Arial');
  /* 0%から始めて、5%ずつ増やして確認 */
  line-gap-override: 0%;  /* → 5% → 10% → ... */
}

問題2: 複数のフォントウェイトがある

解決策: ウェイトごとに定義

/* Regular */
@font-face {
  font-family: 'CustomFont-fallback';
  src: local('Arial');
  font-weight: 400;
  line-gap-override: 5%;
}

/* Bold */
@font-face {
  font-family: 'CustomFont-fallback';
  src: local('Arial Bold');
  font-weight: 700;
  line-gap-override: 5%;
}

問題3: 異なるOSでフォールバックが異なる

解決策: 複数のローカルフォントを指定

@font-face {
  font-family: 'fallback-font';
  /* macOS, Windows, Linuxのフォールバックを順番に指定 */
  src: local('SF Pro Text'),      /* macOS */
       local('Segoe UI'),         /* Windows */
       local('Ubuntu'),           /* Linux */
       local('sans-serif');
  line-gap-override: 5%;
}

まとめ

line-gap-overrideプロパティは、Webフォントのパフォーマンス最適化において重要な役割を果たします。

主なポイント:

• @font-face内でフォントのラインギャップを上書きできる
• フォールバックフォントとWebフォントの行間を一致させることでCLSを軽減
• ascent-override、descent-override、size-adjustと組み合わせて使用
• 値はパーセンテージで指定（フォントサイズに対する割合）
• Next.jsなどのフレームワークでは自動調整機能が利用可能

適切なフォントメトリクスの調整により、ユーザー体験を損なわない快適なWebサイトを構築しましょう。

参考文献

• line-gap-override - CSS: カスケーディングスタイルシート | MDN
• CSS Fonts Module Level 4 | W3C
• Optimize Cumulative Layout Shift | web.dev
• Improved font fallbacks | web.dev