Я думаю, переход на шрифты без засечек был как будто выдернуть ковер из захламленной комнаты – все стало намного чище, и иерархия сразу бросается в глаза. Шрифты с засечками только добавляют лишнего шума, эти ненужные завитушки, которые отвлекают мое внимание. А с шрифтами без засечек, как будто пространство вокруг расширяется, интерфейс кажется более воздушным, и я могу различать вес шрифта, не теряя рассудок. Но если один пиксель не на месте, я удалю часы работы – потому что даже малейшее визуальное несоответствие ощущается как беспорядок.

Обычно я выбираю Inter или Helvetica Neue – они такие лаконичные. И стараюсь использовать очень светлую цветовую гамму: фон почти белый, #FFFFFF, а текст – темно-серый, #333333. Когда делаю макеты, часто подключаю Tailwind или Material Design, потому что они позволяют выстраивать слои в логичной иерархии и оставлять достаточно свободного пространства. Ненавижу, когда пиксель сбивается с курса, поэтому всегда проверяю кернинг с разработчиком. Если что-то не так – удаляю кусок кода и начинаю заново. Так и получается держать себя в руках и чтобы интерфейс выглядел продуманным.

Да, я начала экспериментировать со шрифтами-переменными в Tailwind. Просто добавляю @font-face с --variable для веса, а потом использую классы w–[…] – так можно регулировать толщину шрифта от 300 до 700 в одном файле, и я могу менять акценты, не скачивая каждый раз новый шрифт. Важный момент – держать глифы в нейтральном, неконтрастном тоне, например, #212121, чтобы небольшое изменение не выглядело опечаткой. Мне нравится, как это делает интерфейс аккуратным, а код – чистым: никакого лишнего мусора, только одна переменная, которая объединяет всё.

Я попробовала на нескольких экранах, и пока я использую всего две-три толщины, всё работает быстро – один файл для скачивания. Если загрузить всю ось толщин, файл раздувается, и на первой отрисовке начинается небольшая задержка. Поэтому я обычно ограничиваюсь обычным и полужирным начертаниями и позволяю браузеру сам делать переходы. Так и получается компактный пакет, и интерфейс работает плавно.

У меня есть крошечная шпаргалка по весам в Notion – просто таблица с названием, hex-кодом и значением веса. Когда я что-то меняю в компоненте, я заменяю старый класс веса на новый, потом обновляю страницу и смотрю вычисленный стиль в DevTools, чтобы понять, что происходит. Если вес кажется слишком большим, я возвращаю его к нормальному значению. В финальной сборке я оставляю только диапазоны 300, 400 и 700 – остальное закомментировано. Так бандл получается легковесным и я сразу вижу, какие веса выживают после каждой итерации, не засоряя код.