概要

font-variant-ligaturesは、CSSでリガチャ（合字）の表示を制御するプロパティです。リガチャは、2つ以上の文字が結合して一つのデザイン要素として表示される特殊なフォント処理で、タイポグラフィの美しさを高めるために使われます。このプロパティを使用すると、特定のリガチャを有効化または無効化し、テキストの見た目を調整することができます。

font-variant-ligaturesの基本構文

.element {
  font-variant-ligatures: normal;
}

パラメータ

  • normal: ブラウザのデフォルト設定に従い、フォントに含まれるリガチャを適用します。
  • none: すべてのリガチャを無効化します。
  • common-ligatures: 標準的なリガチャ（例: “fi” や “fl”）を有効化します。
  • no-common-ligatures: 標準的なリガチャのみを無効化します。
  • discretionary-ligatures: オプションのリガチャを有効化します。デザイン的に工夫されたリガチャが表示される場合があります。
  • no-discretionary-ligatures: オプションのリガチャを無効化します。
  • historical-ligatures: 歴史的に使用されたリガチャを有効化します。
  • no-historical-ligatures: 歴史的リガチャを無効化します。
  • contextual: 文脈的なリガチャを有効化します。テキストのコンテキストに基づいて表示されるリガチャが適用されます。
  • no-contextual: 文脈的リガチャを無効化します。

リガチャとは？

リガチャ（合字）とは、隣り合う文字が一つの結合された形として描画されるフォント技術です。例えば、“fi” や “fl” などがリガチャの代表的な例です。リガチャは、文字のデザインが重なったり視覚的に煩雑になるのを防ぎ、より美しく読みやすいテキストを作るために利用されます。

font-variant-ligaturesの使い方

1. 標準のリガチャを無効にする

リガチャがデザインや可読性を損なう場合には、font-variant-ligatures: none;を使用してリガチャを無効化することができます。

.element {
  font-variant-ligatures: none;
}

この設定を適用すると、“fi”や”fl”などのリガチャが解除され、それぞれの文字が通常の形で表示されます。

2. 標準的なリガチャのみを有効にする

標準的なリガチャ（common-ligatures）のみを有効化したい場合は、次のように指定します。

.element {
  font-variant-ligatures: common-ligatures;
}

この指定をすると、標準的なリガチャ（“fi”や”fl”など）が適用されますが、歴史的リガチャやオプションのリガチャは無効化されます。

3. オプションのリガチャを有効にする

オプションのリガチャ（discretionary-ligatures）も表示したい場合には、以下の設定を使用します。

.element {
  font-variant-ligatures: discretionary-ligatures;
}

オプションのリガチャは、より装飾的で、特定のデザインフォントにしか含まれないことが多いですが、ユニークで美しい表示を可能にします。

4. 文脈的リガチャを有効にする

文脈に基づくリガチャを有効にしたい場合には、contextualを使用します。

.element {
  font-variant-ligatures: contextual;
}

この設定により、フォントのリガチャがテキストの文脈に応じて適切に適用され、より自然な見た目のテキストを提供します。

使用例

以下は、font-variant-ligaturesを使った具体的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .normal-ligatures {
      font-variant-ligatures: normal;
    }
    .no-ligatures {
      font-variant-ligatures: none;
    }
    .discretionary-ligatures {
      font-variant-ligatures: discretionary-ligatures;
    }
  </style>
  <title>font-variant-ligaturesの例</title>
</head>
<body>
  <p class="normal-ligatures">fi fl ff</p>
  <p class="no-ligatures">fi fl ff</p>
  <p class="discretionary-ligatures">fi fl ff</p>
</body>
</html>
  • normal-ligaturesのクラスでは、ブラウザのデフォルト設定に従って標準のリガチャが適用されます。
  • no-ligaturesのクラスでは、すべてのリガチャが無効化され、それぞれの文字が独立して表示されます。
  • discretionary-ligaturesのクラスでは、オプションのリガチャが有効になり、特定のフォントによっては独自の合字が表示されることがあります。

font-variant-ligaturesの実用的なポイント

  • デザイン性の向上: リガチャを適切に使うことで、タイポグラフィの美しさを高め、読みやすさを向上させることができます。特に印刷物のようなデザインにはリガチャが有効です。
  • リガチャの制御: リガチャを有効化するか、無効化するかを自由に選べるため、デザインやプロジェクトの要件に合わせた細かい調整が可能です。
  • フォントの選択: リガチャが利用できるかどうかはフォントに依存するため、フォント選択時にリガチャがどの程度サポートされているか確認することが重要です。

注意点

  • フォント依存: リガチャの有効化は使用しているフォントに依存します。全てのフォントがリガチャに対応しているわけではないため、リガチャをサポートしているフォントを選択する必要があります。
  • ブラウザ対応: font-variant -ligaturesは、ほとんどのモダンブラウザでサポートされていますが、古いブラウザではサポートされていない可能性があります。必ずブラウザの対応状況を確認してください。

まとめ

font-variant-ligaturesは、テキスト内のリガチャ（合字）を制御するための強力なCSSプロパティです。リガチャを有効化することで、タイポグラフィの見た目を美しく整え、リーダビリティを向上させることができます。デザインのニーズに応じてリガチャを柔軟に制御し、テキストの表現力を高めるためにぜひ活用してください。

参照:

``CSS`` font-variant-ligatures property | MDN