【CSS初心者向け】Webフォント行間調整の疑問を徹底解消！「@font-face.line-gap-override」の使い方からサンプルコードまで

"@font-face.line-gap-override"は、CSSの@font-face規則におけるプロパティの一つであり、Webフォントの行間を調整するために使用されます。"Miscellaneous"カテゴリに属し、フォントのメトリクスを微調整するためのオプションの一つです。

目的

"@font-face.line-gap-override"の主な目的は以下の通りです。

フォールバックフォントの行間を調整する
ブラウザがprimary fontを読み込めなかった場合に表示されるフォールバックフォントの行間を調整することができます。
異なるフォント間の行間を揃える
複数のWebフォントを使用する場合、それぞれの行間を揃えることで、一貫性のあるレイアウトを実現することができます。
フォント固有の行間を調整する
デフォルト的行間がデザインに合わない場合などに、より適切な行間を設定することができます。

構文

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 0.9; /* 行間を90%に設定 */
}

値

<percentage>
指定されたパーセンテージの行間を設定します。
normal
フォントファイルに指定された行間を使用します。

注意点

行間を調整しすぎることで、文章の可読性が損なわれる可能性があります。調整する際には、慎重に検討する必要があります。
"@font-face.line-gap-override"は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、意図した効果が得られない可能性があります。

例

以下の例では、"MyFont"というWebフォントの行間を90%に設定しています。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 0.9;
}

.my-text {
  font-family: 'MyFont';
}

このCSSを適用すると、".my-text"クラスを持つすべての要素の行間が90%になります。

"@font-face.line-gap-override"以外にも、フォントのメトリクスを調整するためのプロパティがいくつか用意されています。

font-size-adjust
フォントサイズの調整方法を指定します。
descent-override
下降量を調整します。
ascent-override
上昇量を調整します。

これらのプロパティを組み合わせることで、より精度の高いフォント調整を行うことができます。

例1：フォント固有の行間を調整する

この例では、"MyFont"というWebフォントの行間を1.2emに設定しています。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 1.2em; /* 行間を1.2emに設定 */
}

.my-text {
  font-family: 'MyFont';
}

例2：異なるフォント間の行間を揃える

この例では、"MyFont1"と"MyFont2"という2つのWebフォントの行間を1.5emに揃えます。

@font-face {
  font-family: 'MyFont1';
  src: url('MyFont1.woff2') format('woff2'),
       url('MyFont1.woff') format('woff');
  line-gap-override: 1.5em; /* 行間を1.5emに設定 */
}

@font-face {
  font-family: 'MyFont2';
  src: url('MyFont2.woff2') format('woff2'),
       url('MyFont2.woff') format('woff');
  line-gap-override: 1.5em; /* 行間を1.5emに設定 */
}

.text1 {
  font-family: 'MyFont1';
}

.text2 {
  font-family: 'MyFont2';
}

例3：フォールバックフォントの行間を調整する

この例では、ブラウザが"MyFont"を読み込めなかった場合に表示されるフォールバックフォントの行間を1emに設定します。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 1em; /* 行間を1emに設定 */
}

.my-text {
  font-family: 'MyFont', Arial, sans-serif; /* MyFontが読み込めなかった場合はArialまたはsans-serifフォントを使用 */
}

これらの例はあくまでも基本的な使用方法です。実際の使用例では、必要に応じて様々なプロパティを組み合わせて使用することができます。

以下の例では、"@font-face.line-gap-override"と他のフォントメトリクスプロパティを組み合わせて使用しています。

例4：フォントの行間と上下余白を調整する

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 1.2em; /* 行間を1.2emに設定 */
  ascent-override: 0.8em; /* 上昇量を0.8emに設定 */
  descent-override: 0.4em; /* 下降量を0.4emに設定 */
}

.my-text {
  font-family: 'MyFont';
}

この例では、"MyFont"というWebフォントの行間を1.2emに設定し、さらに上昇量を0.8em、下降量を0.4emに設定しています。これにより、フォントの上下余白を調整することができます。

例5：フォントサイズを調整せずに、行間のみを調整する

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  line-gap-override: 1.5; /* 行間を1.5倍に設定 */
  font-size-adjust: none; /* フォントサイズを調整しない */
}

.my-text {
  font-family: 'MyFont';
}

"@font-face.line-gap-override"は、Webフォントの行間を調整するための便利なプロパティですが、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、意図した効果が得られない可能性があります。

そこで、ここでは、"@font-face.line-gap-override"の代替方法として、以下の3つの方法をご紹介します。

行間を直接設定する

最も簡単な代替方法は、対象となる要素の行間を直接CSSで設定することです。

.my-text {
  line-height: 1.5em; /* 行間を1.5emに設定 */
}

この方法であれば、ブラウザの互換性を気にせずに、確実に意図した行間を設定することができます。

注意点

行間を直接設定すると、フォントメトリクスに基づいて自動的に調整される行間とは異なる場合があります。
この方法は、特定の要素のみに行間を適用したい場合にのみ有効です。すべてのWebフォントに行間を適用したい場合は、他の方法を使用する必要があります。

"font-stretch"プロパティを使用する

"font-stretch"プロパティは、フォントの横幅を伸縮させるために使用できますが、行間を調整するのにも利用できます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  font-stretch: 105%; /* 行間を5%広げる */
}

.my-text {
  font-family: 'MyFont';
}

この方法であれば、"@font-face.line-gap-override"よりも多くのブラウザでサポートされています。

注意点

行間だけでなく、フォントの横幅も変化するため、レイアウトが崩れる可能性があります。
"font-stretch"プロパティは、すべてのブラウザで同じように動作するわけではありません。古いブラウザでは、意図した効果が得られない可能性があります。

"letter-spacing"と"word-spacing"プロパティを組み合わせて使用する

"letter-spacing"プロパティと"word-spacing"プロパティを組み合わせて使用することで、擬似的な行間調整を行うことができます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  letter-spacing: normal;
  word-spacing: 0.2em; /* 文字間のスペースを0.2emに設定 */
}

.my-text {
  font-family: 'MyFont';
}

この方法であれば、比較的古いブラウザでも動作しますが、"@font-face.line-gap-override"や"font-stretch"プロパティに比べて柔軟性に欠けます。

注意点

行間だけでなく、文字間と単語間のスペースも変化するため、レイアウトが崩れる可能性があります。

"@font-face.line-gap-override"の代替方法は、状況によって最適な方法が異なります。

擬似的な行間調整で十分な場合は、"letter-spacing"と"word-spacing"プロパティを組み合わせて使用します。
より多くのブラウザでサポートされている方法が必要な場合は、"font-stretch"プロパティを使用します。
ブラウザ互換性を最優先に考える場合は、行間を直接設定する方法がおすすめです。