Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

Включить или выключить лигатуры

Самое простое, что можно сделать, — полностью отключить или включить лигатуры. Это полезно, если, например, вы хотите, чтобы текст в интерфейсе выглядел одинаково в разных шрифтах, или наоборот, хотите сохранить «чистое» начертание без украшений. 

/* Запретить все лигатуры */
p {
  font-variant-ligatures: none;
}

/* Вернуть стандартное поведение (лигатуры по умолчанию) */
p {
  font-variant-ligatures: normal;
}

По умолчанию большинство современных шрифтов и браузеров применяют стандартные лигатуры, но стоит помнить, что это «по умолчанию» может немного различаться в разных движках рендеринга. Поэтому, если у вас строгие требования к типографике, лучше явно указывать нужное значение.

Тонкая настройка

Иногда хочется управлять не всеми лигатурами сразу, а только некоторыми их типами. CSS даёт такую возможность:

  • common-ligatures / no-common-ligatures — стандартные, часто используемые лигатуры (fi, fl, ffi).
  • discretionary-ligatures / no-discretionary-ligatures — дополнительные декоративные, применяются по усмотрению дизайнера.
  • historical-ligatures / no-historical-ligatures — исторические формы, которые сегодня встречаются редко.
/* Только стандартные лигатуры */
p {
  font-variant-ligatures: common-ligatures;
}

/* Включаем декоративные, но выключаем исторические */
h1 {
  font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures;
}

/* Оставляем только исторические */
blockquote {
  font-variant-ligatures: no-common-ligatures historical-ligatures;
}

Демонстрация в браузере

Чтобы увидеть разницу в живую, создадим маленький HTML-файл. В первом абзаце включим лигатуры, во втором — отключим. 

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример font-variant-ligatures</title>
  <style>
    p {
      font-family: "Times New Roman", serif;
      font-size: 2rem;
    }
    .with-ligatures {
      font-variant-ligatures: normal;
    }
    .no-ligatures {
      font-variant-ligatures: none;
    }
  </style>
</head>
<body>
  <p class="with-ligatures">Office, fireplace, affluent</p>
  <p class="no-ligatures">Office, fireplace, affluent</p>
</body>
</html>

Если шрифт поддерживает лигатуры, то в первом абзаце «fi» и «fl» сольются в единый глиф, а во втором останутся отдельными буквами. Эффект особенно заметен на большом кегле и в шрифтах с хорошей проработкой OpenType-функций.

Когда использовать, а когда нет

Лигатуры хорошо подходят для заголовков, цитат, промо-блоков и длинных текстов, где важна эстетика. Они придают тексту завершённость, делают его более плавным. Но в интерфейсах с мелким шрифтом или в технических текстах (например, код, команды терминала) лигатуры могут только мешать: буквы будут выглядеть иначе, чем ожидает пользователь.

Иногда дизайнеры отключают лигатуры специально, чтобы подчеркнуть индивидуальность каждой буквы. Например, в лого или на кнопках, где важна читаемость на микроразмере.

Итог

font-variant-ligatures — это небольшой, но полезный инструмент для тонкой настройки типографики в вебе. Он помогает либо подчеркнуть эстетику текста, либо, наоборот, сделать его максимально нейтральным. Если вы работаете с дизайном, где важны детали, обязательно поэкспериментируйте с разными типами лигатур — результат может удивить.