Как в проекте привести шрифты в порядок, если в нем сплошной беспорядок. Наш опыт

Недавно, мне были переданы для работы проекты, в которых надо было все упорядочить, привести к системе и освежить. Один проект уже был запущен и им пользовались реальные клиенты, поэтому здесь было важно не накосячить. Второй находился на стадии разработки и существовал только на деве.

Проблема

Проблема была в том, что в макетах не было никакой системы: отсутствовали компоненты/символы (Фигма/Скетч) для иконок и контролов, отсутствовали цветовые и шрифтовые стили, сеток тоже не было. В общем, бардак. И к тому же, используемый шрифт Poppins, был контрастным и в мелком кегле плохо читался и много брал на себя. Да и не нравился.

Чтобы просто примерить шрифт, необходимо было его менять в каждом месте на странице 🤯, при этом, конечно же, дизайн «поплывет». А затем повторить все сначала для нового пробного шрифта. Звучит совсем не оптимистично.

Решение

Но выход нашелся. Мы использовали расширение для хрома Font Changer, которое заменяет шрифт сайта сразу в браузере. И присматривались к шрифту сразу на реальном проекте.

Вот как можно «поиграться» со шрифтами Медиума:

Montserrat bold

Noto Serif

Последовательность действий

Механика по упорядочиваю шрифтов очень простая:

Находим варианты шрифтов на Google Fonts, к примеру.
Примеряем их к сайту с помощью расширения. Причем можем посмотреть сразу в разных кеглях и жирности. Выбираем оптимальный.
Описываем стили и назначаем их в Фигме.
Начинаем работать с разработчиком в паре. Сначала просто заменяем шрифт на сайте и не трогаем размеры и жирность. В итоге в браузере что-то выглядит хорошо, что-то мелко или крупно, но в целом, ничего не ломается.
Теперь девелопер описывает у себя стили для текста и межстрочных интервалов.
А мы приводим макеты в порядок страницу за страницей. И отдаем их постепенно разработчику на верстку.
И также постранично внедряем изменения на сайте. Так «причесываются» заголовки, настраиваются стили таблиц, фиксируются компоненты, стили поп-апов и т.д.

После этой работы можно уже менять шрифт одним нажатием кнопки и проводить редизайны.

Спасибо. Пишите, как у вас получилось.