Год назад мы рассказывали вам о том, как создали фирменный шрифт для популярного онлайн-кинотеатра Иви. Однако на этом наша история не закончилась — вскоре после внедрения нового дисплейного шрифта команда бренда обратилась к нам снова, и на этот раз нам предстояло создать уже интерфейсный шрифт.
О том, почему это было необходимо и как мы решили эту задачу, рассказываем в статье.
Часть 1: новая задача
Напомним, что в 2022 году у Иви произошел ребрендинг: айдентика стала более мягкой и дружелюбной, на смену острым углам в логотипе пришли скруглённые формы, а позже мы разработали соответствующий новому характеру бренда фирменный шрифт — Ivi Sans Display. Он выполняет функции дисплейного и используется в коммуникациях бренда: в соцсетях, рекламе, афишах, ТВ-роликах и так далее.
А вот интерфейсный (или текстовый) шрифт оставался прежним, пока образ бренда продолжал меняться и совершенствоваться. И в конце концов команда Иви решила, что пора обновить всю типографику, ведь это важный элемент айдентики.
Существующий шрифт не очень хорошо подходил к созданному нами ранее дисплейному шрифту и не подчёркивал характер бренда.
Кроме того, он был шире, чем стандартные интерфейсные шрифты, и это создавало ряд неудобств.
Так, у нас появилось три критерия, которым должен был соответствовать новый интерфейсный шрифт:
- Информационная плотность: нужно сделать новый шрифт более узким, чтобы в строку текста входило большее количество символов;
- Брендовость: коммуникационная ценность и узнаваемость должна быть выше, чем у текущего шрифта;
- Читабельность: важно, чтобы шрифт при этом не стал более нагруженным и считывался всё так же быстро и легко.
Опираясь на эти пункты, мы начали искать пути реализации проекта.
Часть 2: поиск решений
Первоначально у нас было два пути: сделать кастомизацию Ivi Sans Display или одного из шрифтов TypeType. В итоге выбрали второй вариант и развивали идеи в этом направлении. Соответственно, у нас была задача кастомизировать шрифт так, чтобы добавить в него брендовую составляющую, но при этом сохранить читабельность и сделать его более узким, чем текущий шрифт.
Совместно с командой Иви мы выбирали вариант из подходящих для этой цели шрифтов.
Поэтому мы вернулись к самому первому пути — кастомизировать Ivi Sans Display, упростив его формы. А для того, чтобы лучше понять, в какую сторону двигаться и найти баланс между читабельностью и брендинговой составляющей, тщательно изучили самые известные интерфейсные шрифты — San Francisco Text, Roboto и другие. Мы смотрели на их формы, пропорции, апроши и другие детали.
Выяснилось, что в основном среди интерфейсных шрифтов встречаются неогротески, у которых сквадраченные овалы и вытянутые пропорции. Однако у Roboto довольно плотные апроши, а у San Francisco, наоборот, очень свободные. С учётом наших задач мы решили двигаться в сторону Roboto.
После этого началась работа над семейством. Мы определяли, какие начертания должны быть в шрифте. У Ivi Sans Display четыре начертания — Regular, Medium, Bold, Black. А в интерфейсе дизайнеры Иви используют только три начертания — Regular, Medium, Bold. У них уже есть готовая структура и представление о том, какие начертания в каких макетах используются. Поэтому совместно с командой Иви мы решили, что четвертое начертание, то есть Black, в шрифте будет лишним, потому что они его не используют и использовать не планируют.
Также мы думали над тем, чтобы сделать начертание Light — чтобы понять, нужно ли оно, дали команде Иви протестировать его в наших шрифтах. Но, как оказалось, оно тоже не требуется.
Соответственно, план был следующий: сделать три начертания — Regular, Medium и Bold. При этом жирность в Bold должна быть чуть больше, чем в Ivi Sans Display, а в Regular примерно такая же, как в дисплейном шрифте.
Часть 3: реализация
Мы приступили к переработке Ivi Sans Display. Чтобы сделать его менее декоративным и более читабельным, в первую очередь нужно было упростить формы знаков.
Так, мы убрали большую часть асимметричных терминалов (впрочем, некоторые оставили для придания характерности). Полностью убрали ловушки для чернил, чтобы они не мешали читабельности в маленьком размере. Убрали курсивные формы в кириллице, так они могут быть непривычны и неудобны для быстрого чтения. Упростили декоративные формы — например, сделали одночастную «а» двухчастной. Также упростили формы «Л», «М» и других букв — убрали «крышечки» и другие детали.
Однако, убрав большую часть декоративных фишек, мы столкнулись с очередным нюансом. Дело в том, что начертание Bold текстового шрифта часто используется в макетах в довольно крупном размере — например, в акцентных или призывающих к действию надписях. А значит, в нём должна сохраниться брендовая составляющая и характерные детали, нейтральный шрифт для таких целей не подойдёт.
В рамках «прогрессии декоративности» в начертании Bold меняются и другие символы: например, у цифр появляются терминалы, меняются формы запятой и знаки на её основе — они почти такие же, как в Ivi Sans Display, но немного упрощённые. Служебные знаки также везде упрощаются, чтобы шрифт был проще для восприятия.
Во всех начертаниях так же, как в Ivi Sans Display, поднимаются все символы пунктуации между цифрами (точки, двоеточия и другие). Ведь в интерфейсах Иви часто используются таймкоды, даты и тому подобное.
Мы добавили поддержку нескольких языков, которые были необходимы Иви, чтобы в будущем они могли расширяться. А ещё — сделали удобный спесимен для дизайнеров, чтобы им было проще работать со шрифтом и ориентироваться в его функциях.
Также для удобства мы решили изменить название дисплейного шрифта, чтобы не было путаницы. Так, новый текстовый шрифт получил название Ivi Sans Base, а Ivi Sans Display переименовался в Ivi Sans Pro.
Часть 4: результат
Ivi Sans Base — равноширинный неогротеск с гармоничным визуальным ритмом. Среди деталей — овалы с умеренной сквадраченностью, которые создают акцент на вертикальных осях и придают рисунку современную эстетику; закрытые, но легко распознаваемые апертуры символов; неконтрастные символы, оптимизированные для быстрого восприятия текста.
Шрифт очень универсален в использовании: начертания Regular и Medium предназначены для длинных текстов и малых кеглей, а более акцидентный и выразительный Bold — для коротких заголовков и акцентов.
Ivi Sans Base включает:
- Три начертания: Regular, Medium и Bold;
- 362 знака в каждом начертании;
- 13 OpenType фич;
- Поддержку 105 языков.
Ivi Sans Base полностью заменит существующий текстовый шрифт и будет использоваться на всех платформах Иви.
В главных ролях:
Команда Иви:
Игорь Рыжов — дизайн-директор
Митя Осадчук — экс-дизайн-директор
Кристина Мисько — арт-директор продуктового дизайна
Ринат Сейфутдинов — экс-арт-директор коммуникационного дизайна
Команда ТypeType:
Сергей Кузьмин — руководитель проектного офиса
Илья Николаев — проджект-менеджер
Юля Трофимова — менеджер по продажам
Антонина Жулькова — дизайн-лид
Анастасия Погорелова — старший шрифтовой дизайнер
Лада Собченко — шрифтовой дизайнер
Юрий Наконечный — руководитель технического отдела
Виктор Рубенко — программист
Станислав Тихонов — шрифтовой инженер
Елизавета Островская — шрифтовой инженер
Роман Авдюшкин — шрифтовой инженер
Злата Соколова — графический дизайнер
