В какое интересное время мы живем! Вон чо придумывают: https://cssans.pro/

Поднимите руку те, кто заметил обновление старого доброго Open Sans'a? Буквально несколько лет назад этот шрифт вышел из моды, а последнее время вообще не встречается в западном продуктовом дизайне. Обновленная версия приобрела очертания гротеска. https://fonts.google.com/specimen/Open+Sans

Быстрая прогоночка нового Open Sans по material типографике. По дефолту межбуквенный интервал безобразно велик. Уменьшаем на 1-3%

На Google Fonts вообще очень много недооцененных интересных шрифтов, добавленных за последнее время. Вот, посмотрите, что нашел! http://joxi.net/Q2KvkE9H4KPdPm. Шрифт со странноватым названием Kodchasan визуально является точной копией текущего брендового гугловского Product Sans. Однако более мягкий и "игровой" засчёт скруглений. Но если Продукт Санс запрещен к использованию в своих проектах, так почему бы не юзать в коммерческих целях похожие аналоги?

Сочетание с Roboto. Кстати, совершенно странная шрифтовая от Гугла - Product Sans & Roboto, но что поделать, нам остается только следовать трендам

Да да, это все про ваши продукты! :)

Open Sans после тихого редизайна просто прекрасен с правильным межбуквенным интервалом можно и нужно использовать в проектах. Тем более - русификация!

Ладно, ну а про старый добрый Монтсеррат что скажете? Тоже без изменений по-вашему?

Всем известно, что Behance принадлежит Adobe, который вроде бы настолько незыблимый, что не ждешь от него ошибок. И вот недавно они провели редизайн, который немного размыл грань между Behance и конкурентом Dribbble, и сделал первый даже где-то лучше чем было до редизайна, но посмотрите на "улучшения" раздела статистики:

Было

Стало

Что это за импрув? Умышленная дефичизация одного из разделов? Мне совершенно непонятно. Во-первых ценность раздела статистики теперь околонулевая. Убран весь функционал, история, действия других участников. Во-вторых стату закопали в т.н. Insights и пока все не перекликаешь - не поймешь, где теперь её искать. Ну и самое главное: удобная статистика в продукте это прежде всего эффективный пользовательский инструмент, чтобы развивать активность и метрики пребывания внутри приложения или сервиса. Делать так, как сделали с Behance - не надо!

После многочасовых исследований по типографике я собрал небольшую коллекцию шрифтов, которые по-моему мнению будут актуальны в этом году, а возможно и в последующем. Всё это оформлено в виде небольшой системки в Фигме через глобальные стили. Большинство межстрочных и межбуквенных интервалов твикнуты для лучшей восприимчивости в web проектах https://www.figma.com/file/Kpr4Y09zo5AILWaedKbH7POh/Figma-Fonts-Playground-System

Как использовать? Прежде всего для подбора шрифтовых пар и всевозможных комбинаций. Затем это просто визуально удобная либа, чтобы быстро подхватить нужную типографику в свой проект. И в третьих, я в режиме бота всё это вытащил в глобальные стили, сэкономив вам немного времени на декларирование оных вручную. Да, придется немного поколупаться, чтобы удалить лишние, т.к. в одном проекте столько не нужно. Ну и сама организация множества текстовых стилей в Фигме пока еще хромает, мы ждем пока команда разрабов обратит внимание на этот тред и добавит нам всем немного удобства: https://spectrum.chat/?t=018560b4-8a0a-4c77-9769-e2cf981e20da (в треде можно принять участие, лайкнуть или доплнить своими идеями)

Мы уже давно запилили из Фигмы секцию 'Chips' в react компоненты на основе фреймворка Material-UI, но вот ознакомительный видос получился только вчера. Сделано в Movavi, видосы сняты прямиком из браузера, т.е. это production-ready компоненты. Озвучка собственноручная, местами сам запутался уже в бесконечных фрагментах записи, которые я начитывал отдельно от фильма, поэтому за местами косячное произношение не вините сильно) Работы про Реакту еще дофига, следующая киношка будет посвящена инпутам. Со временем навыки подтянутся, а пока что вот: https://www.youtube.com/watch?v=gGmBT-S9poQ

Вот это, кстати, горячий дизайнерский приемчик, который был замечен особенно после редизайна slack.com. Суть простая - толстые контуры у иллюстрации / иконки и смещение фона. Вуаля!