Я занимаюсь фронтенд-разработкой около 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