На что вы обращаете внимание, когда заходите на сайт известного бренда?
Скорее всего, ваш ответ — дизайн. И это действительно первое, что бросается в глаза, именно поэтому международные компании так кропотливо и тщательно прорабатывают фирменный стиль, тратя на это большие ресурсы и периодически делая ребрендинг.
Однако мы — студия шрифтового дизайна, и считаем своим долгом напомнить, что шрифт играет в фирменном стиле значимую роль. Именно от гарнитуры, которой набраны тексты, зависит главное: станет клиент читать то, что написано на сайте, упаковках и печатной продукции бренда, или оставит оставит эту идею. Шрифт должен быть читаемым, современным и эстетичным.
Сегодня мы расскажем про создание одной из таких шрифтовых гарнитур, ставших частью фирменного стиля «Лаборатории Касперского».
Поделимся небольшим, но важным спойлером. Почти сразу после внедрения текстовое подсемейство стало призёром European Design Awards 2022. Взять бронзу в номинации текстовых шрифтов на таком престижном европейском конкурсе — огромная радость и для студии TypeType, и для «Лаборатории Касперского».
«Лаборатория Касперского» — компания, занимающаяся разработкой продуктов, обеспечивающих информационную защиту. Имеет собственный центр исследования и анализа киберугроз (GReAT). Многие знают о бренде как о крупнейшем производителе антивирусных программ, хотя этим область их работы не ограничивается.
Команда «Лаборатории Касперского» пришла к нам с запросом на разработку текстового подсемейства для уже созданного фирменного шрифта, однако наше сотрудничество оказалось намного плодотворнее.
Текстовое подсемейство
Прежде чем мы погрузимся в шрифтовые детали работы, стоит поделиться тем, как начиналась история нашего сотрудничества.
Команда «Лаборатории Касперского» обратилась к нам в сентябре 2020 года. У них был шрифт, созданный другими студиями, который предполагался для использования в качестве дисплейного и текстового. Тем не менее, если при оформлении заголовков гарнитура была комфортной для дизайнеров, в наборе массивов текста были сложности: выглядел слишком акцидентно, плохо читался.
Тогда возникла идея создать дополнительное, исключительно текстовое подсемейство в пару к дисплейному. С таким запросом «Лаборатория Касперского» обратилась к TypeType.
С новыми клиентами первые контакты всегда официальные, и, прежде чем работа будет запущена, должно произойти знакомство. Поэтому на начальных этапах мы делились информацией о своей студии, предлагали идеи по будущему шрифту, показывали первые скетчи.
Команда «Лаборатории Касперского» отмечала, что симпатизирует шрифтовой гарнитуре TT Interphases и будет рада видеть текстовое подсемейство похожим на этот шрифт.
Кстати, TT Interphases — один из бестселлеров студии. Шрифт создавался специально для использования в интерфейсах и веб-индустрии. Перед его разработкой мы проводили обширное исследование, чтобы понять, какие параметры гарнитуры идеально подойдут для поставленных задач. Подробнее об этом вы можете прочитать в статье про создание TT Interphases.
Сотрудники «Лаборатории Касперского» ранее тестировали TT Interphases в своих макетах, хоть и понимали, что для фирменного стиля хотят собственный, уникальный текстовый шрифт, похожий по параметрам на референс.
У нас было 2 возможных решения. Первое заключалось в том, чтобы взять их исходный шрифт, Kaspersky Sans, выделить главные графические особенности, придающие шрифту характер, и перенести их в TT Interphases.
Второе решение было противоположным. Мы могли взять Kaspersky Sans и изменить его, подогнав под параметры TT Interphases. Однако оба пути вели нас к похожему результату, что было видно уже на первых скетчах.
Активная работа над текстовым подсемейством началась весной 2021 года, когда «Лаборатория Касперского» приняла окончательное решение: сделать текстовое подсемейство, в котором будут сохранены графические особенности и характер Kaspersky Sans, но параметры будут аналогичны TT Interphases.
Давайте немного отвлечёмся от истории и проясним важный момент, свойственный всем коммерческим шрифтам. При создании дисплейного и текстового подсемейств, которые станут фирменным стилем компании, важно соблюдать парность. Это значит, что шрифты должны дополнять друг друга, безупречно сочетаться. При этом важно соблюдать правила типографики, а именно: создавать текстовый шрифт читаемым и более нейтральным, ведь именно эти качества позволят ему хорошо смотреться в массиве текста, а вот дисплейный, напротив, необходимо делать более ярким и акцидентным, потому что так он будет привлекать внимание в заголовках. Парность же создаётся путём переноса графических фишек, создающих характерность, из дисплейного в текстовое подсемейство. Стоит отметить, что многие из этих фишек всё-таки усмиряются и сглаживаются в текстовом шрифте.
Учитывая, что дисплейная гарнитура уже была, нашей команде предстояло создать для «Лаборатории Касперского» парный шрифт к заголовочному, читаемый и более нейтральный.
Мы начали тщательно изучать акцидентное подсемейство, чтобы понять, какие именно графические особенности и характерные черты переносить в текстовое. Общий характер исходного шрифта можно описать как брутальный и технологичный.
- Брутальность выражалась в сквадраченности овалов в определённых буквах, таких как B, R, D, n, то есть во всех знаках, где присутствует присоединение кругов к горизонталям. Это присоединение жёсткое, ярко выраженное, что придаёт гарнитуре брутальности.
- Характер шрифта поддерживается и другими элементами, например, четко выраженными горизонталями. Можно посмотреть на терминалы букв t, f или на спину у s — горизонтали нарочито прямые, это выглядит выразительно и акцидентно.
- Обращает на себя и форма строчной буквы g. Это сложный знак с круглыми формами, и в классических шрифтах его часто делают мягким, плавным. При создании шрифта для «Лаборатории Касперского» пошли от обратного: форма g технологичная и прямолинейная.
- Ещё одна особенность шрифта — отсутствие полумер. Когда в знаках присутствуют крючки, они заметны, потому что их формы большие и крупные. Это видно в строчной j и прописной J, в строчной b. Круги тоже выразительные и широкие, если речь идёт о знаках O, Q, C.
- Компенсаторы в глифах шрифта не просто присутствуют, они обращают на себя внимание. Во многих знаках такие элементы скорее дополняют выразительность шрифта, из-за чего выполняют роль оптических компенсаторов. Достаточно посмотреть на прописные B, R или A, строчные n, k. В прописной B, например, компенсатор скорее добавляет жирности, но за счёт таких решений и создаётся технологичность и брутальность шрифта.
Со всеми описанными характерными чертами нам предстояло работать при создании текстового подсемейства. Безусловно, часть из графических элементов следовало смягчить, ведь, как мы уже отмечали, главная задача текстового шрифта — быть хорошо читаемым даже в маленьких размерах.
Уже на первых итерациях текстовый шрифт представлял собой более спокойную версию дисплейного. Стоит отметить, что, если задача дисплейного — напрямую ассоциироваться с брендом, то задача текстового — не мешать чтению, при этом бренд должен угадываться в шрифте.
- Выразительность, брутальность и технологичность сохранились, но были смягчены. Например, необычная форма прописной R осталась, но нога буквы расположена уже не так глубоко, как в дисплейном.
- Сильная разница видна в ширине полуовалов у прописной B. Буква сохранила форму, но стала компактнее, а оптическая компенсация перестала быть графическим элементом и стала использоваться в своей роли, добавляя белого в жирных начертаниях.
- Пропорции знаков поменялись, хотя все характерные фишки, такие как завитки и крючки, сохранились, став при этом менее акцидентными. Например, это можно увидеть у строчной b, прописной J. В знаках O, Q, C круги сузились, став более овальными, нежели нарочито круглыми. Эти изменения вносились для того, чтобы шрифт стал более компактным и читаемым.
- Прямые терминалы и горизонтали не поменяли форму, характерность сохранена. Однако некоторые формы глифов были смягчены, например, спина у s. Так мы оставили характер, но убрали чрезмерную акцидентность, которая в текстовом подсемействе будет лишней.
- Апертуры c, e и других знаков стали более открытыми. Закрытые апертуры хорошо работают в крупном размере, но для текстового шрифта такой графический ход может ухудшать читаемость. К тому же, в мелких размерах закрытые апертуры могут слипаться.
Чтобы шрифт подходил нужным параметрам, мы увеличили рост строчных, изменили толщины. Визуально текстовый шрифт выглядел компактнее, потому что, хоть ширина знаков не менялась, глифы вытянулись вверх и стали казаться более узкими. Из разноширинного шрифт стал равноширинным. Межбуквенные расстояния увеличились, благодаря чему улучшилась читаемость.
Если говорить о фичах, то многие дублировали состав дисплейного подсемейства, о котором расскажем чуть позже. В текстовом начертании не так много фич, но все они выполняют функциональную роль и облегчают работу со шрифтом.
- Лигатура для текстового начертания всего одна, її для кириллицы.
- В текстовом подсемействе присутствует табулярный сет цифр и сет с перечеркнутым нулём, чтобы не спутать его со строчной o.
- Решение, перенятое из TT Interphases — нумераторы в кружочках. Представлены 2 варианта: черные цифры на белом фоне и белые на черном. С помощью этой фичи можно, например, эстетично оформить список в тексте.
- Дроби меняются на более привычную форму с помощью соответствующей фичи; присутствует суперскрипт, которым оформляют сноски или используют в формулах.
- Мы добавили фичу, которая работает по умолчанию. Двоеточие между цифрами автоматически поднимается на высоту, комфортную глазу. К примеру, если вы пишите время, двоеточие сразу займет нужное положение.
Языковой состав текстового подсемейства получился действительно большим: 200 языков. Присутствуют локализованные фичи для молдавского и румынского, нидерландского, каталанского, башкирского, чувашского и сербского языков.
В кассовом составе каждого начертания 681 знак. В текстовом подсемействе можно обнаружить расширенный состав валют и символов, знаки расширенной кириллицы и латиницы.
Результаты этой итерации были представлены команде «Лаборатории Касперского». Стоит отметить, что при одинаковом размере буквы текстового шрифта выглядели крупнее, что хорошо для данного подсемейства, ведь подобный результат улучшает восприятие текста.
В текстовом подсемействе мы переименовали начертания. Это было связано с тем, что в Kaspersky Sans использовались нестандартные решения. Например, начертание Light по пропорциям было похоже на Regular, а Bold был жирнее привычного. Безусловно, это не принципиальный момент, но начертания текстового подсемейства получили более классические названия, поэтому шрифт Regular текстового начертания по пропорциям стал одинаков с Kaspersky Sans Light. Начертание Bold в текстовом подсемействе получилось стандартным по жирности, близким к Bold в TT Interphases.
Полный знаковый состав латиницы мы предоставили через месяц работы. Он практически полностью повторял знаковый состав TT Interphases, кроме иконок, которые шрифту для «Лаборатории Касперского» были не нужны. После согласования работ мы приступили к отрисовке кириллицы.
Результат понравился всем участникам проекта, ведь новое подсемейство отлично работало с дисплейным, при этом обладая лучшей читаемостью и более нейтральным характером.
Работа над шрифтом заняла 2 месяца.
Моноширинное подсемейство
В наших статьях и других материалах мы часто упоминаем о моноширинных шрифтах. Давайте кратко напомним, что они из себя представляют.
Моноширинные шрифты чаще всего используются в кодинге, хотя в последнее время стали настолько популярны, что стали применяться в дизайне упаковки, брендинге и в оформлении сайтов. Их главное отличие — моноширинность, то есть все буквы и знаки располагаются на кегельной площадке одного размера. Из-за этого все шрифты такой категории обладают особенным дизайном, буквы выглядят компактно и немного сжато, ведь самые широкие глифы обладает таким же размером, как и самые узкие.
Команда «Лаборатории Касперского» решила не ограничиваться текстовым и дисплейным подсемействами, а дополнить состав ещё одним, моноширинным. Он не предполагался для широкого использования наравне с текстовым и дисплейным, но тем не менее мог отлично дополнить фирменный стиль в продуктах, материалах и коммуникациях, использующих или визуализирующих код.
Ещё до проекта «Лаборатории Касперского» наши специалисты провели исследование по моноширинным шрифтам, чтобы определить необходимую величину кегельной площадки, кассовый состав и универсальные графические и технические решения, благодаря которым моно-шрифт сможет радовать пользователей и быть функциональным. Для изучения мы отбирали популярные моноширинные гарнитуры разных студий, изучая параметры шрифтов и анализируя их.
Результаты этого исследования стали основой моноширинной гарнитуры для «Лаборатории Касперского». Например, величина в 600 пунктов, при которой глифы не выглядят слишком узкими или слишком широкими.
Ограничения по размеру кегельной площадки бросают вызов работе с привычными формами знаков, ведь необходимо не просто сузить глифы до необходимой величины, но сделать это так, чтобы шрифт по-прежнему был гармоничный, эстетичный и удобный в работе. Добавьте к этому то, что характерные особенности шрифта должны быть перенесены в новое подсемейство.
Обо всех нюансах мы рассказали команде «Лаборатории Касперского», чтобы приступить к работе, понимая масштаб дозволенного креатива.
Мы говорим о формах глифов, которые изменились. Забегая немного вперёд, моноширинное подсемейство получилось технологичным, но менее брутальным, с лёгким и приятным характером. При этом зритель без труда догадается, что это всё ещё шрифт «Лаборатории Касперского».
Часть форм была изменена из-за ограничений моноширинности.
- Буква S сменила прямую спину на плавные очертания, изменились формы знаков f, l, j, r.
- Шрифт стал более светлый за счёт широких апрошей некоторых знаков, что тоже являлось следствием моноширинности.
- Прямые терминалы и крючки остались прежними, и их характер даже усилился. Это стало не только характерной фишкой, но и необходимостью, ведь предстояло занять белое пространство в узких знаках, например, в j или t.
- Можно заметить, что в некоторых знаках, таких как f, l, j, i, r, появились засечки. Это стандартное решение для моноширинных шрифтов, с помощью которого тоже занимают белое пространство узких глифов.
Другая часть решений выполняла скорее декоративную роль, придающую шрифту больше технологичности.
- В прописной и строчной y не было необходимости делать засечку, ведь широкая часть прекрасно занимает белое пространство. Однако засечка поддерживает прямые горизонтали и терминалы, дополняя характер шрифта. Такая же засечка использована в прописной J.
- Строчная g, как можно заметить, изменила свою форму. В этом не было прямой необходимости, но новая форма выглядит очень технологично и свежо, добавляя шрифту эстетики.
Были и другие особенности.
- Высота строчных у глифов моно-шрифта получилась такая же, как в текстовом начертании.
- Начертание Bold стало немного тоньше. Это связано с тем, что многие изначально широкие знаки стали более узкими.
- Увеличились знаки пунктуации, чтобы заполнить образовавшееся белое пространство. Мы сделали заметной разницу в величине между запятой и кавычками, чтобы программистам было легче отличить их друг от друга.
Среди фич остались только функциональные, облегчающие работу со шрифтом.
- Табулярных цифр в наборе нет, потому что цифры моноширинного шрифта табулярные по умолчанию. Зато есть две версии набора с разным нулём, перечеркнутым или с точкой, так что пользователь сможет выбрать понравившийся. Кстати, стандартного нуля в наборе нет, чтобы исключить возможность перепутать его с буквой o.
- Нумераторы в кружочках присутствуют в двух версиях, но в моноширинном наборе используются только однозначные числа, так как двузначные сложно уместить на площадке в 600 пунктов.
- Интересная форма получилась у дробей и процентов.
- Суперскрипт и контекстная альтернатива с двоеточием между цифрами тоже есть среди фич.
- Более того, остались локализованные формы для молдавского и румынского, нидерландского, каталанского, башкирского, чувашского и сербского языков.
В шрифте было всего 2 начертания, Regular и Bold, в кассовом составе каждого по 687 знаков. Моноширинный шрифт, как и текстовый, поддерживает 200 языков.
Полный знаковый состав для двух начертаний мы сделали за месяц. Стоит отметить, что результатом остались довольны не только мы: команда «Лаборатории Касперского» приняла шрифт без правок.
Дисплейное подсемейство
Казалось бы, после создания текстового и моноширинного подсемейств работа должна была завершиться. Однако команда «Лаборатории Касперского» вернулась к нам с ещё одной задачей: внести изменения в исходный шрифт.
Оригинальный Kaspersky Sans, с которым команда пришла к нам в начале, разрабатывался как общий шрифт для всех целей без разделения на текстовый и дисплейный. Однако в процессе работы мы создали отдельное текстовое подсемейство Kaspersky Sans Text и моноширинное Kaspersky Sans Mono. Изменить исходный Kaspersky Sans, чтобы преобразовать его в дисплейный шрифт Kaspersky Sans Display, стало логичным продолжением работы.
Рисовать новую гарнитуру с нуля команда «Лаборатории Касперского» не планировала, поэтому мы стали смотреть в сторону визуальных и технических корректировок, улучшающих гарнитуру.
Мы начали искать те моменты, которые с визуальной точки зрения сделают шрифт эстетичнее, а с типографической — правильнее.
Давайте совершим ещё одно погружение в вопросы шрифтового дизайна. В коммерческих шрифтах дисплейное подсемейство создаётся более выразительным. Это связано с тем, что заголовки бросаются в глаза, привлекают внимание и вызывают стойкую ассоциацию с брендом. Функция текстового подсемейства скорее практическая, ведь он создаётся для чтения больших массивов текста, поэтому его графика носит поддерживающий характер.
Однако дисплейный шрифт не всегда разрабатывается сам по себе. Он может идти в тесной связи с логотипом компании, и тогда именно от визуальных особенностей, использованных в логотипе, отталкиваются при создании характера дисплейного начертания.
Именно поэтому, прежде чем взять Kaspersky Sans Display в работу, мы уточнили, что появилось раньше: шрифт или логотип. Как мы и предполагали, логотип был создан первым, поэтому мы начали его изучать.
Дисплейное подсемейство может сочетаться с логотипом, но полностью идентичными они бывают редко. Буквы в логотипе «Лаборатории Касперского» располагаются плотнее, выносные элементы очень маленькие. Шрифт в логотипе собирается в единое целое, формируя цельный брусочек.
Изначальный шрифт Kaspersky Sans прекрасно отражал позицию бренда: технологичный, современный и минималистичный. Шрифт бренда был брутальный и технологичный, но ему не хватало современности. Стоит отметить, что в логотипе сделан плотный спейсинг, большой рост строчных и маленькие выносные элементы, в то время как в дисплейном шрифте, наоборот, рост строчных был маленький при широкой разрядке и больших выносных элементах.
Мы отмечали, что плотность дисплейного шрифта не должна быть такой же, как в логотипе, но всё-таки спейсинг исходного шрифта Kaspersky Sans был слишком разреженным.
Характер изначального шрифта и графические особенности подробно описаны в первой главе, и нам предстояло их сохранить. Мы предложили правки, благодаря которым дисплейное подсемейство станет лучше сочетаться с логотипом компании, и после согласования с командой начали их вносить.
- Изменили названия начертаний на более классические и частично изменили жирность.
Это был необходимый шаг, чтобы дизайнерам стало комфортнее работать с подсемействами, у которых начертания называются одинаково. Мы также предложили расширить палитру начертаний. В обновлённой версии было регулярное начертание, но не было тонкого и очень жирного, при том, что в текстовом был довольно жирный ExtraBold. В дисплейных шрифтах жирные начертания всегда смотрятся выигрышно и акцидентно, их удобно использовать в крупных размерах, поэтому мы предложили дополнить Kaspersky Sans Display начертанием ExtraBold, тем самым количество прямых начертаний увеличилось до 6.
- Поменяли цифры и некоторые знаки пунктуации.
Команда «Лаборатории Касперского» предложила изменить цифры в гарнитуре. В результате мы взяли цифры из TT Interphases, так как они нравились команде и подходили шрифту, но поработали над графикой, чтобы финальный вариант подходил остальным глифам шрифта. Пунктуацию решили увеличить, чтобы работать с ней стало удобнее.
- Увеличили рост строчных знаков.
Мы уже отмечали, что в исходном Kaspersky Sans строчные знаки были довольно низкими. Такое решение придавало шрифту старостильности, а в планах было сделать гарнитуру современнее. Всё-таки речь идёт о фирменном стиле технологичной компании, а шрифт должен воплощать ценности бренда и подходить логотипу.
В первой итерации мы предложили увеличить высоту строчных знаков всего на 5%. Такой результат не бросался в глаза, но делал шрифт современнее. Однако в процессе мы кардинально поменяли этот параметр, опираясь на решения в логотипе, и рост строчных увеличился значительно, при том, что размер прописных не изменился. Это сделало шрифт привлекательнее.
- Уменьшили выносные элементы.
В изначальной версии шрифта выносные элементы были крупные, что тоже добавляло шрифту старостильности. Мы сделали противоположный ход, в результате которого получились довольно крупные строчные знаки с небольшими выносными элементами.
- Уменьшили плотность набора.
Как мы уже отмечали, исходная дисплейная гарнитура казалась нам слишком разреженной. Мы же, наоборот, сделали спейсинг более плотным. Даже слишком плотным, потому что команда заказчика всё-таки попросила сделать его немного шире. Однако он всё равно остался довольно плотным по сравнению с первоначальным шрифтом, и этому есть логическое обоснование. Как мы узнали ещё на этапе скетчей, в компании планируют использовать Kaspersky Sans Display не только для заголовков, но и для текста. Например, сайт компании будет оформляться исключительно им, так проще работать дизайнерам.
Правило хорошей типографики заключается в том, что в таких ситуациях дизайнерам стоит менять разрядку при работе со шрифтом. В заголовках уменьшать, в тексте — увеличивать, таким образом сохраняется и акцидентность, и читаемость. Однако правило шрифтового дизайна заключается в том, что для такого использования лучше заранее установить более плотный спейсинг, который потенциально будет увеличиваться, а не уменьшаться. Ведь, если кернинг и спейсинг в шрифте будет настроен на широкую разрядку, при её уменьшении шрифт может слипаться или выглядеть не эстетично. В случае, когда всё изначально продумано для плотного набора, при увеличении пространства между буквами шрифт по-прежнему будет выглядеть отлично.
Состав фич в подсемействе практически не менялся, мы перенесли уже существующие, частично дополнив новыми.
- В исходном шрифте была стилистическая альтернатива для a, которая переключала форму с двухчастной на одночастную. Кстати, в логотипе «Лаборатории Касперского» использована двухчастная конструкция, поэтому основная форма стойко ассоциируется с брендом, а альтернативная вносит разнообразие в шрифт.
- В дисплейном шрифте был трафаретный сет. Графические решения в виде разрывов повторяют те, что использованы в логотипе, поэтому таким сетом удобно оформлять заголовки в случаях, когда нужно вызвать стойкую ассоциацию с брендом у всех, кто хоть раз видел логотип «Лаборатории Касперского». Мы перенесли в трафаретный сет изменения, аналогичные использованным в стандартном сете.
- Лигатур всего 5, и каждая из них помогает избежать неприятных глазу разрывов или слипания глифов. Сочетания ff, fi, fl, ft для латиницы и її для кириллицы — стандартные решения большинства шрифтов.
- Остальной состав фич аналогичен тем, что были в текстовом подсемействе: табулярный сет цифр и сет с перечеркнутым нулём, дроби, суперскрипт. Двоеточие, которое автоматически поднимается при использовании между цифрами, тоже осталось.
- В дисплейном подсемействе также, как в остальных, есть расширенный состав валют и символов, а ещё добавлен логотип компании.
- Сохранились и локализованные фичи для молдавского и румынского, нидерландского и каталанского языков.
Всего в дисплейном подсемействе 200 языков, а кассовый состав — 711 знаков для каждого начертания.
Работа над дисплейным подсемейством шла дольше всего, в основном из-за более длительных перерывов между итерациями, однако финальный результат того стоил.
В финале команда «Лаборатории Касперского» получила 3 подсемейства: дисплейное, текстовое и моноширинное, каждое из которых предназначено для своих целей. Дисплейное станет визитной карточкой сайта, текстовое подойдёт для оформления любых массивов текста даже в маленьких размерах, а моноширинным удобно набирать код.
Мы рады, что нам довелось стать частью этого проекта, ведь это был приятный опыт с эстетичным и удобным в использовании шрифтовым результатом.
Над проектом работали
TypeType
Yulia Gonina — art director, lead type designer
Ivan Gladkikh — technical director, kerning
Yuri Nakonechny — mastering
Victor Rubenko — hinting
Kaspersky
Nikita Morozov — head of design
Roman Mironov — art director
