Продвинутая типографика: ligatures, kerning, font-variant и другие свойства

🔠 Типографика — это магия, а не просто текст

Текст — это не просто чёрные буковки на белом фоне. Это живая материя, которая дышит, танцует и поёт, если знать, как ей управлять. Давайте разберёмся, как превратить обычный текст в произведение искусства с помощью CSS.

✨ Лигатуры: когда буквы влюбляются друг в друга

Лигатуры — это специальные символы, которые заменяют пары или тройки букв, сливающихся некрасиво. Например, fi или fl в некоторых шрифтах выглядят как один символ.

.text-with-ligatures {
  font-variant-ligatures: common-ligatures; /* Включаем стандартные лигатуры */
}

.text-no-ligatures {
  font-variant-ligatures: none; /* Выключаем все лигатуры */
}

💡 Совет: Лигатуры особенно важны для шрифтов с засечками (serif). Попробуйте сравнить font-variant-ligatures: normal и none в шрифте Georgia — разница будет очевидной!

🔍 Кернинг: магия расстояний между буквами

Кернинг — это регулировка пространства между конкретными парами букв. Например, AV без кернинга выглядит разобщённо, а с ним — гармонично.

.kerning-example {
  font-kerning: normal; /* Автоматический кернинг (по умолчанию) */
}

.no-kerning {
  font-kerning: none; /* Выключаем кернинг — буквы «разбегаются» */
}

🎯 Когда отключать кернинг?

Если шрифт плохо спроектирован и автоматический кернинг «ломает» текст.
Для декоративных эффектов (например, в логотипах).

🎭 font-variant: маленькие, но гордые возможности

Свойство font-variant позволяет включать альтернативные формы символов:

.small-caps {
  font-variant: small-caps; /* Капитель — строчные буквы в виде уменьшенных заглавных */
}

.titling {
  font-variant: titling-caps; /* Специальные заглавные для заголовков (редко поддерживается) */
}

⚠️ Важно: Не все шрифты поддерживают small-caps. Если шрифт не имеет капители, браузер может сымитировать её, просто уменьшив обычные заглавные буквы (это выглядит некрасиво!).

📐 Оптическое выравнивание: font-optical-sizing

Некоторые современные шрифты (например, Variable Fonts) могут адаптировать форму символов в зависимости от размера:

.optical-sizing {
  font-optical-sizing: auto; /* Буквы «подстраиваются» под размер (если шрифт поддерживает) */
}

🧪 Продвинутые примеры: комбинируем свойства

Давайте создадим текст, который выглядит по-настоящему профессионально:

.professional-text {
  font-family: "Crimson Text", serif; /* Красивый шрифт с засечками */
  font-variant-ligatures: common-ligatures discretionary-ligatures; /* Все лигатуры */
  font-kerning: normal; /* Включаем кернинг */
  font-variant: small-caps; /* Капитель для строчных */
  font-size: 1.5rem;
  line-height: 1.6;
}

Что получится:

Буквы fi, fl и другие будут сливаться в лигатуры.
Кернинг сделает расстояния между буквами естественными.
Строчные буквы превратятся в элегантную капитель.

🏆 Чек-лист: как проверить типографику?

Лигатуры: Проверьте пары fi, fl, ff — они должны выглядеть едино.
Кернинг: Посмотрите на сочетания AV, To, Wa — пробелы должны быть равномерными.
Капитель: Убедитесь, что small-caps не имитируется, а есть в шрифте.
Читаемость: Если текст «режет» глаза, возможно, проблема в отсутствии font-optical-sizing.

🚀 Вывод: типографика — это не просто «текст»

Современный CSS даёт нам инструменты, которые раньше были доступны только в профессиональных редакторах вроде InDesign. Используйте их, и ваш текст зазвучит по-новому!