В 2023 году команда платформы Дзен обратилась в TypeType с запросом на разработку фирменной шрифтовой гарнитуры под рабочим названием Stella Sans. Заранее мы понимали, что это должен быть гротеск, и каким будет примерный кассовый состав. А вот продумать концепцию шрифта и его визуальный образ нам только предстояло. О том, как мы решили поставленные задачи и что получилось в результате, рассказываем в статье!
Техническое задание
Мы должны были разработать шрифтовую гарнитуру, которая будет включать в себя шрифты с разным функционалом: для набора основного массива текста и для коммуникаций и передачи характера бренда. Исходя из этих задач предполагалось создать два подсемейства: дисплейное и текстовое. Дисплейное (от англ. display — показывать, демонстрировать) — более яркое по графике, для использования в крупном кегле в заголовках и коммуникациях — с начертаниями Regular, Medium, Bold. И текстовое, мелкокегельное, для набора текстовых блоков, основное в интерфейсах — с начертаниями Light, Regular (+ Regular Italic), Medium, Demibold, Bold. А также вариативное начертание, меняющее шрифт по оси веса.
В первоначальном брифе фигурировало ещё и широкое начертание для дисплейного подсемейства, но в процессе работы от него отказались в пользу разработки логотипа. Дело в том, что ребята из Дзена хотели обновить логотип простым путём. По первоначальной задумке мы должны были разработать дисплейный шрифт и в отдельном глифе собрать слово «дзен» из его букв, задав знакам нужные для логотипа интервалы и, возможно, немного скорректировав графику. В дальнейшем набранные этим шрифтом с клавиатуры буквы ‘д’, ‘з’, ‘е’, ‘н’ менялись бы на внедрённый в шрифт логотип через прописанную фичу контекстной замены. Однако, как гласит закон Мёрфи, если что-нибудь может пойти не так, оно пойдёт не так. Простой путь очень быстро усложнился, и в результате мы разработали для Дзена полноценный логотип, о чём подробно расскажем ниже.
Кассовый состав предполагался стандартный: базовая латиница, базовая кириллица, поддержка русского, белорусского, украинского и английского языков. Стандартные цифры, широкий сет знаков валют, знаки пунктуации и математические символы.
Основные задачи шрифта
Stella Sans должен был выполнять следующие задачи:
- Усилить визуальный характер бренда, сделать его более узнаваемым;
- Обеспечивать вариативность степени «характера»: шрифт должен быть читабельным и нейтральным (так как в Дзене есть статьи с содержанием разного характера), при этом запоминающимся в заголовках и узнаваемым в коммуникациях;
- Соответствовать характеру бренда: эмоционально комфортный, мягкий, экспертный.
На основе этих вводных мы пришли к тому, что дисплейный шрифт будет более выразительным, чтобы передавать характер, а текстовый — более нейтральным.
«Это стандартная схема: дисплейный шрифт более крупнокегельный, более акцидентный — в нём есть узнаваемые элементы, сложные детали. А в пару к нему идёт текстовый шрифт с более простым, лаконичным характером. Общие характерные элементы есть и в дисплейном, и в текстовом шрифте, чтобы сохранялось единообразие семейства, но текстовый проектируется более простым для удобства восприятия и беглого чтения».
Марина Ходак, дизайн-лид TypeType
Кроме того, к текстовому шрифту в случае с Дзеном есть определённые требования, так как он будет использоваться в основном в интерфейсах. Это значит, что он должен легко заменять системные шрифты, такие как Roboto, San Francisco и Arial.
«Все перечисленные шрифты относятся к классу неогротесков. Они обладают характерными прямоугольными пропорциями — то есть это не широкие шрифты, знаки которых стремятся быть вписанными в квадрат, а более вертикально вытянутые. Они более ёмкие, позволяют уместить больше текста в строку. И есть определённые требования к соотношению высоты прописных и строчных, к интерлиньяжу, толщинам и пропорциям. Во все эти метрики мы должны попадать, разрабатывая гарнитуру».
Марина Ходак, дизайн-лид TypeType
Стеллацентричность
Рабочее название шрифта Stella Sans, которое он получил ещё до старта разработки, в процессе закрепилось окончательно. Стелла (от лат. — «звезда») — ключевой символ фирменного стиля Дзена. Этот знак есть в логотипе и во всех элементах айдентики платформы. Команда Дзена вложила много сил в поиск этой формы и попросила нас отразить «стеллацентричность» в шрифте.
«В брифе было интересное слово — „стеллацентричность“. Но как может выглядеть стеллацентричный шрифт? Я долго размышляла над этим, и в конце концов меня осенило — стелла заложена в самом сердце „дзена“. При определённой комбинации графем контрформа ‘з’ и ‘е’ начинает напоминать звезду. Я набросала скетч и начала воплощать эту концепцию в жизнь».
Марина Ходак, дизайн-лид TypeType
Для презентации этой идеи мы сделали пару скетчей: первый — поспокойнее, и второй — где стелла является буквально полной контрформой в буквах. Мы предполагали, что настолько прямолинейное визуальное решение в шрифте воспринималось бы сложно и хотели найти графику, при которой стелла была бы не так очевидна, но всё ещё считывалась.
«В процессе уменьшался объём и довольно резкая графика контрформы, но для того, чтобы стелла не потерялась, мы сделали её более симметричной, увеличив верхние полуовалы в знаках ‘З’, ‘В’, ‘S’ и по аналогии — в буквах ‘Р’ и ‘R’. Здесь считывается контрформа: она уже не такая акцидентная и буквальная, как в первоначальном варианте, но мы нашли нужное звучание и придумали историю, отсылку к стелле, которую можно вписать в рисунок и сделать из „обычного гротеска“ фирменный шрифт для Дзена».
Марина Ходак, дизайн-лид TypeType
Дисплейное подсемейство
1. Первые скетчи
Бриф, с которым мы начинали проект, был довольно конкретным, но при этом и неоднородным: содержал противоречия в референсах и очень широком функционале, который ожидался от шрифта. Поэтому мы выбрали стратегию показывать много графики, обсуждать и отметать лишнее. Ребята дали нам доступ к разным макетам в Figma, чтобы мы могли примерять шрифты в продукте сразу по ходу работы. А мы в свою очередь примерно раз в неделю показывали подробные презентации с результатом работы. Такой подход несколько усложняет налаженный линейный процесс, но зато помогает дизайнеру и заказчику лучше понять друг друга и найти оптимальное решение.
Мы показали первые скетчи команде Дзена и рассказали, как можно вписать идею стеллацентричности в шрифт. Также мы продемонстрировали, в каких ещё элементах может отразиться стелла: например, клюшка ‘л’ и присоединение диагонального элемента к горизонтальному в ‘д’ могут заимствовать радиус скругления, характерный для самой стеллы.
Предложили разные варианты эмоциональной и графической вариативности: усиление ловушек для чернил, необычную форму ‘Е’, трансформацию стеллы в диакритику и другие варианты. Какие-то из этих решений могли бы закрепиться в стилистических сетах — для усиления голоса шрифта там, где это нужно.
Буква ‘а’ с хвостиком и закруглённым брюшком прижилась в шрифте с первых итераций. Её форма и пластика стала для нас и ребят из Дзена ориентиром для развития остального шрифта.
Чтобы напомнить команде Дзена, что в гарнитуре предполагается и более функциональный текстовый шрифт, мы сразу показывали, как он может выглядеть, на быстром скетче. Важно было показать, что в текстовом шрифте рисунок становится более нейтральным. Исчезают дополнительные элементы, такие как как хвостик в ‘а’ или чрезмерный изгиб в ‘д’, терминалы становятся спокойнее, пропорции меняются на вертикальные и более равноширинные.
2. Развитие идеи
Как и ожидалось, большое количество сложной графики в этом проекте не прижилось. А вот идею деликатного вписывания стеллы в шрифт ребята восприняли хорошо, и мы продолжили поиски. Мы решили больше поработать с овалами и внести ещё один тонкий намёк на стеллу.
По сути стелла, если сильно упростить её форму, представляет собой ромб. И мы решили, что именно овалы, как один из стилеобразующих элементов шрифта, могут отразить в себе эту форму. Сама по себе буква ‘Оо’ очень частотная. Кроме того, она влияет на другие знаки, такие как ‘Сс’, ‘Зз’, ‘е’, ‘Ss’. Так почему бы нам не сделать её не круглой, а ромбовидной?
«Я назвала это словом „мерцание“: у меня появилось ощущение, что в шрифте за счёт этих острых вершин появляются такие акценты, которые „зажигаются“, словно звёздочки».
Марина Ходак, дизайн-лид TypeType
Также в следующих скетчах появились слегка зауженные терминалы — рифма с лучами стеллы. В буквы ‘Кк’ и ‘Жж’ мы добавили более акцентные верхние ветки, чтобы придать шрифту большую узнаваемость и поддержать пропорции верхних полуовалов, которые в этом шрифте немного больше стандартных.
В дальнейшем эти буквы ещё несколько раз видоизменялись. Мы искали нужный угол наклона диагоналей, ширину посадки верхних веток и способ крепления. В итоговом варианте диагонали крепятся к стему через небольшую горизонталь.
В одной из итераций мы пробовали поддержать зауженные терминалы, сделав дополнительные штрихи ещё тоньше — это видно в ‘а’, ‘р’, ‘ц’, ‘д’. То есть то самое «мерцание» мы выкрутили ещё сильнее. Однако это оказалось слишком и мы вернулись к более сдержанной концепции.
3. Поиск степени акцидентности и шкала Сковилла
Команде Дзена очень нравилась идея заметных ловушек для чернил. Ребята показывали нам много референсов, но все они казались довольно акцидентными. В «Стелле» были небольшие намёки на инктрэпы (ловушки для чернил), но развивать их в очень явную историю нам не хотелось. Мы уже поиграли в «много дизайна» на первых итерациях, и сейчас как будто нашли нужный баланс. Ребята же приводили в пример острые соусы от известной студии дизайна и предлагали нам увеличить остроту Stella Sans с «лёгкой остринки» в сторону «крайне острого».
Мы много дискутировали на этот счёт, но к решению пришли после того, как поставили шрифт в макет. Стало очевидно, что даже если речь идёт о заголовочном шрифте (то есть более акцидентном) для такого ресурса, как Дзен, он должен быть достаточно нейтральным, чтобы можно было набрать им текст любого содержания. А шрифт с высокой степенью акцидентности может не всегда выглядеть уместно. В итоге мы нашли промежуточный вариант графики, который всех устроил.
«Мы сделали скетчи с подобным акцидентным вариантом и показали, как он будет выглядеть в макетах, набрав им реальные заголовки новостей, которые публикуются на платформе. И сразу стало понятно, что что-то не так, ведь слишком „эмоциональный“ шрифт не соответствовал настроению многих публикаций».
Марина Ходак, дизайн-лид TypeType
В какой-то момент ребята предложили добавить в шрифт скругления из их фирменных иконок. Мы честно проработали такой вариант. Здесь возникла сложность: у иконок был очень технологичный характер скруглений, а шрифт уходил в гуманизм. Просто «пересадить» скругления из иконок в знаки шрифта было невозможно, а после адаптации скруглений они переставали быть «иконочными». В итоге от этой идеи отказались, но получили интересный опыт.
В итоге у нас получился современный гуманистический гротеск с довольно широкими пропорциями. Графические решения, придающие шрифту уникальность, подсмотрены у ключевого элемента бренда — стеллы, и адаптированы под шрифтовые законы. Овалы и полуовалы шрифта несколько заострены (‘O’, ‘B’, ‘P’, ‘b’, ‘c’, ‘e’). Терминалы заужаются на концах (‘C’, ‘J’, ‘S’, ‘r’, ‘t’, ‘y’). В знаках с полуовалами появляется характерная контрформа (‘B’, ‘R’, ‘З’, ‘g’, ‘з’, ‘в’). Её поддерживают лёгкие инктрэпы в знаках с диагоналями (‘M’, ‘N’, ‘Z’, ‘v’, ‘w’, ‘y’).
Конечно, если речь идёт о гарнитуре, её подсемейства скорее всего будут состоять из нескольких шрифтов. В процессе работы над основным начертанием мы понимали, как должны выглядеть остальные. Ориентируясь на референсы и на собственный опыт, это не сложно спрогнозировать. Как только часть кассы согласовывалась для основного начертания, мы делали скетчи других начертаний и показывали их в макетах и презентациях. В итоге Stella Sans Display объединила в себе три начертания: Regular — 90 пт, Medium — 110 пт, Bold — 145 пт.
Разработка логотипа
Как мы упоминали вначале, предполагалось, что логотип будет собран из букв дисплейного шрифта как дополнительная опция. Поэтому параллельно с разработкой шрифта мы уже начали работать над логотипом. По сути из разных итераций шрифта мы собирали слово «дзен» и демонстрировали результат заказчику.
Однако в процессе ребята поняли, что логотип им нужен в первую очередь, и внедрять его начнут ещё до завершения работы над шрифтом. Учитывая, что графика дисплейного шрифта к тому моменту ещё не была окончательной, работа несколько усложнялась. Так как речь шла о текстовом логотипе, пусть не полностью, но основанном на конкретном шрифте, изменения графики этого шрифта могли потянуть за собой изменения логотипа. И наоборот, если в логотипе появляется деталь, которая качественно дополняет графику, она может повлиять на уже почти готовый шрифт. С чем мы в итоге и столкнулись.
«Мы уже обсудили с заказчиком, что логотип должен быть широким. Также обговаривали, должен ли он состоять из прописных, строчных или прописных и строчных букв. В итоге остановились на строчных, потому что здесь больше разнообразия графем. Также нам нравилось, как сочетаются ‘з‘ и ‘е‘ в таком варианте, как бы зеркалят друг друга — мы старались играть на тех деталях, которые нашли в шрифте. Зауженные терминалы, контрформа. А ещё появилась зауженная серединка в букве ‘з‘, напоминающая луч стеллы — это была идея ребят из Дзена».
Марина Ходак, дизайн-лид TypeType
В логотипе появилось два решения, которые также перекочевали в дисплейный шрифт: зауженная горизонталь и верхний терминал, срезанный под углом, в букве ‘з’. Логика асимметричных терминалов распространилась на весь шрифт: в ‘Зз’ нижний терминал срезан под прямым углом, а верхний — по диагонали. А в зеркальной к ней ‘Cc’, соответственно, наоборот — верхний под прямым углом, а нижний — по диагонали.
Терминал в логотипе поменялся из-за того, что нам нужно было добиться крепкой блочной надписи за счёт баланса чёрного и белого. А из-за сочетания свисающего элемента буквы ‘д’ и срезанных под прямым углом терминалов ‘з’ между этой парой знаков появлялось чуть больше воздуха, чем хотелось. То, что в шрифте помогает выдерживать ритм и отличать графемы для комфортного чтения, в логотипе может помешать цельному восприятию.
Когда логотип был почти готов, ребята прислали нам свои наработки и попросили найти возможность их внедрить. Это был вариант логотипа, который мог использоваться без знака стеллы, с видоизменённой буквой ‘н’ — её стем разрезался уже знакомой нам контрформой. Мы подготовили несколько вариантов логотипа и наконец-то согласовали финальную графику.
В результате мы сделали логотип в шести версиях под разные задачи: слово «дзен» со стеллой в подушке, слово «дзен» со стеллой без подушки и слово «дзен» без знака, но с контрформой стеллы внутри буквы ‘н’. Каждый вариант логотипа нарисовали в двух версиях: для использования на светлом и на тёмном фоне, то есть в инверсии. Для тёмного фона логотип сделали тоньше, чем для светлого, так как в инверсии всё визуально кажется более жирным, чем есть на самом деле.
Текстовое подсемейство
Для текстового шрифта, если говорить об интерфейсах, есть важные параметры, которым он должен соответствовать. Речь идёт о соотношении роста строчных к прописным, толщинах базовых начертаний и ёмкости шрифта. Да, это ограничивающие рамки, но эти ограничения позволяют шрифту быть удобнее и функциональнее. Если по какой-то причине его заменит (или он сам будет заменять) системный шрифт — San Francisco, Roboto, Arial — пользователь не почувствует дискомфорта от резких перемен, а текстовые блоки и общий вид макета не пострадают. Поэтому любая подобная работа начинается с анализа метрик референсных шрифтов. Дальше следует графика: она немного упрощается, так как текстовый шрифт будет использоваться в мелком кегле, и его основная задача — хорошо читаться.
По этой причине в текстовом подсемействе появились более явные площадки в буквах ‘Кк’ и ‘Жж’. Буква ‘g’ поменялась на одночастную, так как эта форма более привычна и проще для чтения. Асимметричные терминалы срезались под прямым углом. Упростились формы ‘R’ и ‘Яя’ — в дисплейном шрифте их ноги имели лёгкий изгиб, а в текстовом стали прямыми. Инктрэпы и контрформу стеллы в знаках мы слегка приглушили.
Развесовка текстового подсемейства выглядит так: Light — 65 пт, Regular — 90 пт, Medium — 110 пт, Demi Bold — 125 пт, Bold — 145 пт. Это значения толщины стема прописного знака. Они соответствуют ожидаемым значениям интерфейсного гротеска.
Исследование
Когда оба шрифта и логотип были готовы, у команды Дзена возникли сомнения из-за того, что в графике логотипа, дисплейного и текстового шрифтов есть некоторые различия. В частности, у ребят появилось желание добавить асимметричные терминалы из логотипа в шрифт.
«У всех трёх элементов шрифтовой системы есть общие параметры, по которым они объединены в семейство, в гарнитуру, но какие-то детали у них разные — и это нормально. Логотип более акцидентный, текстовый шрифт — менее, так как они выполняют разные функции».
Марина Ходак, дизайн-лид TypeType
Для того, чтобы не быть голословными, мы провели анализ шрифтовых пар с 27 разных сайтов. Основной упор сделали на новостные, информационно-познавательные ресурсы и государственные сайты с приветливым интерфейсом. Кроме того, мы проанализировали бренды, на которые клиент ссылался как на референсные.
Основная цель состояла в том, чтобы сопоставить логотипы и дисплейные шрифты и сделать выводы об их сочетаемости. Вторая задача — проанализировать общность графики в текстовых и дисплейных шрифтах по следующим характеристикам:
- категория шрифта;
- пропорции;
- контраст;
- апертура;
- угол среза терминалов;
- способ присоединения овалов.
«Мы смотрели, какой у каждой из этих площадок логотип, как выглядят дисплейный и текстовый шрифт. Тиражные это шрифты или сделанные на заказ? Есть ли у них похожие характеристики? Все эти данные мы систематизировали, проанализировали и сделали выводы».
Марина Ходак, дизайн-лид TypeType
Вот такие данные нам удалось собрать при сравнении логотипов и дисплейных шрифтов:
- Все ресурсы удалось разделить на три категории:
1) Между логотипом и дисплейным шрифтом есть явное сходство;
2) Сходство есть, но оно не дословное, а на уровне графической рифмы;
3) Рифмы нет и шрифт выбран функциональный, без привязки к логотипу.
- Из 27 рассматриваемых гарнитур 11 были разработаны на заказ специально для проектов, остальные шрифты тиражные.
- Среди всех шрифтов из выборки в 8 случаях сходство между логотипом и дисплейным шрифтом высокое, в 9 случаях — среднее.
- Среди шрифтов, созданных на заказ, в 5 случаях логотипы созданы на основе дисплейного шрифта и имеют явное сходство, в 6 случаях созданы без опоры на логотип, но графически рифмуются с ним.
- Рифма совсем отсутствует только в примерах с системными шрифтами.
Это приводит нас к следующим выводам:
- На основании данной выборки можно говорить о примерно равном распределении логотипов, созданных на основе фирменного шрифта, и рифмующихся с заголовочным шрифтом. Вывод актуален как для тиражных шрифтов, так и для заказных.
- Это значит, что дисплейный шрифт и логотип могут быть почти идентичны, а могут лишь рифмоваться за счёт общей графической характеристики или идеи.
Вторая часть исследования была направлена на анализ дисплейных и текстовых шрифтов. Хотим ознакомить вас с некоторыми выводами:
- При наличии шрифтовой пары дисплейные шрифты распределяются примерно в равных долях между гометрическим, современным и гуманистическим гротесками;
- Если речь идёт об использовании одного семейства на ресурсе, то есть явный перевес в сторону неогротесков (что можно объяснить в первую очередь частым использованием системных шрифтов);
- Среди текстовых шрифтов также наблюдается активное использование неогротесков;
- При наличии шрифтовой пары дисплейные шрифты имеют тенденцию быть нормальной ширины с более полными окружностями;
- Текстовые шрифты имеют вертикальные и даже зауженные пропорции;
- Во всех рассматриваемых случаях отсутствует ярко выраженный контраст (речь о гротесках, а антиквы в выборке практически не представлены);
- При наличии шрифтовой пары в дисплейных шрифтах можно отметить заметный тренд на инктрепы;
- Среди дисплейных шрифтов заметна тенденция к закрытой апертуре;
- При наличии шрифтовой пары апертура текстовых шрифтов скорее будет средней по открытости;
- Во всей подборке видно равное распределение горизонтальных терминалов и срезанных под углом (вертикально срезанные терминалы представлены лишь в двух гарнитурах);
- Явного перевеса в сторону одного из видов примыкания овала к стему не выявлено. Однако можно отметить склонность к плавному присоединению у текстовых шрифтов.
Мы представили нашу аналитику команде Дзена. Через какое-то время ребята вернулись с просьбой всё-таки добавить асимметрии в терминалы дисплейного подсемейства, после чего всю графику согласовали. Оставалось передать шрифты нашим техническим специалистам для мастеринга, кернинга и хинтинга.
Технические работы
Всё, о чём мы рассказали выше — лишь половина работы. Придумать графику и нарисовать буквы недостаточно для того, чтобы получился законченный шрифт. Особенно если речь идёт об использовании гарнитуры такой крупной и многофункциональной платформой, как Дзен.
Мы работали по нашей стандартной схеме: сначала делали мастеринг шрифта — то есть его техническую проверку: тестировали контуры, якоря, апроши, работоспособность фич, заполняли техническую информацию, прописывали необходимые для работы вариативного шрифта оси, проверяли, чтобы все значения были правильно указаны и так далее. Затем приступили к кернингу и параллельно делали хинтинг — это внедрение в знаки специальных инструкций для того, чтобы шрифт корректно отображался на экранах различных систем в разных кеглях.
«Прежде всего это актуально для систем Windows, потому что, например, на iOS своя система растеризации, он полностью игнорирует все встроенные хинты (инструкции), и по-своему отображает буквы. А вот если мы откроем неотхинтованный шрифт в Windows, буквы могут „плясать“ или залипать. Чтобы этого не происходило, мы прописываем различные инструкции и добиваемся равномерного отображения. Важно понимать, что хинтинг делается не для того, чтобы буква максимально сохраняла свою форму, это невозможно. Чем меньше кегль, тем меньше пикселей нужно для отображения знака, и ту же самую форму физически невозможно передать. Хинтинг нужен именно для считывания знака».
Станислав Тихонов, Шрифтовой инженер TypeType
Особенно важна техническая доработка интерфейсных шрифтов, так как в этом случае шрифт напрямую влияет на опыт пользователя от взаимодействия с интерфейсом. Текст должен чётко считываться без лишних усилий. А ещё текст должен выглядеть привлекательно, потому что его внешний вид будет сказываться не только на восприятии шрифта самого по себе, но и приложения или сайта в целом. Поэтому предельно важно не только корректно отрисовать шрифт, но и настроить его, чтобы он выполнял свою задачу.
Отдельно хочется рассказать о технической работе над вариативным шрифтом. Дело в том, что вариативный шрифт, в отличие от статичного, в одном файле включает включает в себя все заложенные в нём начертания. Соответственно, в работе с ним есть определённые нюансы. Например, при отрисовке, а затем и при технической доводке мы должны добиться того, чтобы в самом лёгком и самом жирном начертаниях совпадало количество точек в букве. Потому что иначе интерполяция не будет происходить корректно.
«Есть мастера, так называемые опорные начертания, а между ними есть инстансы — это то, что не отрисовано шрифтовым дизайнером, а генерируется путём интерполяции между мастерами. И если возникнет какая-то ошибка, мы сразу увидим её последствия — кривые терминалы, лишние наплывы, заломы и прочее. Поэтому для вариативного шрифта особенно важно, чтобы, во-первых, были максимально зачищенные контуры, во-вторых — чтобы между начертаниями была максимальная консистентность. Тогда при работе с готовым вариативным шрифтом начертания будут сменяться максимально плавно и естественно».
Станислав Тихонов, Шрифтовой инженер TypeType
Как правило, сначала мы делаем хинтинг статичных шрифтов, задаём инструкции, а затем, когда «перекидываем» их на вариативный шрифт, вносим некоторые коррективы.
Ещё одна особенность заключается в том, что в общий вариативный файл не входит наклонное начертание, которое сделано для одной толщины, и потому вынесено отдельно, так как для корректной интерполяции в рамках одного файла число прямых и наклонных мастеров должно совпадать.
Как мы уже упоминали, шрифт должен был соответствовать определённым требованиям, чтобы без проблем заменить собой системные. И здесь было несколько важных моментов: например, нужно было решить, какая будет базовая линия — как в San Francisco (для IOS) или Roboto (для Android). Мы тестировали различные версии. В результате команда Дзена пришла к выводу, что шрифт необходимо настраивать и под Android, и под IOS, поэтому мы сделали версии шрифта под обе системы.
Базовая линия — это линия, на которой «стоят» все буквы. Это условный ноль, от которого высота отсчитывается вверх или вниз. И поскольку в разных шрифтах метрики отличаются, это влияет на смещение базовой линии выше или ниже.
Так, в iOS в качестве системных шрифтов используются шрифты Apple — у них свои метрики и параметры. Если мы попробуем поставить туда шрифт, который не адаптирован под эти метрики, это приведёт к тому, что текст (например в кнопках, в элементах, где расположены фреймы) будет либо «подпрыгивать» вверх, либо уходить вниз — то есть он будет не отцентрован. Похожую картину мы будем наблюдать и на Android, поскольку там свои метрики. Поэтому важно адаптировать шрифт и под iOS, и под Android, прописав свои метрические значения.
«Например, одна из версий шрифта по вертикальным метрикам должна была подстраиваться под San Francisco. Но и здесь есть свои нюансы. Во-первых, этот шрифт отрисован при большем разрешении. Практически все наши шрифты отрисованы с разрешением 1000 UPM, а San Francisco — с 2048 UPM. Поскольку разрешение разное, при перерасчётах возникает небольшая погрешность. Метрики будут отличаться, грубо говоря, в 2,48 тысячных раза. Поэтому при подгонке шрифта приходилось округлять значения.
Станислав Тихонов, Шрифтовой инженер TypeType
Мы объяснили это команде Дзена, и сначала задали все параметры так, как они нас просили, а потом скорректировали с учётом этих погрешностей. Чтобы оба шрифта находились чётко на одной линии, не смещаясь ни на пиксель вверх или вниз.
Результат
Итак, у нас получилась гарнитура Stella Sans, состоящая из дисплейного и текстового подсемейств.
Stella Sans Display включает:
- 3 начертания: Regular, Medium и Bold;
- 271 знак в каждом начертании;
- 60+ языков;
- Встроенные логотипы.
Stella Sans Text включает:
- 6 начертаний: Light, Regular + Italic, Medium, Demi Bold, Bold;
- 272 знака в каждом начертании;
- 60+ языков;
- Встроенные логотипы.
Stella Sans способна решать поставленные задачи и стала официальным шрифтом бренда. Шрифт уже используется в разделе «О Дзене», посвящённом платформе, и в коммуникациях.
