Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами

Я занимаюсь фронтенд-разработкой около 9 лет, но, к своему стыду, ни разу не «игрался со шрифтами». Во всех проектах, над которыми я работал, был либо подключён какой-то шрифт из Google Fonts, либо всё уже было настроено, либо использовался просто какой-то дефолтный шрифт из шаблона.

Но вот шрифты всё-таки меня настигли. Во время редизайна дизайнер решил, что Nunito уже не модно, и предложил перейти на Inter. Когда мы обновили шрифт, наш интерфейс разнесло во все стороны 😅 Inter оказался заметно больше.

Сначала мы решили пойти самым простым путём: поменять значения наших дизайн-токенов и сделать их на 1px меньше, чтобы компенсировать переход на новый шрифт. Но это не сработало: наш конструктор позволяет указывать кастомные шрифты, поэтому такой вариант отпал.

И вот после очередного сеанса гугления промптинга ChatGPT подсказал мне, что есть такое свойство, как size-adjust, которое позволяет уменьшить весь шрифт. Размеры и отступы всё равно, конечно, немного отличаются, но так можно избежать изменения дизайн-токенов.

Для наглядности это выглядит примерно так:

@font-face {

font-family: Inter;

font-style: normal;

font-weight: 100 900;

font-display: swap;

size-adjust: 93%;

src: url('https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf') format('truetype');

}

А ещё я собрал небольшую демку, где можно поиграться с этим свойством.

👍 — если знали про size-adjust

❤️ — если узнали что-то новое

#css