概要

descent-overrideは、CSSでフォントのディセント値（文字のベースラインから最も低い部分までの距離）をカスタマイズするためのプロパティです。このプロパティを使用すると、テキストの下方向のスペースを調整でき、異なるフォント間での不揃いな行間を整えることができます。例えば、複数のフォントを使ったデザインで、下側のマージンやパディングに影響を与える部分の調整に役立ちます。

descent-overrideの使い方

descent-overrideプロパティは、フォントのディセント値を上書きし、テキストの下側の余白や行間を調整します。この設定は、フォントのデザインがもたらすデフォルトのディセント値を変更できるため、特定のデザイン要件に合わせた細かい調整が可能になります。

基本的な構文

font: <フォントサイズ> / <行の高さ> <フォントファミリー>;
font-metrics-overrides: descent-override <値>;

値の指定方法

  • normal: デフォルトのディセント値を使用します（初期値）。
  • 数値: フォントサイズに対する割合で指定します（例: 0.2、0.5など）。この数値は、フォントのディセントの調整を行うための基準になります。

使用例

フォントのディセント値をカスタマイズ

以下の例では、descent-overrideを使用して、フォントのディセント値を変更する方法を示します。テキストの垂直位置が変わることで、デザインのバランスを取ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>descent-overrideのデモ</title>
<style>
p {
  font: 16px/1.5 'Arial', sans-serif;
  font-metrics-overrides: descent-override 0.5;
}
</style>
</head>
<body>
<h2>descent-overrideを使ったフォント調整</h2>
<p>このテキストは、ディセント値がデフォルトの50%に設定されています。</p>
</body>
</html>

このコードをブラウザで実行すると、指定したフォントのディセント値が0.5に調整され、テキストの下方向のスペースが変わります。

ブラウザ対応

descent-overrideプロパティは、現在のところすべてのモダンブラウザでサポートされているわけではなく、特定のバージョン以降でのみ利用可能です。使用前には、ブラウザの対応状況を確認することをおすすめします。

  • Chrome: 対応予定（現在、試験的機能）
  • Firefox: 未対応
  • Safari: 対応予定（現在、試験的機能） 多くのブラウザで試験的な実装段階であるため、安定した使用のためにはバージョン確認が必要です。

使用する際の注意点

  1. デザインの調整に注意
    descent-overrideを使用することで、行間のバランスが大きく変わる可能性があります。デザイン全体の見た目を確認しながら調整することが重要です。
  2. アクセシビリティへの配慮
    ディセント値を過度に調整すると、読みづらくなる場合があります。特にディセントが大きくなると、文字の密度が高まり、視認性が低下することがありますので、適度な値で設定しましょう。
  3. フォールバックの設定
    descent-overrideがサポートされていないブラウザもあるため、フォールバックの設定を考慮する必要があります。例えば、対応していないブラウザではデフォルトの設定が適用されるようにしておくと、デザインの一貫性が保たれます。

まとめ

descent-overrideは、フォントのディセント値を調整することで、テキストの下側の空間をカスタマイズし、行間のバランスを整えるための有効なツールです。特に複数フォントを使用したデザインで行間が不揃いになりがちな場合に便利です。ただし、デザインへの影響が大きいため、設定値を調整しながら慎重に適用する必要があります。

参照:

descent-override（`CSS`） - MDN Web Docs