Как в проекте привести шрифты в порядок, если в нем сплошной беспорядок. Наш опыт
Недавно, мне были переданы для работы проекты, в которых надо было все упорядочить, привести к системе и освежить. Один проект уже был запущен и им пользовались реальные клиенты, поэтому здесь было важно не накосячить. Второй находился на стадии разработки и существовал только на деве.
Проблема
Проблема была в том, что в макетах не было никакой системы: отсутствовали компоненты/символы (Фигма/Скетч) для иконок и контролов, отсутствовали цветовые и шрифтовые стили, сеток тоже не было. В общем, бардак. И к тому же, используемый шрифт Poppins, был контрастным и в мелком кегле плохо читался и много брал на себя. Да и не нравился.
Чтобы просто примерить шрифт, необходимо было его менять в каждом месте на странице 🤯, при этом, конечно же, дизайн «поплывет». А затем повторить все сначала для нового пробного шрифта. Звучит совсем не оптимистично.
Решение
Но выход нашелся. Мы использовали расширение для хрома Font Changer, которое заменяет шрифт сайта сразу в браузере. И присматривались к шрифту сразу на реальном проекте.
Вот как можно «поиграться» со шрифтами Медиума:
Montserrat bold
Noto Serif
Последовательность действий
Механика по упорядочиваю шрифтов очень простая:
Находим варианты шрифтов на Google Fonts, к примеру.
Примеряем их к сайту с помощью расширения. Причем можем посмотреть сразу в разных кеглях и жирности. Выбираем оптимальный.
Описываем стили и назначаем их в Фигме.
Начинаем работать с разработчиком в паре. Сначала просто заменяем шрифт на сайте и не трогаем размеры и жирность. В итоге в браузере что-то выглядит хорошо, что-то мелко или крупно, но в целом, ничего не ломается.
Теперь девелопер описывает у себя стили для текста и межстрочных интервалов.
А мы приводим макеты в порядок страницу за страницей. И отдаем их постепенно разработчику на верстку.
И также постранично внедряем изменения на сайте. Так «причесываются» заголовки, настраиваются стили таблиц, фиксируются компоненты, стили поп-апов и т.д.
После этой работы можно уже менять шрифт одним нажатием кнопки и проводить редизайны.
Спасибо. Пишите, как у вас получилось.
Комментарии
Войдите, чтобы оставить комментарий.