Буквица без боли: как свойство initial-letter меняет правила игры
Привет! Ты наверняка видел эти пафосные журнальные верстки, где первая буква первого абзаца занимает сразу несколько строк. Дизайнеры обожают этот прием — он мгновенно превращает унылый лонгрид в стильное издание уровня «The New Yorker». Но для нас, фронтенд-разработчиков, реализация этой «красоты» годами была сплошной головной болью. Мы пытались выровнять базовую линию, боролись с отступами и проклинали разные рендеры шрифтов. Пришло время выдохнуть: в современной верстке появилось свойство, которое делает всё за нас.
Как мы страдали раньше
До появления нормального стандарта создание буквицы напоминало попытку собрать двигатель спорткара из палок и изоленты. Классический подход выглядел примерно так: берем псевдоэлемент ::first-letter, вешаем на него float: left, задираем font-size до небес и начинаем «пляски с бубном» вокруг line-height и margin.
Проблема в том, что разные шрифты имеют разные выносные элементы и высоту знаков. Стоило пользователю поменять размер шрифта или тебе — внедрить отзывчивую типографику с функцией clamp(), как вся конструкция рассыпалась. Буква либо «улетала» выше текста, либо оставляла под собой гигантскую дыру. Это был хрупкий костыль, который ломался от любого чиха.
Как делать правильно в 2026 году
Современный подход — это использование свойства initial-letter. Оно сообщает браузеру две вещи: какой высоты должна быть буква (в строках текста) и насколько глубоко она должна «провалиться» в текст. Больше никаких флоатов и ручного подбора пикселей. Браузер сам вычисляет размер шрифта и идеальное выравнивание по базовой линии.
Свойство принимает два значения:
- Первое (size): сколько строк текста должна занимать буква по высоте.
- Второе (sink): на сколько строк буква должна опуститься вниз (необязательный параметр, по умолчанию равен первому).
Кстати, если ты решишь стилизовать буквицу сложными цветами или градиентами, не забудь проверить, как на нее влияют другие стили, чтобы не запутаться, как правильно работать со специфичностью каскада, ведь псевдоэлементы имеют свои нюансы в приоритетах.
Готовый сниппет кода
Для работы в Safari пока требуется префикс -webkit-, но Chrome и Edge уже отлично понимают стандартное свойство. Вот как выглядит чистый и рабочий код:
.article-text::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
font-weight: bold;
margin-right: 1rem;
color: #e63946;
}
/* Если хотим, чтобы буква торчала вверх над текстом */
.article-special::first-letter {
-webkit-initial-letter: 3 2;
initial-letter: 3 2;
}
Частая ошибка новичков
Главный «капкан», в который попадают мидлы при использовании initial-letter — это попытка оставить старые свойства line-height или float внутри ::first-letter. Запомни: initial-letter берет на себя всё управление геометрией символа. Если ты добавишь туда жесткий line-height, алгоритм расчета базовой линии сойдет с ума, и ты получишь те же кривые отступы, от которых мы пытались уйти.
Также не забывай, что свойство работает только для элементов с display: inline или block (и их производных). Если ты вдруг применишь его к элементу, который внутри превращен в flex-контейнер, магии может не случиться. Используй псевдоэлемент по назначению, и твоя верстка будет выглядеть идеально на любом устройстве.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!