В этой статье мы разберёмся, что такое удобочитаемость и разборчивость и в чём разница между ними, каким должен быть разборчивый шрифт и от чего зависит читабельность текста

Что такое разборчивость

Определение разборчивости (англ. legibility) следующее: это различимость отдельных символов, лёгкость их распознавания. Если шрифт разборчивый, вы без труда отличите друг от друга похожие по форме символы даже в мелком тексте. Например, не перепутаете «а» с «о» или «г» с «т».

Что такое удобочитаемость

Удобочитаемость, читабельность или читаемость (англ. readability) чаще всего употребляются как синонимы. Определение у этих терминов в данном контексте одно — лёгкость восприятия не отдельных букв, а всего текста целиком. Удобочитаемость шрифта определяется тем, насколько читателю удобно и легко «скользить» по строкам текста, не отвлекаясь и не «спотыкаясь». Разборчивость — одна из составляющих удобочитаемости.

Составляющие читаемости и разборчивости

Факторы, влияющие на разборчивость, в основном связаны с рисунком самих знаков: их формой, пропорциями, шириной и деталями. Чем чётче и проще очертания букв, тем выше разборчивость.

Читабельность же зависит не только от формы букв, но и от того, как знаки взаимодействуют между собой. Сюда входят такие факторы, как межстрочный и межбуквенный интервал, размер шрифта и многое другое.

Важно учитывать, что шрифт может быть разборчивым, но при этом неудобным для чтения больших массивов текста, и наоборот. Ниже мы подробнее рассмотрим факторы, влияющие на разборчивость и читабельность.

Как заставить типографику улучшить опыт чтения

Чтобы типографика работала в интересах пользователя, нужно подходить к выбору шрифта и оформлению текста комплексно. На первом этапе стоит обеспечить базовую разборчивость, выбрав подходящий шрифт, а затем проверить его удобочитаемость и настроить дополнительные параметры.

Как повысить разборчивость вашего шрифта или выбрать разборчивый шрифт

Высота по оси X

Высота по оси X, или Х—height, — это заданный в шрифте параметр высоты строчных букв относительно прописных; линия роста строчных знаков без учёта свисаний. Исследования показывают, что этот параметр, как и длина верхних и нижних выносных элементов, напрямую влияет на разборчивость шрифта.

Так, буквы с выносными элементами, как у «b» или «p», распознаются легче, чем те, у которых их нет. Увеличение длины этих элементов улучшает распознавание для ряда букв. А увеличение высоты букв по оси Х положительно влияет на распознавание всех символов. Соответственно, чтобы получить разборчивый текст, стоит выбирать шрифт с большей Х—height.

Вес

Вес — это толщина штрихов или жирность символов. Этот параметр влияет как на разборчивость отдельных символов, так и на общую читабельность.

Лучше всего читаются средние по весу начертания — то есть регулярные или базовые. Слишком тонкие линии будут теряться, а слишком жирные — «слипаться» в плотную массу, мешая разборчивости отдельных символов.

Контраст штрихов

Контраст — это соотношение толщин основных и дополнительных штрихов в шрифте. Шрифт может быть неконтрастным, малоконтрастным, контрастным и сверхконтрастным.

Наиболее разборчивые и хорошо читаемые шрифты — неконтрастные и малоконтрастные. Контрастные и сверхконтрастные шрифты могут быть неразборчивы, особенно в маленьком кегле, так как тонкие штрихи могут теряться.

Ширина

Узкие или широкие шрифты могут стать интересным дизайнерским решением, однако они хорошо подходят для акциденции, а не для использования в текстовом наборе. Зауженные или расширенные пропорции будут мешать и разборчивости, и удобочитаемости. Поэтому для повышения читабельности текста выбирайте шрифты со стандартными пропорциями.

Апертура

Апертура — это степень открытости знака. Например, если у буквы «С» маленькое расстояние между верхним и нижним терминалом — это закрытая апертура, а если большое — это открытая апертура. Как показывают исследования, закрытые апертуры распознаются хуже, в то время как открытые апертуры способствуют большей разборчивости и, следовательно, общей читаемости.

Дисплейные и текстовые шрифты

Шрифты по назначению можно разделить на акцидентные и текстовые.

Акцидентные, или дисплейные шрифты, обладают ярким, выразительным характером и часто выглядят необычно. Они предназначены для привлечения внимания и используются в акцентных надписях и заголовках, поэтому их нередко называют заголовочными. Часто акцидентные шрифты насыщены множеством декоративных элементов, которые эффектно выглядят в большом кегле, но теряются в малом размере, затрудняя восприятие текста. Также им обычно присущ высокий контраст: он усиливает выразительность, но ухудшает читаемость при небольшом размере. Такие шрифты хорошо смотрятся в крупных надписях, но не подходят для длинных текстов.

Текстовые шрифты, напротив, разрабатываются для набора длинных текстов. У них более сдержанный характер, лаконичный дизайн без лишних деталей и низкий контраст. Это способствует разборчивости знаков шрифта и читабельности всего текста.

Как повысить удобочитаемость текста

Засечки

Можно найти разные мнения о том, как засечки влияют на читабельность. Кто-то утверждает, что засечки помогают чтению, а кто-то считает, что они мешают. Однако если исследовать этот вопрос глубже, становится понятно, что ни одно из этих утверждений не верно.

Исследования показывают, что наличие или отсутствие засечек не влияет на скорость чтения как для людей с нормальным зрением, так и со слабым. Удобочитаемый текст можно набрать как шрифтом с засечками, так и без засечек — всё зависит от ряда других факторов, о которых мы расскажем ниже.

Размер шрифта

Мелкий текст быстрее утомляет глаза. Минимальный размер удобочитаемого текста на мониторе — 12 px, но для объёмных текстов рекомендуется использовать размер от 14 до 16 px; для мобильной версии сайтов и приложений — 16 px; в печати — от 9 pt для длинных текстов.

Оптические размеры

Оптические размеры шрифта — это специально адаптированные версии одного и того же шрифта, оптимизированные для использования в разных кеглях.

Чтобы повысить читаемость и избежать искажений при использовании одного и того же шрифта в разных размерах, можно использовать гарнитуры с начертаниями, адаптированными для разных оптических размеров. В таких шрифтах графика знаков во всём семействе общая, но в зависимости от оптического размера она становится либо более детальной (для крупных размеров), либо «обобщается» и «огрубляется» (для мелких).

Регистр букв

Набирать текст только заглавными буквами — плохая идея. Читабельность только ухудшится от такого приёма. Его можно использовать лишь точечно: например, для интонационного выделения слов.

Межстрочный интервал

Оптимальный межстрочный интервал для текстового набора — 120–150% от кегля шрифта. Большой или слишком маленький интервал затрудняет движение взгляда по строкам.

Кернинг

Кернинг — это избирательное увеличение или уменьшение интервала между двумя символами в зависимости от сочетания их форм. Он делается для того, чтобы создать максимально ровный набор. Кернинг настраивает разработчик шрифта на этапе его создания, для простого пользователя такая настройка недоступна почти ни в одной программе. Подробнее об этом мы рассказывали здесь.

Кернинг напрямую влияет на читабельность: текст, набранный шрифтом с кернингом, воспринимается гораздо лучше. Поэтому выбирайте качественные шрифты с профессионально настроенным кернингом, чтобы ваш текст было удобно читать.

Длина строки

Строки должны быть достаточно короткими, чтобы было удобно переводить взгляд с одной строки на другую. Важно учитывать, что в разных средах оптимальная длина строки будет разной. Например, в печатном наборе — 50-75 символов в строке, на мониторе компьютера — 60-80 символов, на экране смартфона — 30-40 знаков.

Цвет и контраст

Текст должен быть контрастным по отношению к фону. Классика — чёрный шрифт на белом фоне, но можно использовать и другие цвета: например, тёмно-серый или тёмно-зелёный. Главное — сохранять контрастность и избегать ярких оттенков. Вы можете использовать этот сервис для проверки контрастов цветов в моделях RGB и HSL.

Хинтинг

Важно, чтобы при увеличении или уменьшении масштаба или отображении на разных носителях шрифт не искажался и оставался читабельным. Поэтому стоит выбирать качественные шрифты с профессионально настроенным хинтингом. Если шрифт необходимо использовать на экране не слишком высокого разрешения и/или на экране в мелком размере, то высок риск, что шрифт без хинтинга будет отображаться искаженно, либо вовсе станет нечитабельными. Подробно о том, что такое хинтинг, мы рассказывали здесь.

Вёрстка

На читабельность текста влияет не только шрифт, который вы выбираете, но и то, как вы его применяете и оформляете страницу, то есть вёрстка. Ниже мы перечислили важные топографические характеристики, которые помогут сделать текст лучше для восприятия.

Иерархия. Заголовки, подзаголовки, списки и акценты помогают читателю ориентироваться в тексте и быстрее находить нужную информацию. Поэтому важно не только использовать правильный шрифт, но и создавать визуальную иерархию в тексте.

«Висячие» строки. Начальные или конечные строки, оказавшиеся в конце или в начале страницы соответственно и как бы оторвавшиеся от основного текста. Они мешают восприятию текста и выглядят неэстетично. В неформальной лексике их иногда называют вдовами и сиротами (widows and orphans).

«Висячие» предлоги. Короткие предлоги в конце строки, связанные по смыслу со словом, перенесённым на следующую строку. Из-за такого разрыва может теряться смысл и ухудшаться восприятие текста, поэтому лучше его избегать. Однако данное правило не распространяется на вёрстку в вебе.

Коридоры. Пробелы в смежных строках, расставленные так, что из них образуется вертикальный или наклонный ряд. Это дефекты вёрстки, которые отвлекают внимание и ухудшают читабельность, поэтому стоит их избегать.

Расстановка переносов. Переносы помогают избегать лишних пробелов и выравнивать текст без искажений. Важно грамотно настраивать переносы с учётом правил разных языков.

Разборчивость и читабельность: что важнее

Нельзя однозначно сказать, что важнее, ведь зачастую они дополняют друг друга. В небольших акцидентных надписях, например на вывесках, в названиях или логотипах, важна разборчивость, чтобы слово или фраза считывались правильно. В больших текстах критична как разборчивость отдельных символов, так и общая читабельность, к тому же первое влияет на второе. Для того чтобы понять, какая характеристика для вас важнее, нужно определить, для каких задач вам нужен шрифт.

Надеемся, наша статья помогла вам понять разницу между понятиями разборчивость и читаемость. Однако важно понимать, что универсальных советов не существует. Чтобы по-настоящему разобраться в этой теме, важно ознакомиться с каждой из характеристик более подробно. Самым заинтересованным читателям рекомендуем книгу «Reading Letters: Designing for Legibility» Софи Байер. А если вы ищете удобочитаемые шрифты для вашего проекта, смотрите нашу подборку.

При поддержке Группы Мантера мы создали новое шрифтовое семейство для Государственного Эрмитажа — Hermitage Type Family. Гарнитура будет использоваться во всём цифровом контенте Эрмитажа — её уже можно увидеть на сайте и обновлённой стартовой странице его мобильной версии. О целях, поисках, процессе разработки и о том, как отразить в современном шрифте исторический контекст, не отсылаясь к конкретным эпохам, рассказываем в статье

Изучение шрифтовой истории Эрмитажа

Итак, перед нами стояла интересная и очень ответственная задача — разработать шрифтовую гарнитуру для Государственного Эрмитажа. И для того чтобы понять, как она должна выглядеть, мы прошли достаточно большой путь.

Мы знали, что у Эрмитажа богатейшая шрифтовая история, и выбор современных шрифтов для работы в музее так или иначе зависит от неё. Например, активно использовалась старостильная антиква Cormorant. Также у музея был проект по созданию своей кириллицы для шрифта Ingeborg. Однако даже в комплекте эти два шрифта не закрывали все необходимые задачи. Кроме того, оба они имеют достаточно сильный исторический бэкграунд — и в графике, и в плане эмоциональной окраски. Соответственно, нейтральными их назвать нельзя.

«С одной стороны, нейтральность для шрифта — это хорошо, потому что эта характеристика делает его многофункциональным. Таким шрифтом можно оформлять документы, использовать его в приложениях и на сайтах. Но в то же время нейтральные шрифты несколько безликие. А Эрмитажу, конечно же, хотелось свой собственный шрифт, который будет отражать его ценности, его многовековую историю».

Марина Ходак, дизайн-лид TypeType

Поэтому нам предстояло создать такой шрифт, который будет сочетать и исторические отсылки, и универсальность. Было важно, чтобы он подходил для разных задач — от оформления материалов для выставок с привязкой к разным эпохам до использования в коммуникациях.

Одним из важнейших (и к тому же самым узнаваемым) воплощением образа Эрмитажа в шрифте служит логотип музея. К нему мы и обратились в поисках источника вдохновения. Так, в его основе лежит классицистическая антиква с зауженными пропорциями и характерными формами. Узнаваемые детали логотипа — пламевидный язык у буквы «Э», длинные вертикальные засечки и изогнутые ножки у «Ж». Дескриптор же набран шрифтом Times.

Опираясь на эти знания, мы перешли к подбору шрифтов из коллекции TypeType для кастомизации.

Подбор шрифтов для кастомизации

Для начала мы попробовали подобрать шрифт, подходящий к логотипу, — на замену Times. Выбрали пять вариантов: TT Livret, TT Fellows, TT Ricordi Marmo, TT Wellingtons, TT Knickerbockers. Шрифты были подобраны исходя из разной логики и с перспективой развития. Например, TT Knickerbockers прекрасно сочетался с логотипом по ритму — можно представить, что это ряд колонн в одном из музейных залов. А TT Ricordi Marmo сочетает в себе элементы гротеска и антиквы. Нам показалось, что это хорошая аллегория всеобъемлющего шрифта. Вместе с командой Эрмитажа мы смотрели, как каждый из этих шрифтов выглядит в макетах, и обсуждали, какой из них лучше подходит для кастомизации. В результате остановились на TT Livret — функциональной классицистической антикве, включающей дисплейное и текстовое начертания.

С этим шрифтом мы и продолжили работать. Точкой опоры для нас стал логотип. Мы стремились поддержать существующую графику и создать визуальную связь между логотипом и шрифтом, но не буквально повторять элементы, а сделать мягкое взаимодействие, которое будет считываться интуитивно. При этом стоит понимать, что это более глобальная задача, чем кажется изначально.

«Например, в букве „Э“ в логотипе есть характерный изогнутый язык и колючая верхняя засечка. При этом в TT Livret эти элементы совсем другие. Значит, нам нужно перерисовать эту букву, и на другие буквы это тоже повлияет. Если мы меняем засечки в „Э“, они меняются во всех похожих знаках. Мы не можем просто перерисовать три буквы, нам нужно перерисовать практически все знаки, где есть похожие элементы. Кроме того, как только мы начинаем менять какие-то детали, буквы перестают гармонично взаимодействовать друг с другом — значит, нам нужно дополнительно проработать пропорции и сбалансировать шрифт».

Марина Ходак, дизайн-лид TypeType

Так, мы добавили в TT Livret несколько деталей из логотипа — «Ээ» с пламевидным языком, «А» с завышенной средней линией и «Жж» с изогнутыми ножками. В пару к нему подобрали неогротеск TT Neoris, над кастомизацией которого тоже начали работать. Эти два шрифта уже отлично работали в паре и выглядели сбалансировано благодаря схожим вертикальным пропорциям. Мы взяли их за основу и после всех согласований перешли к самому интересному — поиску индивидуального стиля эрмитажного шрифта.

Создание «эрмитажного стиля»

Нашей задачей было создать гармоничную и функциональную шрифтовую пару из дисплейного и текстового шрифтов. Дисплейная антиква (на основе TT Livret) — для работы там, где музею нужно показать свой голос и характер, и функциональный гротеск (на основе TT Neoris) — более нейтральный и читаемый в массиве текста, для решения практических задач.

Первое, что нам нужно было скорректировать в TT Livret, — это контраст. Нужно было сделать его ярче, чтобы привести шрифт к более торжественному звучанию и добавить дисплейности.

Всего в TT Livret есть три подсемейства: Text, Subhead и Display. Мы, конечно, хотели работать со всеми. Но из-за ограниченных ресурсов пришлось идти в направлении «дисплейная антиква + функциональный гротеск». TT Livret при этом мы довели до той степени контраста, который нравился клиенту. Команда Эрмитажа, помимо прочих, тестировала шрифт TT Tsars и попросила нас сделать антикву с таким соотношением тонких и жирных штрихов. Это решение стало окончательным для понимания того, что мы делаем именно заголовочный, титульный шрифт, а не текстовый.

В начале общения нам было важно договориться об общем направлении, чтобы сделать первый шаг. Поэтому мы прописали несколько пунктов, которые казались логичными для старта:

• Изменить форму буквы «а», так как она очень частотная. Если её поменять, весь шрифт приобретёт новый оттенок
• Сделать взаимодействие с логотипом в буквах «Ээ», «Кк», «Жж»
• Изменить формы запятых, восклицательного и вопросительного знаков

Коллеги из Эрмитажа изучили нашу коллекцию шрифтов и пришли уже подготовленными, со своими идеями. Например, им очень понравилась идея с разомкнутыми полуовалами в некоторых буквах («Вв‎», «Рр‎», «Ьь‎») в шрифте TT Tsars. Эти детали выглядят нарядно и отсылают к кириллическим титульным шрифтам 18 века.

В шрифте TT Jenevers им понравились формы восклицательного и вопросительного знаков. В итоге мы адаптировали эти графемы для нового эрмитажного шрифта.

«В шрифте много разных отсылок — за счёт своих пропорций, строгого сдержанного ритма и высокого контраста он относится к современным антиквам, но некоторые детали отсылают к историзму. Однако эти отсылки создают привязку к конкретному времени только тогда, когда шрифт попадает в определённый контекст. Если использовать его в нейтральном контексте, он выглядит просто как красивая, торжественная антиква. Фирменная, узнаваемая — да, но без отсылки к конкретным эпохам. А если использовать шрифт, например, в оформлении выставки или каталога, то начинают раскрываться те детали, которым нужен дополнительный фон, чтобы заиграть».

Марина Ходак, дизайн-лид TypeType

В латинице есть острые засечки, достаточно резкие холодные формы и статические элементы, что особенно заметно в прописных. А в строчных и в некоторых других деталях — в ножках, каплях, букве «Q» — появляются более эмоциональные, мягкие элементы. Из-за этого шрифт становится очень функциональным с точки зрения эмоционального выражения. Получается, он может решать разнообразные задачи в зависимости от контекста.

Если сравнивать кастомизированную версию и оригинальный шрифт, станет очевидно, что они совсем разные. Потому что мы не просто внесли точечные изменения, а также изменили ритм, характер и идею шрифта. В каждый знак вложили ту графику, которую последние несколько месяцев искали вместе с командой Эрмитажа.

Отдельной интересной задачей стала работа с курсивом (тру италиком). У курсива для TT Livret узкие пропорции, очень беглый ритм и сильный наклон — около 16°. Но шрифт в таком варианте оказался слишком узким для задач Эрмитажа.

«Основная функция курсива — это выделить смысловые блоки в тексте или добавить акцент. И италику не нужно быть таким же легкочитаемым, как обычному прямому шрифту. Есть разные способы его деформации: наклон, сужение, осветление или затемнение. Суть в том, чтобы при взгляде на текстовый блок читатель быстро выхватывал изменение ритма текста. Но есть и ещё одна функция италика — быть просто шрифтом. Обе эти концепции имеют право на существование. И мы решили подумать, что можем сделать».

Марина Ходак, дизайн-лид TypeType

Мы немного уменьшили угол наклона — с 16 до 12 градусов; облегчили для чтения и понимания некоторые формы, в частности, «к» и «ж»; упростили засечки, за счёт чего в тексте появилось больше воздуха. Знаки стали шире, спейсинг увеличился. Шрифт превратился в приятную округлую антикву в курсивном варианте. За счёт угла наклона и более зауженных пропорций он всё ещё хорошо цепляет глаз в наборе и выглядит светлее, чем основной текст. Благодаря такому решению в шрифтовой палитре Эрмитажа появился ещё один комплект функциональных шрифтов вместо более декоративных и редко используемых.

Интересно, что в шрифт TT Neoris уже при разработке была заложена графика, которая нашла максимальное применение сейчас, при создании пары к эрмитажной антикве. При работе с этим неогротеском изначально нам нужно было лишь добавить альтернативные знаки с изогнутыми ногами в основную кассу. Однако позже мы доработали ещё некоторые элементы: например, изменили буквы «Уу» и форму единицы — сделали их более плавными для лучшей рифмы с антиквой.

Шрифт очень хорошо читается в мелком кегле, но в то же время разработан так, что при увеличении размера становится более интересным в графике, раскрывая детали.

Результат — Hermitage Type Family

Получилась функциональная шрифтовая гарнитура, которая объединяет два подсемейства: Hermitage Celestial и Hermitage Grotesque. Каждое из них включает шесть начертаний: Regular, Medium, Bold и соответствующие италики.

Hermitage Celestial — дисплейная антиква для работы в крупном кегле. Её основная задача — отражать традиции Эрмитажа, быть узнаваемой и привлекать внимание. Именно в неё шрифтовые дизайнеры TypeType вложили максимум характерных элементов и индивидуальной пластики, объединив современность и бережные отсылки к наследию времён. Шрифт не относится к конкретной эпохе, но его детали раскрываются и звучат по-разному в зависимости от контекста. Сочетание мягких элементов и более холодных, сдержанных решений создаёт большую эмоциональную и графическую вариативность для применения шрифта.

Курсивные начертания добавляют больше мягкости в характер гарнитуры. Их можно использовать не только для смысловых и контекстных выделений в тексте, но и как полноценный шрифт в небольших текстовых блоках, требующих особого звучания.

Hermitage Grotesque — функциональный гротеск, относящийся к категории интерфейсных шрифтов. Его графика разработана так, что он, с одной стороны, очень хорошо читается в мелком размере, при этом с увеличением кегля раскрывается более детально и приобретает индивидуальность. Характер графики можно значительно менять с помощью стилистических сетов, заложенных в оригинальный шрифт.

Hermitage Celestial и Hermitage Grotesque хорошо работают в паре благодаря тому, что их пропорции схожи, а в характерах сочетаются мягкость и строгость. Шрифты дополняют друг друга как графически, так и функционально, позволяя решать разнообразные задачи.

Шрифты будут использоваться во всех цифровых проектах Эрмитажа, отражая историю и ценности музея и задавая тон коммуникации.

«У нас было несколько эрмитажных шрифтов. Некогда, в 1920-х годах, значительная часть научных сотрудников Эрмитажа умела набирать шрифты — Иосиф Абгарович Орбели тоже. Один такой набранный текст, посвящённый заседанию памяти Алишера Навои, лежит в Архиве. Этот сборник был набран во время войны. Так что это важная эрмитажная традиция, когда шрифт становится частью памяти Эрмитажа».

Михаил Пиотровский, генеральный директор Государственного Эрмитажа

В хорошем облачном хранилище легко найти нужный макет среди десятков других, тяжёлые файлы загружаются быстро, а большой объём памяти позволяет собирать все референсы и проекты. Мы нашли девять лучших сервисов для хранения файлов, которые работают без VPN, и рассказали об их особенностях, размере хранилища и стоимости

Яндекс Диск

Доступен в веб-версии, на iOS, Android, Windows, macOS, Linux

Стоимость: от 129 ₽ в месяц за 200 ГБ при оплате за год. При оплате пользователь получает доступ ко всей экосистеме «Яндекс 360»

Бесплатный объём — 5 ГБ

«Яндекс Диск» — часть экосистемы «Яндекс 360», куда входят ИИ-ассистент Алиса Про, «Почта», «Календарь», «Заметки», приложение для видеовстреч и чатов «Телемост», онлайн-редактор «Документы» и сервис «Доски». Не нужно регистрироваться в сервисах по отдельности: вы входите под одной учёткой в «Яндекс 360» и получаете доступ ко всему сразу. Можно настроить двухфакторную авторизацию, привязав номер телефона, и Touch Id, чтобы обезопасить файлы от посторонних.

Ключевое преимущество сервиса — возможность быстро и без потери качества загружать объёмные дизайн-макеты, скринкасты и записи видеовстреч и экономить место на устройстве. Для файлов больше 2 ГБ лучше скачать программу «Яндекс Диск», чтобы не терять скорость загрузки.

На тарифе «Для себя» можно загружать файлы до 50 ГБ, размер хранилища — от 200 ГБ до 2 ТБ. Тариф «Для семьи» подходит для любой группы до восьми человек: в распоряжении каждого будет 200 ГБ, 1 или 2 ТБ. На тарифе «Для работы» дают загрузить большие материалы до 100 ГБ, объём хранилища — от 3 до 30 ТБ. На рабочем тарифе действует тройной лимит загрузки в месяц. Например, если размер вашего «Диска» 3 ТБ, то за месяц вы можете загружать и удалять файлы с общим размером 9 ТБ. Это удобно, если вы часто обновляете материалы. Помимо отдельных файлов, загружать на «Диск» можно и целые папки.

У «Диска» есть интеграция с другими сервисами «Яндекса», например «Почтой» или «Календарём».

Благодаря поиску файлов, основанному на «умных» ML-алгоритмах, визуал находится за секунды: достаточно написать, что на нём изображено.

Хранилище доступно на всех устройствах: в браузере, мобильном или веб-приложении. Можно настроить автозагрузку: когда вы будете с мобильного скроллить сайты с дизайном и сохранять понравившиеся референсы, они автоматически попадут на «Диск» и не заполнят память телефона.

Файлами на «Диске» можно делиться с коллегами и заказчиками с помощью ссылки. 

Данные на «Диске» хранятся в собственных дата-центрах «Яндекса» в России и шифруются при передаче — никто их не перехватит. Файлы автоматически проверяются встроенным антивирусом, поэтому загружать и скачивать файлы с «Диска» безопасно.

Google Диск

Доступен в веб-версии, на iOS, Android, Windows и macOS

Стоимость: от 139 ₽ в месяц за 100 ГБ при оплате за год. В России сложно оплатить сервис. Для этого используют иностранную карту, подарочные карты Google Play и сервисы-посредники

Бесплатный объём — 15 ГБ

Чтобы воспользоваться «Диском», достаточно авторизоваться через почту Google. На подписке для личных аккаунтов Google One есть три тарифа: Basic на 100 ГБ, Standard на 200 ГБ и Premium на 2 ТБ. Можно добавить в подписку до пяти пользователей, при этом у каждого будет своё изолированное облако.

Больше возможностей у пользователей корпоративных тарифов Google Workspace. Это экосистема, куда помимо «Диска» входят 15 сервисов, например ИИ-инструмент для обучения NotebookLM или сервис для видеозвонков. Здесь есть тарифы на 30 ГБ, 2 и 5 ТБ для каждого пользователя.

В «Диске» есть поиск по хранилищу, но работает он плохо. Часто выходят документы, в которых нет искомых слов. Изображения находятся, только если у них есть корректное описание или название.

На «Диск» можно загружать отдельные файлы и целые папки и делиться ими по ссылке. Максимальный размер для изображений — 5 ТБ, для презентаций — 100 МБ.

С помощью расширения для Google Chrome можно сохранять на «Диск» веб-контент: ссылки, изображения, аудио и видео.

Dropbox

Доступно в веб-версии, на iOS, Android, Windows и macOS, Linux

Стоимость: от 9,99 $ в месяц за 2 ТБ при оплате за год. В России сложно оплатить сервис: нужна иностранная карта

Бесплатный объём — 2 ГБ

Есть четыре тарифа, самый большой — на 15 ТБ — предназначен для команд и стоит от 24 $ в месяц за пользователя при оплате за год. Максимальный размер файлов ограничивается размером хранилища и не может превышать 2 ТБ.

Дают делиться файлами по ссылке или почте, в том числе пересылать файлы до 250 ГБ с помощью Dropbox Transfer.

В зависимости от тарифа удалённые файлы хранятся в архиве 30 дней, полгода или год — удобно, если потребуется восстановить материалы 

Есть интересные функции для совместной работы. Можно назначать роли для администрирования общего пространства, брендировать контент, просматривать отчёты по действиям над каждым файлом. В Dropbox Replay дают редактировать и комментировать видео и картинки.

Есть импорт из «Google Диска» и OneDrive, а также поиск по файлам. Однако работать он будет, если вы заранее задали теги изображениям.

Облако Mail.ru

Доступно в веб-версии, на iOS, Android, Windows и macOS

Стоимость: от 83 ₽ в месяц за 256 ГБ при оплате за год

Бесплатный объём — 8 ГБ

Чтобы начать пользоваться «Облаком», нужно зарегистрироваться по почте Mail.ru или по VK ID.

Есть четыре тарифа, которые позволяют загружать файлы до 100 ГБ. Дополнительные 256 ГБ будут стоить 83 ₽ в месяц, 2 ТБ — 158 ₽ в месяц при оплате за год. Пользователи тарифов могут включить безлимитную автозагрузку файлов с телефона в «Облако», при этом контент не займёт место в хранилище.

Семейный тариф на 1 ТБ подойдёт для совместной работы с коллегами — он стоит от 149 ₽ в месяц при оплате за год.

В «Облаке» есть поиск, но не по содержанию, а по названию файла. Также хранилище узнаёт лица, достопримечательности и объекты на изображениях и создаёт тематические папки. Файлами и папками можно делиться по ссылке, установив срок её действия — от часа до года.

Все файлы перед загрузкой проверяются антивирусом Dr. Web. Можно настроить двухфакторную авторизацию, а в мобильном приложении — вход по PIN-коду, Touch ID и Face ID.

Есть полезное приложение «Диск-О» для Windows и macOS. Это агрегатор, который поможет перенести данные с одиннадцати других хранилищ в «Облако Mail.ru» или создать на любом диске резервные копии файлов. Стоимость использования «Диска-О» — от 149 ₽ в месяц при оплате за год.

iCloud

Доступно в веб-версии, Windows, встроено на iOS и macOS

Стоимость: от 0,99 $ в месяц за 50 ГБ. В России сложно оплатить сервис. Для этого используют счёт мобильного у провайдеров МТС и «Билайн»

Бесплатный объём — 5 ГБ

iCloud по умолчанию встроен во все устройства Apple и позволяет получить дополнительные 50, 200 ГБ, 2, 6 или 12 ТБ. Последний объём обойдётся в 60 $ в месяц. Можно настроить автоматическую загрузку в облако всех файлов с iPhone или Mac, чтобы ничего не потерять.

Максимальный размер файлов для загрузки Apple не указывает, но без проблем загружаются длинные скринкасты на 400 МБ.

Шеринг запутанный и не самый удобный: поделиться ссылкой можно только через веб-приложение, с телефона же даёт отправить файл целиком. iCloud включает iCloud Drive для всех документов и «iCloud Фото» для видео и фото. Процесс создания ссылок у них различается.

MediaFire

Доступно в веб-версии, на iOS, Android, Windows и macOS

Стоимость: от 3,99 $ в месяц за 100 ГБ при оплате за год. В России сложно оплатить сервис: нужна иностранная карта

Бесплатный объём —  1 ГБ

Для работы с облаком нужно выбрать тариф и зарегистрироваться, например через Google.

С размером хранилища на бесплатном тарифе что-то странное. На странице с тарифами сказано, что бесплатно доступно 10 ГБ, при этом максимальный размер загружаемого файла — 5 ГБ. По факту после регистрации вы получаете всего 1 ГБ. Скорость загрузки файла часто падает до нуля, особенно если его вес больше 150 МБ, что заметно хуже конкурентов.

Чтобы загружать файлы 50 ГБ, потребуются платные тарифы на 100 ГБ или 1 ТБ. Второй стоит от 5,83 $ в месяц при оплате за год. Также на платных тарифах не будет рекламы и можно настроить пароли на файлы и папки и одноразовые ссылки для шеринга.

Microsoft OneDrive

Доступно в веб-версии, на iOS, Android, Windows и macOS

Стоимость: от 1,66 $ в месяц за 100 ГБ при оплате за год. В России сложно оплатить сервис: нужна иностранная карта, PayPal или Google Pay

Бесплатный объём — 5 ГБ

OneDrive — это часть экосистемы Microsoft, поэтому здесь есть интеграция с такими продуктами, как Word, Excel и PowerPoint. Зарегистрироваться в хранилище можно через аккаунт Google.

Помимо бесплатного тарифа, есть ещё три: базовый на 100 ГБ за 1,66 $ в месяц при оплате за год, персональный на 1 ТБ за 8,3 $ и семейный на 6 ТБ за 10,8 $. На платных тарифах можно настроить совместную работу и создать защищённые папки.

В хранилище дают загружать как отдельные файлы до 250 ГБ, так и целые папки, и делиться ими.

Хорошо работает поиск: он ищет изображения по тому, что на них изображено.

Можно настроить импорт из «Google Диска» и Dropbox, а также резервное копирование со всех устройств.

pCloud

Доступно в веб-версии, на iOS, Android, Windows, macOS, Linux

Стоимость: от 4 € в месяц за 500 ГБ при оплате за год. В России сложно оплатить сервис: нужно сменить геолокацию устройства и использовать иностранные карты

Бесплатный объём — 3 ГБ. Можно увеличить до 10 ГБ, если загрузить первый файл, позвать в сервис друзей, включить автоматическую загрузку и так далее

Для использования облака нужно зарегистрироваться через почту, Facebook или Google. Есть три тарифа: на 500 ГБ, 2 и 10 ТБ. Последний обойдётся в 16 € в месяц при оплате за год. Максимальный размер загружаемого файла ограничен объёмом хранилища.

Можно настроить автоматическое создание резервных копий, делиться с другими пользователями ссылками на файлы и просматривать, сколько раз материал скачали.

В pCloud есть поиск по названиям файлов — это неудобно, если файлов много и пользователь не успевает их переименовать.

Облако можно использовать как хостинг для статичных сайтов и другого публичного контента, например изображения-подписи в письме.

По умолчанию сервис хранит материалы в корзине 15 дней, но на платных тарифах этот срок можно увеличить до года. Все файлы зашифрованы и хранятся в дата-центрах Европы и США.

Box

Доступен в веб-версии, на iOS, Android, Windows и macOS

Стоимость: от 11,5 $ в месяц за 100 ГБ при оплате за год. В России сложно оплатить сервис: нужна иностранная карта

Бесплатный объём — 10 ГБ

Для начала работы достаточно зарегистрироваться через Google. Есть несколько тарифов: на 100 ГБ для одного пользователя или небольшой команды и безлимитное хранилище для больших корпораций. Максимальный размер загружаемого файла на бесплатном тарифе — 250 МБ, на платных — от 2 до 500 ГБ.

Box заточен под командную работу творческих коллективов и автоматизацию бизнес-процессов — отсюда большое количество корпоративных тарифов. Есть инструменты для совместной работы в режиме реального времени, нейронка Box AI, помогающая улучшать контент, а также 1500 интеграций с такими сервисами, как Zoom, Slack, Microsoft 365 и Google Workspace.

Файлам можно задать теги, что теоретически должно помочь при поиске. На практике же поиск не работает ни по тегам, ни по содержанию и названию изображения, хотя всё это указано как возможные фильтры для поиска.

Материалами можно делиться с помощью ссылки, дополнительно защитив её паролем. Также доступна функция резервного копирования файлов.

Большинство облачных хранилищ иностранные, поэтому их сложно оплатить, да и доверия к зарубежным сервисам сегодня немного. Среди российских хранилищ хорошие — «Яндекс Диск» и «Облако Mail.ru», при этом у первого есть однозначное преимущество — доступ к рабочим инструментам экосистемы «Яндекса», например всем фичам «Почты» и Алисе Про.

Стоимость произведений искусства зависит от конкретных факторов, а не берётся с потолка, как зачастую кажется. На основе статьи FindArtInfo мы собрали критерии, которые помогут оценить картину или скульптуру, и рассказали, какую информацию о произведении собрать перед продажей

Факторы, влияющие на стоимость

Репутация художника. Известный художник, представленный в галереях, продаётся намного дороже неизвестного автора, независимо от уровня их мастерства.

Картины признанных художников сохраняют стоимость во время рыночных спадов и кратно вырастают в цене, если начинают выставляться в популярных галереях. Поэтому работы Бэнкси или Хёрста уже превратились из произведений искусства в финансовые активы.

Время создания. Ранние работы известных художников стоят дорого, если в них уже прослеживается авторский стиль. Полотна, созданные в середине карьеры, как правило, представляют наибольшую ценность. Поздние работы могут высоко цениться, если с возрастом художник писал редко.

После смерти художника его картины могут взлететь в цене — стоимость, как правило, остаётся на этом уровне.

История владения. Документально подтверждённая история перемещения картины между владельцами косвенно докажет её подлинность и повлияет на цену. Произведения искусства, ранее принадлежавшие знаменитостям или известным коллекционерам, часто продаются на аукционах с существенной наценкой. Пробелы в истории владения, наоборот, вызовут подозрения и снизят стоимость.

Физическое состояние. Выше всего ценятся произведения, которые хорошо сохранились в своём первозданном виде и не были отреставрированы. Агрессивная реставрация значительно снижает стоимость, поскольку коллекционеры предпочитают минимальное вмешательство. Известны случаи, когда безупречные, но сильно отреставрированные картины продавались на 60% дешевле, чем нетронутые аналоги с небольшими дефектами.

Незначительные повреждения на периферии влияют на стоимость меньше, чем аналогичные проблемы в центральных частях картины.

Подтверждённая подлинность. Произведения с подписью художника ценятся выше, чем без неё. Документы, подтверждающие подлинность картины, например сертификаты от экспертов или наследников мастера, важны для сделок на вторичном рынке. Особенно при продаже работ тех художников, которых часто подделывают.

Редкость. Уникальные произведения дороже тиражных работ и репродукций. Чем меньше полотен создал художник, тем выше ценится каждое.

Также высоко стоят экспериментальные работы в необычном для художника стиле или картины, созданные в исторически значимые периоды, например во время войны или политических потрясений.

Размер и материалы. Чем больше работа, тем выше цена, но эта зависимость не всегда линейна. Крупноформатные работы впечатляют, но круг их покупателей ограничен: не каждый может найти для них место. Наиболее востребованы картины галерейного размера, от 75 до 120 см, благодаря их универсальности.

Картины маслом стоят выше акриловых или в смешанной технике, а работы на бумаге ценятся ниже. Скульптуры из бронзы стоят дороже, чем из смолы или гипса.

Качественные материалы, такие как льняной холст поверх хлопка или некоторые редкие пигменты, повышают стоимость и продлевают жизнь картины. Также стоимость выше у картин с оригинальной рамой: с чистыми краями подрамника, правильной склейкой и подходящими фиксаторами.

Историческая и культурная значимость. Революционные работы, повлиявшие на художественные течения и историю искусства или упомянутые в научных публикациях, оцениваются выше.

Сюжет и тенденции. Пейзажи, приятные сюжеты и яркая цветовая палитра ценятся выше, чем сложные или тревожные темы и приглушённые цвета. Наиболее характерные для художника сюжеты продаются дороже, чем его экспериментальные темы. Работы одного и того же художника одинакового размера могут продаваться с разницей в цене в 300% только из-за сюжета.

Стоимость зависит и от веяний моды. Цена может возрастать, когда влиятельные коллекционеры или музеи обращают внимание на какой-то жанр. Одни предпочтения коллекционеров меняются быстро, другие — в течение 3–5 лет.

Как подготовиться к оценке стоимости

• Измерьте высоту и ширину произведения
• Определите материалы
• Сделайте качественные фотографии лицевой и оборотной сторон, подписи, рамы, любых этикеток и штампов на обороте
• Изучите сайты галерей и музеев, где представлены работы художника
• Изучите научные статьи и публикации, в которых фигурирует имя художника, найдите фотографии произведения в каталогах уважаемых изданий
• Найдите или сделайте документы, подтверждающие историю произведения: документы о покупках и выставках, информацию о предыдущих владельцах, сертификаты подлинности, подписанные экспертом или представителем художника, квитанции из галерей
• Поищите информацию о художнике и аукционной стоимости его картин в специализированных базах, например FindArtInfo или Artinvestment

Всё это поможет самостоятельно прикинуть стоимость произведения. Если вы сомневаетесь, обратитесь к искусствоведам вашего города. Их можно найти в музеях, галереях и профильных университетах.

Шрифт — это один из важнейших элементов дизайна. С его помощью можно подчеркнуть, дополнить или даже задать настроение проекта, расставить акценты и донести необходимую информацию до пользователя. Правильный выбор шрифта для проекта — серьёзная задача для дизайнера. Как же найти лучший шрифт среди множества вариантов и на какие критерии опираться при выборе? Рассказываем в этой статье

Алгоритм для выбора шрифтов

Само собой, универсальной инструкции, в которой поэтапно описывается, как правильно подбирать шрифт, не существует. Однако мы выделили базовый алгоритм, который поможет выбрать шрифт для разных проектов.

Определите замысел, цели и задачи проекта

Чтобы понять, какой шрифт выбрать для проекта, в первую очередь вам нужно определить, для чего именно вы его ищете, какой замысел он будет подчёркивать и каким целям соответствовать. Вам нужен шрифт для создания айдентики бренда, логотипа или для других элементов дизайна? Он должен привлекать внимание и создавать акценты или быть нейтральной «рабочей лошадкой», служащей в основном для передачи информации? Или вам нужна шрифтовая пара, которая будет выполнять обе эти задачи? А может, вам требуется не один и не два, а сразу несколько шрифтов? Ответьте себе на эти вопросы, прежде чем приступать к поиску шрифта.

Кстати, мы подробно рассказывали о том, как подобрать шрифт для логотипа, и подобрали лучшие варианты в нашей статье. Рекомендуем также ознакомиться с ней в дополнение к этому материалу.

Определите, для чего будет использоваться шрифт

Определившись с целью, для которой вы выбираете шрифт, вы сможете понять, каким критериям он должен соответствовать.

Все шрифты можно разделить на две большие группы: акцидентные и текстовые. Первые служат для привлечения внимания — их можно использовать в логотипах, крупных акцентных надписях, вывесках, заголовках. Вторые чаще применяются для передачи информации в основных массивах текста, хотя могут использоваться и для вышеперечисленных целей, если общий стиль проекта лаконичный и нейтральный.

Главный критерий при выборе текстовых шрифтов — читабельность. Они должны быть простыми, чёткими, без декоративных элементов, с нейтральными пропорциями, усреднённой шириной знаков и толщиной линий. Подробнее о том, как выбрать шрифты для чтения и какими качествами они должны обладать, читайте здесь.

Определите настроение и стиль проекта

Чтобы сузить круг поиска, нужно понять, из какой стилистической категории вам нужен шрифт. Для этого определите характер и эстетику самого проекта. Какое настроение и ценности он будет транслировать? Он будет создавать спокойное или яркое впечатление? Выглядеть дружелюбно или дерзко? Ультрасовременно или в стиле прошедших эпох? Определите основную идею и выбирайте шрифт, который ей соответствует. Читайте описание гарнитуры, которую приобретаете: это поможет понять, какое настроение и референсы закладывались в шрифт при его создании.

Обратите внимание на технические характеристики

Гарнитуры могут поддерживать или не поддерживать различные функции. Перед выбором шрифта определите, какие из них вам необходимы. Например, узнайте, на каких языках будет доступен ваш проект, и проверьте, поддерживает ли эти языки понравившийся вам шрифт. Если вам необходимо несколько шрифтов, выбирайте гарнитуры с большим количеством начертаний: так вы решите свою задачу и при этом не выйдете за рамки заданной стилистики. А если вы хотите видоизменять шрифт самостоятельно, выбирайте варианты с различными стилистическими альтернативами и функцией вариативности. Качественные и современные в техническом смысле шрифты позволят вам разнообразить дизайн и сделать его по-настоящему уникальным.

Советы по выбору шрифтов

Мы собрали несколько советов, которые помогут вам понять, как выбрать лучший шрифт и как сочетать разные шрифты между собой в проекте.

Вдохновляйтесь чужими примерами

Это довольно универсальный совет. Изучите работы ваших коллег или конкурентов‎, проанализируйте, какие из них пользуются наибольшим успехом, и выберете те, которые понравились лично вам. Посмотрите, какие шрифты используются в топовых проектах, и найдите их или похожие варианты. Как определить, что за шрифт на сайте, читайте в нашей статье.

Планируйте иерархию

Если вам требуется использовать несколько шрифтов, определите функции каждого из них: какой шрифт будет привлекать внимание, а какой возьмёт на себя практические функции. Сначала выберете основной шрифт, а затем ищите вспомогательный, который будет сочетаться с первым.

Не используйте много шрифтов в одном проекте

Старайтесь использовать не более двух, максимум трёх шрифтов в одном проекте, чтобы не перегрузить дизайн. Помните правило «чем проще, тем лучше».

Сочетайте шрифты грамотно

Главный принцип сочетаемости шрифтов заключается в том, что между ними должны быть как сходства, так и различия. Один из самых простых способов — сочетать разные начертания из одной гарнитуры: они будут различаться по каким-то параметрам, но не выходить за рамки общего стиля. Также можно использовать «‎классические» сочетания, такие как антиква плюс гротеск.

Подробнее о том, как сочетать разные шрифты, читайте в нашей статье.

Избегайте анахронизмов

Не используйте устаревшие шрифты. И не только потому, что они будут выглядеть несвежими и нафталиновыми. Шрифты быстро устаревают в техническом смысле, и если гарнитура давно не обновлялась, её, возможно, будет неудобно использовать.

Не уходите в банальности

Избегайте избитых, слишком модных и популярных шрифтов, чтобы ваш проект был оригинальным и выделялся среди других, а не сливался с ними. Это правило работает только для акцидентных шрифтов, которым вы отведёте главную роль в своём дизайне. Это не касается универсальных базовых шрифтов с нейтральным характером, графика которых отличается чёткими и чистыми линиями.

Нарушайте правила

Никакие правила не помогут создать по-настоящему цепляющий, живой и уникальный дизайн. Ориентируйтесь на советы опытных специалистов, развивайте насмотренность, но не забывайте экспериментировать самостоятельно. Только так можно найти свой стиль и создать что-то новое.

Каким критериям должен соответствовать идеальный шрифт

Подытожим вышесказанное и составим портрет идеального шрифта из критериев, которым он должен соответствовать. На них вы можете опираться при выборе шрифта для вашего дизайна.

Соответствие целям проекта. Идеальных шрифтов не существует, но бывают идеальные варианты их применения, когда шрифт гармонично вписывается в проект. Почти каждый шрифт хорош в определённом контексте.

Качество. Убедитесь, что шрифт, который вы выбрали, достаточно качественный и современный. Важно, чтобы шрифт одинаково хорошо отображался на всех платформах и устройствах.

Разборчивость. Неважно, для чего именно вы выбираете шрифт: для логотипа, упаковки, оформления бренда, создания акцентов или донесения информации. Во всех случаях он должен быть разборчивым. Даже самый стильный, красивый и необычный шрифт бесполезен, если его графика слишком сложная и не позволяет разобрать отдельные буквы или слова.

Технологичность. Делает шрифт гибким и удобным в использовании, позволяя дизайнеру адаптировать его под разные задачи и ситуации. Убедитесь, что гарнитура, которую вы выбираете для своего проекта, включает хотя бы основные начертания: чем больше начертаний, тем больше возможностей. Большим плюсом будет наличие стилистических альтернатив, а также параметров вариативности. И, как мы уже писали выше, всегда проверяйте, какие языки поддерживает шрифт, и сопоставляйте эту информацию со своими задачами.

Наличие лицензии. Всегда проверяйте лицензии и скачивайте шрифты только на официальных площадках. Помните, что шрифты защищены авторским правом, поэтому их использование без лицензии чревато неприятными последствиями. Подробнее с этой темой вы можете ознакомиться на примере лицензий TypeType.

Заключение

Сохраните эту статью как памятку. Надеемся, наши советы помогут вам выбирать шрифты для разных задач. Однако не следуйте им безукоризненно и всегда ищите что-то новое, ведь мир дизайна очень разнообразен, он меняется и развивается ежедневно. Не бойтесь пробовать и ошибаться, ведь это важная часть творческого процесса!

В промо-материалах к шрифтам часто встречаются типографические красоты: разные комплекты цифр, альтернативные знаки или ещё что-нибудь.

Но многие дизайнеры, особенно работающие с вебом и прототипами, думают, что это не для них. Вытаскивать нужный символ из таблицы глифов долго, а объяснить разработчику, что вместо одного варианта знака нужно взять другой, почти невозможно.

На самом деле работать с возможностями шрифта очень просто: большинство приёмов «высокой типографики» включается в Figma в два клика, а в вебе — одной строчкой кода в CSS. Сейчас сами увидите :)

Как работать с типографикой в Figma

Всё, что нужно сделать в Figma, чтобы включить в тексте любой встроенный в шрифт вариант цифр или букв, — нажать на иконку настроек в правом нижнем углу панели Typography (раньше — панель Text) и выбрать вкладку Details.

На вкладке сразу будет видно, какие возможности типографики (их ещё называют OpenType features) есть в шрифте: можно выбрать любые и в любых сочетаниях. Например, сделать цифры строчными или включить стилистический сет.

Если у текста нет стиля (или в стиле это не описано), то выбранные варианты знаков включатся только для выделенного фрагмента. Чтобы включить альтернативы во всех текстах проекта, нужно добавить их в стиль текста.

Тот шрифт, на котором мы показываем работу с типографикой — Hint — ещё и экспериментальный полигон по встраиванию микротипографа в шрифт. Точно так же через Details можно включить типограф, который будет на лету заменять тире и кавычки на правильные, и не только.

Как работать с типографикой в CSS

Всё, что можно включить в Figma в Typography — Details, можно включить и в вебе с помощью строчки в CSS, добавив её в описание стиля на этапе разработки. Разберём несколько примеров.

Минускульные цифры. Цифры ростом со строчные буквы и с выносными элементами. Нужны, когда текст для чтения набран строчными буквами, а в нём встречается много дат или других чисел.

CSS: { font-feature-settings: “onum”; }

Дроби. Если в тексте встречаются обыкновенные (не десятичные) дроби, можно сделать так, чтобы цифры, набранные через слэш, превращались в аккуратные маленькие числители и знаменатели.

CSS: { font-feature-settings: "frac"; }

Регистрозависимые знаки. В некоторых шрифтах тире, дефис, двоеточие, @ и другие знаки могут приподниматься, если стиль текста превращает их в прописные. Это важно в заголовках, потому что в крупном тексте будет особенно заметно, что дефис или тире находится сильно ниже середины букв.

CSS: { font-feature-settings: "case"; }

Стилистические сеты. Когда в шрифте есть альтернативные формы букв, чаще всего они организованы в стилистические сеты (stylistic sets). Это позволяет заменить форму сразу всех нужных букв во всех текстах одного стиля.

Поскольку в разных шрифтах альтернативные формы разные, то, чтобы узнать номер нужного сета, надо смотреть документацию к шрифту.

Все стилистические сеты называются по одному принципу (ssXX, где ХХ — номера от 01 до 20) и включаются с помощью строки следующего типа: font-feature-settings: “ss01”;

Стилистический сет ss03 включит очень закрытые формы всех круглых букв в шрифте Hint, а стилистический сет ss19 — микротипограф.

Более полный список и код возможностей шрифтов можно посмотреть здесь. А с помощью этой страницы можно выбрать любой шрифт из установленных в систему и увидеть его типографические возможности.

Попрактиковаться в использовании типографических возможностей можно на бесплатных шрифтах. Например, в Golos есть минускульные и табличные цифры, в PT Root UI — табличные цифры и огромный набор индексов и дробей, в Tilda Sans — табличные цифры, индексы и альтернативные знаки. 

Над статьёй работали Александра Королькова и Мария Дружинина.

Подписывайтесь на наш канал в Телеграме, чтобы узнать больше о типографике и новых шрифтах.

В статье мы собрали лучшие шрифты с кириллицей, выпущенные за два года. Все они со своим характером и подойдут для разных проектов. Среди них четыре гротеска, один моноширинный и одиннадцать декоративных

Гротески

TikTok Sans. Бесплатный фирменный шрифт известной соцсети имеет 14 стилей. Это вариативный гротеск с небольшой геометричностью и позитивным характером.

Martian Grotesk. Современный вариативный гротеск «Злых Марсиан» содержит 63 статичных начертания и изменяется по толщине и ширине. Оптимизирован для веба.

Лето. Вариативный декоративный гротеск с семью начертаниями и жизнерадостным характером.

Noise. Лёгкий жизнерадостный гротеск в двух вариантах: базовом и со сплошными декоративными заливками. Подойдёт для упаковок, плакатов, брендинга и детских проектов.

Моноширинные

Martian Mono v1.1. Утилитарный шрифт для набора кода со специальными лигатурами, которые используют в языках программирования. Содержит четыре варианта ширины, в каждом из которых по семь вариантов насыщенности.

Акцидентные

GOTHRA. Шрифтовая семья, разработанная на основе готического почерка. Гарнитура состоит из трёх начертаний, два из которых вариативные и одно статическое.

Подходит для заголовков, крупного набора, айдентики и плакатов.

Dispater. Вариативный декоративный шрифт с пятью начертаниями, вдохновлённый эстетикой Средневековья. Его вытянутые, длинные символы с крупными «каплями» создают причудливый, сюрреалистичный узор.

Извод. Акцидентный псевдостаринный шрифт в традиционном русском стиле.

Siengfried. Акцидентная антиква с колючими засечками и обратным контрастом.

Доступны прямое начертание и курсив с обратным наклоном. В кассе знаков — латиница, кириллица и даже татарский алфавит.

Gehaks. Акцидентная антиква с суровым характером, вдохновлена готическим стилем и скульптурами, вырубленными из камня. Имеет одно начертание и набор иконок.

Буквоглот. Игривый декоративный шрифт с непохожими друг на друга буквами. Создан Кариной Кирилловой в рамках «Буквального челленджа».

Gergel. Дружелюбный шрифт, вдохновлённый детским рисунком.

Home Video. Псевдовинтажный декоративный пиксельный шрифт для ретропроектов, вдохновлённый меню на старых телевизорах. Буквы с нарочито небрежными формами отличаются по высоте — это имитирует текст интерфейса, который видеомагнитофоны выводили на экраны в 80–90-х годах.

Ножик. Выразительный декоративный шрифт с острыми, резкими формами. Подойдёт для плакатов, логотипов, заголовков или мемов.

Стежок. Декоративный шрифт, вдохновлённый алфавитами из схем по вышиванию. В основе шрифта — прописи XIX века, которые были пикселизированы.

Скачать шрифт можно здесь.

Vivid Sans. Игривый акцидентный шрифт с чуть «гуляющими» толщинами и необычными скруглениями. Подойдёт для детских проектов или брендинга в сфере питания.

Модульность, сетки, аккуратные блоки — всё это стало привычной частью интерфейсов. Многие из них визуально напоминают японские bento-боксы. Но ровные скругленные блоки сами по себе не делают дизайн bento. За визуально похожей компоновкой стоят разные принципы: где-то это удобная сетка, а где-то — осознанная композиция со своими акцентами

Bento-подход помогает структурировать интерфейс, делает навигацию интуитивнее и упрощает восприятие сложных экранов. Но работает он только в контексте продукта.

В статье веб-дизайнер студии комплексной разработки цифровых решений CleverPumpkin Александр Попов вместе с лид-дизайнерами команд «Авито», «Альфа-Банк» и «Детский мир» разбирают, чем bento-стиль отличается от других модульных подходов к созданию дизайна; ситуации, где модульность помогает и в каких мешает. Внутри — примеры продуктовых интерфейсов, выводы и практические рекомендации по работе с bento.

От японских коробочек до интерфейсов

Bento-дизайн получил название в честь японских ланч-боксов — компактных коробочек с отделениями для разных продуктов. Их идея — логично и удобно структурировать содержимое. В дизайне та же логика проявляется через особую структуру расположения элементов, которые направляют внимание пользователя.

Сами принципы карточной верстки не новы — их применяли задолго до появления термина bento. Но именно после появления CSS Grid в 2017 году и массового внедрения подобных решений в рекламных материалах, а позже и на сайтах у Apple и Microsoft, подход получил новый виток и стал воспроизводимым, гибким, удобным в поддержке и очень модным.

Bento вырос из карточного стиля и идеи модульности, при этом стал ее отдельной визуальной формой со своим композиционным подходом и правилами. Рассмотрим их.

Особенности Bento UI в модульных интерфейсах 

Модульный интерфейс — это принцип организации пространства, когда экран собирается из независимых, переиспользуемых блоков (модулей). И классический карточный стиль, и bento заимствуют эту идею, поэтому визуально похожи. 

В карточном стиле контент располагается в аккуратную сетку из повторяющихся блоков, похожих по размеру. Такой стиль удобен в случаях, когда есть задача сохранить предсказуемую структуру экрана при однотипном контенте. 

Bento отличается от карточного своей композиционностью. В нем контент разбивается на четкие, как в японском ланч-боксе, квадратные или прямоугольные секции, что создает упорядоченность, упрощает адаптацию и улучшает восприятие, особенно на мобильных устройствах. При сохранении карточности интерфейс становится более динамичным.

Что bento UI заимствует у модульности и чем усиливает

Как и другие модульные стили, bento строится из отдельных элементов, которые удобно поддерживать, перерабатывать и комбинировать. Но bento усиливает модульность за счёт композиции, помогает выделять важное, задает акценты и направляет внимание. 

Визуальная ясность

Стиль снижает когнитивную нагрузку для пользователя. Благодаря визуальной иерархии смысловые группы четко выделяются, а контекст легко считывается, даже в продуктах со сложной навигацией. 

Доступность

Четкие зоны и крупные элементы позволяют пользователю легче находить приоритетную информацию и делают интерфейс понятнее, в том числе для людей с ограничениями по зрению и вниманию. Bento лучше выдерживает увеличение шрифта, масштабирование и помогает пользователю фокусироваться на приоритетных элементах.

Ускорение проектирования

Дизайнеру проще собирать макет, когда есть готовые блоки и понятный каркас. Это упрощает верстку, а адаптация под разные устройства требует меньше усилий. 

Такой подход используют и крупные бренды, только в более масштабном виде. Там модульность выведена на уровень продуктовых направлений, где разные дизайн-команды работают по единым правилам и гайдлайнам, а принцип сборки упрощает переиспользование решений внутри продукта.

Чтобы продукт оставался цельным, но при этом мог адаптироваться под сотни разных контекстов, нам нужна гибкая модульность. И тут bento-подход отлично ложится, так как усиливает наш принцип: переиспользуй и собирай из готового. В «Авито» мы уже давно работаем по модульной системе. В ее основе лежат платформы — масштабируемые куски интерфейса, которые можно внедрять в разные части продукта с значительно меньшими усилиями, чем при разработке с нуля. Команды используют эти платформы, как конструктор, и собирают интерфейсы под свои задачи.

При использовании готовых и повторяемых компонентов снижается объем уникальной разработки и поддержки, а единые правила сокращают трудозатраты на внедрение изменений.

«Альфа-Банк» уже давно применяет блочную вёрстку. Bento лишь ускорил выбор креативных вариантов выделения нужного контента. Этот прием стал общим для команд всех направлений, что повысило консистентность страниц».

Мы интегрировали bento-сетку не только в интерфейсы, но и в графический стиль «Детского мира» — в баннеры, навигацию и витрины. На старте процесс шел медленно, так как нужно было адаптировать bento к детской эстетике, придумать, как он будет сочетаться с фирменными кубиками, подобрать корректные радиусы и общее ощущение пластики. Но после того как мы выстроили свои правила, работа стала заметно быстрее. Bento дал нам структурность и предсказуемость, которые ускоряют сборку материалов.

Привычность и доверие

Пользователи уже привыкли к карточной стилистике интерфейсов, потому что постоянно встречают их в популярных сервисах. Bento сохраняет эту «узнаваемую» структуру, но делает её более выразительной. Таким образом, Bento UI сохраняет преимущества карточных интерфейсов, позволяя снизить порог входа в приложение и сделать интерфейс user-friendly.

Удобство для тестов

Bento — удобный инструмент для проверки продуктовых гипотез. Блоки легко перемещать, выставлять приоритеты и акценты, корректировать путь пользователя. Времени на подготовку и исследования уходит меньше. 

Динамичная визуальная иерархия

В отличие от карточного стиля, где элементы одинаковы по масштабу, bento использует блоки разного размера. Это позволяет точнее расставлять акценты — большие блоки выделяют важное, а меньшие поддерживают структуру и не забирают внимание.

Какие недостатки у стиля bento UI

Даже самые удобные паттерны могут навредить, если использовать их не по назначению и в отрыве от данных о поведении пользователя.

Чрезмерная фрагментация

Если переборщить с количеством bento-модулей, пользователь может потеряться в потоке однотипных блоков. И не забудьте про эффект Хика — это феномен, при котором чем больше вариантов выбора у пользователя, тем дольше он принимает решение. Это особенно критично в сценариях, где важна скорость и интуитивность.

Например, «Альфа-Банк» при редизайне сайта протестировал несколько вариантов первого экрана в bento-сетке. Результаты оказались неоднозначными: в одних конфигурациях bento увеличивал вовлеченность, в других — ухудшал показатели.

Важно не забывать, что универсальных решений нет. Привычность не гарантирует успех, так как многое зависит от сценариев, аудитории, плотности информации и бизнес-смысла. 

Мой опыт говорит, что качество пользовательского опыта определяется не структурой и правилами, а тем, насколько продукт адаптирован под пользователей. Если их потребности учтены, будет и конверсия, и глубина вне зависимости от того, как именно организованы блоки внутри интерфейса.

Требовательность к пространству и сложности с адаптивностью

Модули требуют «воздуха» — отступов, рамок, визуального разделения. На мобильных экранах это ощущается сильнее из-за того, что каждый элемент занимает больше места, — приходится либо сокращать объем контента, либо разбивать его на несколько экранов, увеличивая свайпы и шаги пользователя. Динамическая асимметричная сетка с блоками разного размера требует тщательного планирования при создании адаптивных экранов, иначе контент может стать тяжелым для восприятия. Это ограничение стоит учитывать, если у вас много важных действий или данных на один экран. 

Bento-стиль хорошо работает на десктопе при умеренном объеме контента. На мобильных чаще мешает и замедляет сканирование информации — пользователи быстрее ориентируются, когда контент идет вертикально подряд, без разбиения на мелкие блоки.

Риск перегрузки или слабой иерархии 

При неправильной иерархии блоки легко запутывают пользователя. Когда на экране их слишком много или все они одинакового размера, возникает либо информационный шум, либо размытая приоритетность. Визуальный ритм пропадает, а контент перестаёт читаться последовательно. Чтобы избежать этого, важно варьировать размеры блоков, задавая чёткий порядок внимания.

Риск потери уникальности

Несмотря на разнообразные размеры блоков, сетка bento UI задает довольно жесткий ритм и создает ограничения в композиции. Это может помешать брендам, которые строят коммуникацию на принципах творчества и визуальной свободы. Bento UI в таких проектах может сдерживать. 

Если задать структуру, со временем она обрастает функциональностью, правилами и ограничениями. Чтобы не становится заложниками нашего «фундамента» bento-дизайна, мы в «Авито» поддерживаем и развиваем его. Тогда получается win-win: любое изменение требует меньше усилий и учитывает десятки зависимых сценариев.

Когда важны индивидуальность, неожиданные приемы и эмоциональная выразительность, любая модульность добавляет ограничения. Но и их можно обойти при грамотном подходе. Понимание этих особенностей позволяет не только избежать ошибок, но и принять более точные решения при проектировании интерфейса.

Мы заметили, что в интерфейсах с большим количеством мелких элементов bento дает «шахматный» эффект и акценты теряются. Графически он идеален для фокусных зон, но плохо подходит для потоковых подборок разнородного контента. Поэтому в коммуникациях мы используем адаптированную версию bento: сохраняем модульность и порядок, но смягчаем эстетику — добавляем округлые формы, детские элементы, фотографии и иллюстрации, чтобы стиль оставался эмоциональным.

Где стиль bento точно не подойдет

Не все задачи подходят под стиль bento. Вот случаи, когда от него точно стоит отказаться:

• Редакционные сайты и блоги. Bento плохо сочетается с длинными текстами: дробление на блоки мешает непрерывному чтению, создает визуальные препятствия и сбивает фокус. 
• Плотные интерфейсы и сложные системы (CRM, ERP). В профессиональных продуктах bento-стиль быстро упирается в свои ограничения. Таблицы, графики, сложные взаимосвязи и сценарии требуют высокой плотности данных и быстрых манипуляций. А блоки могут усложнять восприятие и тормозить работу. 
• Проекты с высокой степенью креативности. В проектах, где важны импровизация, пластика форм, необычные композиции, такая стилистика может не подойти. 

Таким образом, bento UI стоит использовать только тогда, когда в приоритете структура. В ситуациях, где важны потоковое чтение, высокая информационная плотность или выразительная визуальная подача, он скорее навредит, чем поможет.

Как получать от стиля bento максимум

Чтобы методика работала на ваш интерфейс, а не против него, соблюдайте эти принципы. Они помогут сохранить фокус внимания, логичную иерархию и выразительность даже при сложных сценариях.

1. Сокращайте количество делений на экран. Лучше удерживать 3–5 смысловых блоков, чем делать десятки микрокарточек. Избыток фрагментов дробит внимание пользователя. Если контента много — группируйте его по категориям и распределяйте на разные экраны или разделы. Так вы сохраните чистоту и не потеряете смысл.

2. Вводите четкую визуальную иерархию. Первое правило простое — главное должно быть заметнее. Используйте разные размеры блоков, контраст, отступы, цвета фонов и шрифта. Самые важные — крупные и акцентные, второстепенные — нейтральные и менее заметные. 

3. Планируйте объем и адаптивность заранее. Контент должен органично вписываться в блоки. Протестируйте, как будет выглядеть блок с реальными данными — особенно на мобильных устройствах.

4. Допускайте отступления от стандартов стиля. Не бойтесь нарушать ритм сетки ради выразительности. На ключевых экранах можно ослабить регулярность повторения блоков и добавить динамики. Главное — делать это осознанно и сохранять общий стиль: так вы избежите шаблонности и сделаете интерфейс живым.

Заключение

Bento UI — удобный инструмент, но не универсальное решение. Он хорошо работает там, где важна визуальная структура, модульность и скорость восприятия. Но при высокой плотности данных или необходимости творческой подачи лучше поискать другие паттерны. 

При разработке интерфейса ориентируйтесь на цели продукта, задачи бизнеса, исследования и контекст использования: кто ваши пользователи, в каких условиях они взаимодействуют с продуктом, какие у них потребности. Исследования, аналитика и здравый смысл должны быть важнее визуальных трендов.

Если вы хотите обсудить свой проект или взглянуть на дизайн по-новому — пишите нам в Telegram, будем рады помочь. 

Кириллов Сергей, Арт-директор Mish Product Lab: Быть «в моменте» сегодня стремятся все — от частных пользователей до корпораций. Попасть на волну тренда, удержать внимание, не потеряв связи с аудиторией. Но охота за актуальной повесткой легко оборачивается ловушкой: бренд растворяется в мимолетной моде, теряя собственную идентичность и доверие.

Выход — форкастинг (future-casting). И это не про «охоту за трендами», а про целостный подход к проектированию, который позволяет создавать решения, актуальные сегодня, завтра и в обозримом будущем, ориентируясь на реальные бизнес‑задачи: рост выручки, повышение узнаваемости и управляемости продуктовой линейки. Суть методики — заранее закладывать принципы и решения, которые останутся уместны через годы.

Форкастинг — это не инструмент «на полке», а скорее мышление, майндсет, который компания может встроить в любую часть своей деятельности: от разработки продукта до стратегии коммуникации. Особенно заметна ценность этого подхода там, где на карту поставлена идентичность бренда. Например, в ребрендинге и редизайне. 

Такие всемирно известные бренды как Nike, Coca-Cola и Airbnb давно и успешно применяют эту методику.  

Nike десятилетиями сохраняет силу знака «Swoosh», одновременно обновляя язык визуальных коммуникаций под культурные контексты. Этот символ, созданный в 1971 году студентом-дизайнером Кэролин Дэвидсон, стал настолько узнаваемым, что вышел за рамки спорта и превратился в мировой символ атлетизма и инноваций.  Команда дизайна прогнозирует социальные и технологические изменения, анализируя потребительские паттерны будущего — это позволило бренду остаться актуальным для разных поколений без смены ДНК. 

Airbnb перед редизайном 2024 года провела глобальное исследование по прогнозированию будущего гостеприимства: рост «жизни в движении», гибридного образа работы и локального опыта. Сервис сфокусировался на показе эксклюзивных и «невероятных» домов, чтобы продемонстрировать, что он предлагает нечто большее, чем просто ночлег. Эти выводы легли в основу новой визуальной системы и UX-паттернов, которые не устареют даже при смене форматов путешествий. 

Coca-Cola пошла немного другим путем — это не про тренды, а про форкастинг эмоций.
Вместо погони за визуальными модами Coca-Cola использует сценарное прогнозирование для обновления коммуникации. Исследуются культурные коды будущего — темы радости, объединения и инклюзии — и визуально кодируются в дизайн-систему. Результат: идентичность остается узнаваемой с 1886 года, но выглядит современно в любой эпохе.

Логика форкастинга проста: методика выделяет устойчивые инсайты аудитории и бренда — и переводит их в продуктовые и дизайнерские решения. Эти решения дают измеримый бизнес-эффект и остаются релевантными при масштабировании, продлевая жизнь айдентики без «капремонтов».

В статье мы расскажем на конкретном кейсе, как форкастинг работает на бренд в долгую: от отказа от трендового шума — к долговечной масштабируемой системе.

Кейс «Флатика»: ребрендинг легендарной платформы

«Флатика» — новое имя известной многим платформы Houzz. Это сайт, который помогает находить идеи и вдохновение, нанимать проверенных специалистов для обустройства дома и сада, показать себя через портфолио потенциальным заказчикам.

В рамках проекта задача стояла не «переодеть» существующий бренд, а спроектировать идентичность, которая будет работать сегодня, завтра и через многие годы — несмотря на смену визуальных мод и пользовательских паттернов. 

Методика форкастинга помогла прожектором выхватить главное из существующих смыслов, усилить их и сделать ведущими для пользователя на ближайшее десятилетие. Результат процесса — фиксирование опорных инсайтов, а затем перевод их в понятные продуктовые решения, дизайн-правила и процессы. 

1. Глубинное исследование и выявление «вечного» ядра

Первый и главный этап форкастинга — поиск фундаментальных принципов и потребностей аудитории, на которые должен отзываться проект. Это то, ради кого и чего строится бренд. Здесь вопрос звучит не «Что модно сейчас?», а «Что ценно всегда?». 

В случае «Флатики» исследование показало: сила бренда не только в его функциях, а в сообществе. Платформа много лет объединяла людей вокруг ремонта и дома, превращая сложный процесс в тему для диалога и обмена опытом, в поиск «того самого» дизайнера, своей эстетики, своего подхода к обустройству жизни. 

Именно ценность живого общения с единомышленниками и стала «вечным ядром» бренда. Значит, идентичность должна усиливать чувство причастности, доверия и ключевой паттерн — «делаем по‑настоящему».

Какие инсайты мы получили на этапе исследования: 

• Инсайт 1 — Сила в сообществе и искренности. Доверие и причастность — «вечное ядро» бренда: искренность как стандарт контента, а сообщество как смысловая опора.
• Инсайт 2 — Аутентичность вместо глянца. Референсы должны быть реализуемыми «здесь и сейчас», адаптированными к реальности пользователя: то, что человек видит в интерфейсе системы, он может повторить у себя, со своими ограничениями по бюджету и срокам.
• Инсайт 3 — Управляемая вариативность. Не набор экранов, а целостная система с прозрачными правилами, чтобы расти без потери узнаваемости.

Результат этапа. Инсайты легли в основу продуктовых решений и правил дизайн-системы так как мы сформулировали ценности и критерии принятия решений, которые стали отправной точкой для всех будущих изменений. 

2. Проектирование системы

Цель второго этапа форкастинга — на основе выявленных инсайтов и «вечных» ценностей спроектировать решение, которое наилучшим образом соответствует поставленной цели. Мы создаем не «кирпичи» (отдельные элементы), а «здание» — целостную систему, готовую к использованию и развитию. При этом мы подчеркиваем преемственность, а не противопоставление прошлому.

Из Инсайта 1 — Идентичность, построенная на причастности.

Логотип и язык форм. Дом, собранный из элементов, напоминающих чат-сообщения — символ сообщества, вокруг которого развивается платформа. Метафора аккуратно читается, не перетягивая внимание с контента и услуг, но не доминирует, оставляя место для контента. 

Живая палитра. Мы намеренно сохранили узнаваемый зеленый Houzz как якорь для новой «Флатики»  и дополнили оттенок сочетающейся палитрой — для состояний, акцентов и специальных тем. Это обеспечивает узнаваемость и дает возможность тонкой локализации под задачи российского рынка без “ломки” ДНК бренда. Она также может меняться и расширяться со временем —  например, чтобы поддерживать новый «цвет года» в дизайне, не теряя при этом узнаваемости.

Из Инсайта 2 — Аутентичность вместо глянца.

Показываем только реальные фото реализованных проектов и процессов; каждый объект — с атрибуцией (подрядчик, бренд материалов, дата, география). Это правило приземляет вдохновение в «товары и подрядчиков по-соседству», что критично для локализации. Каждый ремонт из фото на сайте реализован, а значит эти обои можно купить в Екатеринбурге, а такой светильник — привезти в Тюмень. А еще каждое фото — не просто картинка, а часть сьемки проекта в портфолио дизайнера. Это значит понравившуюся кухню можно рассмотреть не с одного ракурса, а до автора проекта — одно рукопожатие:  ему легко написать через сайт и задать уточняющие вопросы (хотя бы, где купили в Тюмени кресло с фото). Это важное решение для бренда, ведь искренность, эмпатия и готовность помочь не выйдут из моды.

В итоге аутентичность превращается из слова в управляемую практику: контент можно проверить, повторить и купить; ожидания совпадают с результатом.

Из Инсайта 3 — Управляемая вариативность 

Задача заключалась в том, чтобы закрепить идеологию через конкретный инструментарий, который позволит бренду оставаться современным и человечным — что бы ни происходило на рынке. Речь про управление существующими принципами, когда свобода формы ограничивается понятными правилами:

• Дизайн-системы: токены (цвет, типографика, отступы), библиотека компонентов в Figma/коде, примеры использования, чек-листы do/don’t.
• Контент-гайда: критерии выбора проектов, требования к съемке, схема модерации, запрет на нереализуемые «референсы».
• Технической базы: быстро, доступно, адаптивно и с прямым путем к конверсии.

Результат этапа. У нас не «глянец на витрине», а единая система, готовая к продуктовым экспериментам и локализации. 

3. Реализация 

Задача этого этапа форкастинга — вывести систему в продакшн, сохранив стратегический фокус и не отходя от фундаментальных принципов, заложенных на старте. 

Управленческий контур выстроен: назначены владельцы бренда и дизайн-системы, действует матрица RACI, все изменения фиксируются в прозрачном журнале. 

Релизная дисциплина формализована: поэтапная миграция поддерживается пилотными запусками, решения принимаются через четкую процедуру go/no-go, а прогресс и эффект измеряются единым дашбордом ключевых показателей для продуктовых и маркетинговых команд. 

Результат этапа. Целостность бренда при масштабировании и локализации: команды двигаются быстрее без «переизобретений», а принятые решения воспроизводимы, контролируемы и подтверждаются метриками.

Результат: бренд, готовый к будущему

Мы зафиксировали идеологию и гибкий инструментарий, который позволяет бренду оставаться современным и человечным, что бы ни происходило на рынке.  

Это и есть суть форкастинга: строить не под сегодняшний запрос, а про управляемое «долгое дыхание» бренда. Яркие «трендовые» решения дают всплеск, но редко живут долго. Форкастинг возвращает фокус к тому, что ценно, и позволяет расти без потери идентичности.

Кейс «Флатики» показывает, как три устойчивых инсайта — сообщество, аутентичность, адаптация к реальности — превращаются в правила, дизайн-токены, контент-политику и тех-стандарты. Результат — обновленная айдентика, которая сохраняет узнаваемость при росте и турбулентности рынка, ускоряет релизы и уменьшает потребность в «капремонтах». 

Что важно бизнесу:

• Начните с неизменного. Зафиксируйте ценности и поведение аудитории, которые не меняются вместе с повесткой.
• Кодифицируйте правила. Токены, компоненты, контент-гайды и перформанс-лимиты — инвестиции в управляемость, а не бюрократия.
• Отсекайте лишнее. Все, что не добавляет ценности пользователю или не бьется с метриками, — на вычеркивание.

В 2023 году команда «Дзена» обратилась в нашу студию с запросом на разработку фирменной шрифтовой гарнитуры под рабочим названием 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

Дисплейное подсемейство

Первые скетчи

Бриф, с которым мы начинали проект, был довольно конкретным, но при этом и неоднородным: содержал противоречия в референсах и очень широком функционале, который ожидался от шрифта. Поэтому мы выбрали стратегию показывать много графики, обсуждать и отметать лишнее. Ребята дали нам доступ к разным макетам в Figma, чтобы мы могли примерять шрифты в продукте сразу по ходу работы. А мы в свою очередь примерно раз в неделю показывали подробные презентации с результатом работы. Такой подход несколько усложняет налаженный линейный процесс, но зато помогает дизайнеру и заказчику лучше понять друг друга и найти оптимальное решение.

Мы показали первые скетчи команде «Дзена» и рассказали, как можно вписать идею стеллацентричности в шрифт. Также мы продемонстрировали, в каких ещё элементах она может отразиться: например, клюшка «л» и присоединение диагонального элемента к горизонтальному в «д» могут заимствовать радиус скругления, характерный для самой звезды.

Предложили разные варианты эмоциональной и графической вариативности: усиление ловушек для чернил, необычную форму Е, трансформацию звезды в диакритику и другие варианты. Какие-то из этих решений могли бы закрепиться в стилистических сетах — для усиления голоса шрифта там, где это нужно.

Буква «а» с хвостиком и закруглённым брюшком прижилась в шрифте с первых итераций. Её форма и пластика стала для нас и ребят из «Дзена» ориентиром для развития остального шрифта.

Чтобы напомнить команде «Дзена», что в гарнитуре предполагается и более функциональный текстовый шрифт, мы сразу показывали, как он может выглядеть, на быстром скетче. Важно было показать, что в текстовом шрифте рисунок становится более нейтральным. Исчезают дополнительные элементы, такие как как хвостик в «а» или чрезмерный изгиб в «д», терминалы становятся спокойнее, пропорции меняются на вертикальные и более равноширинные.

Развитие идеи

Как и ожидалось, большое количество сложной графики в этом проекте не прижилось. А вот идею деликатного вписывания звезды в шрифт ребята восприняли хорошо, и мы продолжили поиски. Мы решили больше поработать с овалами и внести ещё один тонкий намёк на звезду.  

По сути звезда, если сильно упростить её форму, представляет собой ромб. И мы решили, что именно овалы, как один из стилеобразующих элементов шрифта, могут отразить в себе эту форму. Сама по себе буква «Оо» очень частотная. Кроме того, она влияет на другие знаки, такие как «Сс», «Зз», «е», «Ss». Так почему бы нам не сделать её не круглой, а ромбовидной?

«Я назвала это словом „мерцание“: у меня появилось ощущение, что в шрифте за счёт этих острых вершин появляются такие акценты, которые „зажигаются“, словно звёздочки».

Марина Ходак, дизайн-лид TypeType

Также в следующих скетчах появились слегка зауженные терминалы — рифма с лучами звезды. В буквы «Кк» и «Жж» мы добавили более акцентные верхние ветки, чтобы придать шрифту большую узнаваемость и поддержать пропорции верхних полуовалов, которые в этом шрифте немного больше стандартных.

В дальнейшем эти буквы ещё несколько раз видоизменялись. Мы искали нужный угол наклона диагоналей, ширину посадки верхних веток и способ крепления. В итоговом варианте диагонали крепятся к стему через небольшую горизонталь.

В одной из итераций мы пробовали поддержать зауженные терминалы, сделав дополнительные штрихи ещё тоньше — это видно в «а», «р», «ц», «д». То есть то самое «мерцание» мы выкрутили ещё сильнее. Однако это оказалось слишком, и мы вернулись к более сдержанной концепции.

Поиск степени акцидентности и шкала Сковилла

Команде «Дзена» очень нравилась идея заметных ловушек для чернил. Ребята показывали нам много референсов, но все они казались довольно акцидентными. В «Стелле» были небольшие намёки на инктрэпы (ловушки для чернил), но развивать их в очень явную историю нам не хотелось. Мы уже поиграли в «много дизайна» на первых итерациях, и сейчас как будто нашли нужный баланс. Ребята же приводили в пример острые соусы известной студии дизайна и предлагали нам увеличить остроту 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 были разработаны на заказ специально для проектов, остальные шрифты тиражные
• Среди всех шрифтов из выборки в восьми случаях сходство между логотипом и дисплейным шрифтом высокое, в девяти случаях — среднее
• Среди шрифтов, созданных на заказ, в пяти случаях логотипы созданы на основе дисплейного шрифта и имеют явное сходство, в шести случаях созданы без опоры на логотип, но графически рифмуются с ним
• Рифма совсем отсутствует только в примерах с системными шрифтами

Это приводит нас к следующим выводам:

• На основании данной выборки можно говорить о примерно равном распределении логотипов, созданных на основе фирменного шрифта, и рифмующихся с заголовочным шрифтом. Вывод актуален как для тиражных шрифтов, так и для заказных
• Дисплейный шрифт и логотип могут быть почти идентичны, а могут лишь рифмоваться за счёт общей графической характеристики или идеи

Вторая часть исследования была направлена на анализ дисплейных и текстовых шрифтов. Хотим ознакомить вас с некоторыми выводами:

• При наличии шрифтовой пары дисплейные шрифты распределяются примерно в равных долях между геометрическим, современным и гуманистическим гротесками
• Если речь идёт об использовании одного семейства на ресурсе, то есть явный перевес в сторону неогротесков. Это можно объяснить частым использованием системных шрифтов
• Среди текстовых шрифтов также наблюдается активное использование неогротесков
• При наличии шрифтовой пары дисплейные шрифты имеют тенденцию быть нормальной ширины с более полными окружностями
• Текстовые шрифты имеют вертикальные и даже зауженные пропорции
• Во всех рассматриваемых случаях отсутствует ярко выраженный контраст. Речь о гротесках, а антиквы в выборке практически не представлены
• При наличии шрифтовой пары в дисплейных шрифтах можно отметить заметный тренд на инктрэпы
• Среди дисплейных шрифтов заметна тенденция к закрытой апертуре
• При наличии шрифтовой пары апертура текстовых шрифтов скорее будет средней по открытости
• Во всей подборке видно равное распределение горизонтальных терминалов и срезанных под углом. Вертикально срезанные терминалы представлены лишь в двух гарнитурах
• Явного перевеса в сторону одного из видов примыкания овала к стему не выявлено. Однако можно отметить склонность к плавному присоединению у текстовых шрифтов

Мы представили нашу аналитику команде «Дзена». Через какое-то время ребята вернулись с просьбой всё-таки добавить асимметрии в терминалы дисплейного подсемейства, после чего всю графику согласовали. Оставалось передать шрифты нашим техническим специалистам для мастеринга, кернинга и хинтинга.

Технические работы

Всё, о чём мы рассказали выше, — лишь половина работы. Придумать графику и нарисовать буквы недостаточно для того, чтобы получился законченный шрифт. Особенно если речь идёт об использовании гарнитуры такой крупной и многофункциональной платформой, как «Дзен». 

Мы работали по нашей стандартной схеме. Сначала делали мастеринг шрифта, то есть его техническую проверку: тестировали контуры, якоря, апроши, работоспособность фич, заполняли техническую информацию, прописывали необходимые для работы вариативного шрифта оси, проверяли, чтобы все значения были правильно указаны и так далее. Затем приступили к кернингу и параллельно делали хинтинг — это внедрение в знаки специальных инструкций для того, чтобы шрифт корректно отображался на экранах различных систем в разных кеглях.

«Прежде всего это актуально для систем 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 способна решать поставленные задачи и стала официальным шрифтом бренда. Шрифт уже используется в разделе , посвящённом платформе, и в коммуникациях.

Кернинг, трекинг, спейсинг и интерлиньяж — это настройки и инструменты, с помощью которых разработчик шрифта или дизайнер может настраивать расстояние между знаками, меняя ритм текста и влияя на его читабельность.

В чём разница между этими понятиями, почему они важны и как настроить их в разных программах? Рассказываем в нашей статье

Что такое интерлиньяж в типографике

Интерлиньяж (Leading или line-height) — это расстояние между строками текста, точнее, между их базовыми линиями: от базовой линии одной строки до базовой линии следующей. Проще говоря, это знакомый многим межстрочный интервал.

Интерлиньяж измеряется в пунктах, пикселях или процентах от размера шрифта — всё зависит от программы, в которой вы работаете.

В шрифтовом файле уже заданы настройки интерлиньяжа. Базовый интерлиньяж часто используется в программах для работы с текстом. В программах Adobe по умолчанию применяется интерлиньяж, равный 120% от размера текста.

Почти во всех программах пользователь может самостоятельно настроить интерлиньяж под свои задачи. Уметь правильно настраивать интерлиньяж важно как в типографике, так и в дизайне. Ведь от этого параметра зависит не только удобочитаемость, но и визуальная привлекательность текста.

Так, правильно настроенный интерлиньяж поможет сделать текст более разборчивым. Чрезмерно узкое межстрочное расстояние сделает текст слишком плотным: строки будут «слипаться», глаза быстро устанут при чтении. Слишком широкое расстояние между строками также сделает чтение некомфортным: глазу будет сложно «перескакивать» с одной строки на другую.

Подробнее о понятии читабельности вы можете узнать в нашей статье о шрифтах для чтения.

Оптимальным считается интерлиньяж 120%, то есть он на 20% больше размера шрифта. Однако это значение может варьироваться в зависимости от области применения, задачи и вида шрифта.

Как настроить интерлиньяж

Интерлиньяж можно настроить самостоятельно в различных программах для работы с текстом и дизайном. Рекомендуем изучать инструкцию в конкретной программе. Чаще всего настройка межстрочного интервала не вызывает сложностей.

Например, чтобы задать интерлиньяж в Adobe Photoshop, необходимо выделить фрагмент текста, для которого нужно настроить межстрочный интервал, а затем на панели «Символ» выбрать необходимое значение интерлиньяжа.

Что такое спейсинг

Спейсинг — горизонтальное расстояние между знаками текста с учётом всех дополнительных настроек, будь то кернинг или трекинг. Межбуквенные интервалы — апроши — устанавливаются вокруг каждого глифа при разработке шрифта.

Как настроить спейсинг

В отличие от трекинга и интерлиньяжа, которые пользователь может отрегулировать самостоятельно, апроши настраивает разработчик шрифта на этапе его создания в специальных программах, как и в случае с кернингом.

Определение и значение кернинга

Кернинг — избирательное увеличение или уменьшение интервала между двумя символами, обусловленное сочетанием их форм. Делается это для создания максимально ровного набора.

Глядя на шрифт, сторонний пользователь может не заметить небольших изменений в кернинге. Однако от него зависит, как будет визуально восприниматься текст или дизайн, в котором используется шрифт. Также кернинг напрямую влияет на читабельность. Если вы посмотрите на массив текста, набранный шрифтом с кернингом и без, вы увидите, что второй вариант будет отличаться не в лучшую сторону.

Как настроить кернинг

Как и в случае с апрошами, кернинг настраивает разработчик шрифта ещё на этапе его создания. Делается это в специализированных программах для работы со шрифтами, таких как FontLab, Glyphs и так далее. Пользователь не может менять кернинг самостоятельно почти ни в одной программе — за редкими исключениями. Например, такая возможность есть в программах Adobe, но только для конкретной пары рядом стоящих знаков. Если в набранном тексте такая же пара знаков встретится где-то ещё, их кернинг не изменится.

Что такое трекинг

Трекинг (letter-spacing) — это изменение расстояния — межбуквенного интервала — между всеми символами. Трекинг позволяет равномерно менять этот интервал, делая межбуквенные пробелы больше или меньше. При этом текст остаётся однородным благодаря кернингу.

Как настроить трекинг

Трекинг шрифта, как и интерлиньяж, — это та функция, которую пользователь может настроить самостоятельно при работе с текстом. Это можно сделать в различных дизайнерских программах и текстовых редакторах.

Например, в Adobe Photoshop для настройки трекинга нужно выделить блок текста, для которого вы хотите применить изменения, а затем на палитрах «Символ» или «Управление» ввести вручную или выбрать из предложенных нужное значение для параметра «Трекинг».

Кернинг, трекинг, спейсинг и интерлиньяж: основные различия

Итак, подытожим: кернинг, спейсинг, интерлиньяж и трекинг — это схожие понятия, так как все они связаны с изменением расстояния между знаками. Разница в том, что интерлиньяж — это интервал между строками по вертикали, кернинг позволяет настроить отступ между конкретными парами символов, спейсинг — это уже заданное расстояние между всеми глифами, а с помощью трекинга можно равномерно регулировать расстояние между всеми символами в тексте.

Интерлиньяж измеряется в пунктах, пикселях или процентах от размера шрифта. Кернинг, трекинг и спейсинг — в условных единицах.

Интерлиньяж и трекинг дизайнер или пользователь может настраивать самостоятельно при работе со шрифтом в зависимости от задачи. Кернинг и спейсинг по умолчанию настраиваются разработчиком шрифта.

Почему важны кернинг, трекинг, спейсинг и интерлиньяж

Типографика — это искусство организации текста и его правильного расположения. Основная цель этого мастерства заключается в том, чтобы «достучаться» до восприятия читателя или зрителя, сделать текст визуально привлекательным, гармоничным, придать ему определённое настроение.

Интерлиньяж, кернинг, спейсинг и трекинг — именно те инструменты, которые позволяют работать с расположением и ритмом текста. Без них невозможно сделать шрифт равномерным, а текст — лёгким для восприятия.

Надеемся, наша статья помогла вам разобраться в сложных на первый взгляд понятиях. Если вы хотите разобраться с другими типографическими терминами, рекомендуем изучить наш шрифтовой словарь.

Илья — автомобильный дизайнер, который стажировался в Volkswagen, Audi и Porsche, а сегодня работает в Bentley. Недавно компания анонсировала выход Bentley Supersports — премиального спорткара с его дизайном.

У Ильи нет водительских прав, однако это не мешает ему создавать лакшери-автомобили и отличать хороший автомобильный дизайн от посредственного. Он рассказал, как ему это удаётся и что его вдохновляет

Мой стиль — это спорт-шик

Когда-то я работал в лакшери-ритейле. Был продавцом и мерчандайзером в Emporio Armani, затем — Head of Visual Merchandising в Hermès. Эта компания выпускает тысячи крутых дизайнерских товаров. Я знал весь ассортимент и технологию производства, изучал текстуры, формы, цвета. Думаю, что я перенёс этот опыт в дизайн автомобилей: мой стиль, как и стиль Hermès, — это спорт-шик. Видимо, эти товары со множеством уникальных деталей были для меня чем-то вроде эмоционального Pinterest. Получается, что у Hermès и Bentley «attention to details»: Bentley — это как Hermès, только в мире автомобилей.

Я парадоксальный автомобильный дизайнер: у меня нет водительских прав и никогда не было машины. Мне неинтересно разбираться в технической части и двигателях, зато нравится эстетика автомобилей. Я с детства рисую машины, и это то, чем я люблю заниматься до сих пор.

Для меня дизайн — это эстетическое удовольствие, эмоции, которые вызывают автомобили. Мне приятно разбираться в этом и подмечать детали — как плохие, так и хорошие.

Я не рисую агрессивных монстров с кучей спойлеров, мне не интересны маленькие городские машинки. Люблю лакшери-сегмент: Bentley, Ferrari, Bugatti, Rolls-Royce. Спортивная машина должна быть дорогой, а вот непонятные японские авто я терпеть не могу.

Мой стиль рисования вдохновлён выпускником моего вуза МАМИ Эрнестом Царукяном. Это первый российский автомобильный дизайнер, которого признали в западной индустрии. Он уехал в 2004 году и десять лет работал в Audi, а сегодня он менеджер в BMW. Эрнест рисует в уникальном стиле, который я отчасти перенял.

Также на меня повлияли стажировка в Audi и скетчинг моего тогдашнего тимлида Филиппа Ромерса — сейчас он дизайн-директор в Polestar.

Поймать филинг и найти «фишку»

Как у песни есть вайб, так и у крутой тачки должен быть филинг, эмоция. Она может прийти от чего угодно, например детали Ferrari этого года или Porsche 1969-го. Вы берёте это и переносите в свой дизайн, полностью изменив. Это тонкая материя, еле уловимая обывателем.

Удачное решение — то, которое выглядит красиво, эстетично и необычно. Это может быть классная, хорошо реализованная, невиданная раньше идея. Например, фары Citroёn, немного выходящие за пределы корпуса машины, или необычные поверхности Ferrari. Дизайнеры Ferrari сочетают плавные сексуальные объёмы с неожиданной резкой гранью, которая красиво растворяется в рельефе.

Многие бренды — Mercedes, Geely или Chery — делают сегодня нейтральные, безликие машины, пусть и хорошие с инженерной и эстетической точек зрения. Но в идеале у автомобиля должна быть дизайн-тема, «фишка», которая бросается в глаза и отличает крутой дизайн от посредственного.

На стажировке в Audi ментор поделился со мной лайфхаком. Представьте, что вам на две секунды показали фотографию машины, и теперь вы должны нарисовать эту машину по памяти. Если вы что-то запомнили: силуэт, пропорции, интересные детали — то это хороший узнаваемый дизайн со своей «фишкой». Но если за две секунды глаз ни за что не зацепился, то это обычный дизайн — не обязательно плохой.

Примеры успешного узнаваемого дизайна, к которому нужно стремиться, — это характерный горбатый силуэт «Жука» Volkswagen, объёмные арки Bentley Continental или футуристичный дизайн Tesla Cybertruck. Мне кажется, любой человек даже после двухсекундного изучения нарисует что-то похожее на эти автомобили.

Умение играть с пропорциями

Один из признаков плохого дизайна — откровенный плагиат. Это нормально, если одинаковые идеи пришли разным дизайнерам, и бренды выпустили похожие машины. Но бывают и непрофессиональные случаи намеренного плагиата, когда нелогичные решения принимаются в угоду маркетингу. Например, в китайской машине делают задние фары, как у BMW, и передние, как у Mercedes.

В хорошем дизайне машина — это единое целое. Если перед и бока у автомобиля плавные и без жёстких граней, а зад гранёный, это не мэтчится. Либо вся тачка должна быть гранёная, как Lamborghini, либо она должна быть сглаженная, как Porsche.

Главное, что отличает хороший дизайн автомобиля от плохого, — это умение играть с пропорциями. Сравните Ferrari и Lada Iskra. Первая эффектна из-за шикарных пропорций: она широкая, низкая, с мощными арками и большими колёсами. Lada Iskra стои́т, как пирожок с говном: на маленьких колёсах, с невзрачными объёмами, высокая и узкая. Это неказистый утилитарный транспорт.

Если у машины атлетичные классные пропорции, то дизайн может быть простым. Дизайн Porsche минималистичный, там нет обилия элементов, граней и сложных объёмов. Сколько бы ни менялась модель 911 в соответствии с современными технологиями, в ней всё равно узнаётся Porsche 60-х годов с чистыми, красивыми объёмами. К этому стараются прийти все бренды, но не всем это удаётся.

Лучше необычный и страшный дизайн, чем банальный и прилизанный

Последние шесть лет на индустрию влияет Tesla Cybertruck. Она сделана с нарушением всех канонов автомобильного дизайна, и профессионалы разделились на два лагеря. У одних идёт кровь из глаз при виде этой машины, другие её обожают. Я отношусь ко вторым и считаю, что это гениальный дизайн, хоть и уродливый. По мне, уж лучше необычный и страшный дизайн, чем банальный, прилизанный и безликий.

С Tesla Cybertruck после 2019 года началась революция в индустрии. Всё движется к минимализму, чистым, прямым поверхностям, вайбу 70–80-х. И на моё дизайнерское ви́дение Tesla Cybertruck тоже повлияла.

Никто не изобретает велосипед

Первый этап работы дизайнера экстерьеров — это быстрые мозговые штурмы, когда мы ищем референсы среди автомобилей конкурентов или машин прошлых лет. Ни одна компания не выдумывает с нуля и не изобретает велосипед, ведь создано уже столько всего.

Некоторые дизайнеры любят искать вдохновение в Pinterest. Я же посещаю автомобильные выставки, обращаю внимание на детали машин из журналов или проезжающих авто. Запоминаю их кайфовые места и то, что вызвало отвращение или смех. Если выходит суперкрасивая тачка, пытаюсь сохранить этот референс в голове. И, когда я сажусь рисовать скетчи будущего автомобиля, идеи приходят рандомно, из накопленной визуальной базы данных.

Дизайн должен быть физически реализуем

Три года назад на стажировках в Volkswagen, Audi и Porsche я делал много эскизов, но сейчас в Bentley я трачу на скетчинг максимум неделю.

Я предпочитаю искать ту самую скетч-модель в Blender. Пусть сначала эта 3D-модель автомобиля неидеальная и грубая. Но она должна передавать мою дизайн-идею — то, что в автомобильном дизайне называется темой и отличает мой дизайн от других.

Я каждый день на связи с боссом: отправляю ему скриншоты или 3D-модели. Он присылает правки, показывает работу дизайн-директору концерна Bentley и топ-менеджменту Volkswagen Group, в состав которого входит Bentley. Процесс напоминает пинг-понг, когда нужно угодить огромному количеству людей.

Когда дизайн приобретает осмысленную форму, её передают 3D-моделлерам. Они проектируют машину с математической точки зрения в Autodesk Alias, а затем отправляют модель инженерам и компаниям-подрядчикам, которые изготавливают детали. Наш дизайн должен быть физически реализуем, поэтому мы правим конструкцию даже утверждённой модели, например, чтобы какую-то деталь было удобнее и дешевле произвести.

Работать «на чиле»

У меня плачевный опыт коммуникации в московских Lada и Aurus. Это сборище гопников, с которым сталкиваешься, только заходя в офис.

В Volkswagen Group, наоборот, высокая культура корпоративного общения. Российским компаниям сто́ит поучиться тому, как здесь дают обратную связь.

Бывает, что я не согласен с решением шефа. Например, он просит поменять фон скетча, а я знаю, что с другим фоном моя визуальная идея рассыпется. Чтобы быстрее решить вопрос, я пишу ему в Teams: предлагаю сделать его вариант и сравнить с моим, а в конце добавляю . Так я в дружественной форме, с юмором и соблюдением субординации доношу до шефа, что уважаю его мнение, но мой вариант мне нравится больше. В таком стиле я выстраиваю коммуникацию и с остальными.

Я слежу за тем, как выгляжу со стороны: веду себя доброжелательно, не злюсь и не повышаю голос, никого не напрягаю. Если и обращаюсь к кому-то со срочной просьбой, пишу об этом аккуратно, с гифками и юмором.

Здесь расслабленная атмосфера — в отличие от российских и китайских компаний, где принято нагонять стресс и ставить дедлайн «ещё вчера». Даже когда что-то горит, люди корректны друг с другом, нет давления. Все «на чиле», но контролируют сроки и всё успевают. Я понял эту систему и работаю в таком же режиме.

* Организация Meta и её продукт Instagram, на который мы ссылаемся, признаны экстремистскими и запрещены на территории РФ.

Андрей Карпаты ввёл термин «вайб-кодинг» для обозначения бездумного дилетантского программирования, когда пользователь с помощью небрежного «исправь, пожалуйста» пытается добиться от нейронки рабочего кода. Такой подход возможен для небольших проектов, когда качество кода не имеет значения. Однако, если у вас коммерческий продукт или как минимум сайт, программировать с нейросетями нужно вдумчиво.

Как создавать сложные рабочие проекты с ИИ даже без знания программирования и почему для этого важно задавать контекст задачи — рассказываем в статье

Как правильно проектировать контекст для нейросети

Чем качественнее и подробнее контекст задачи, тем лучше будет результат. Рекомендуем выстраивать работу по следующим этапам:

Составьте верхнеуровневое описание проекта с целями и задачами. Расскажите, что хотите сделать, какую проблему решаете и какие есть правила для нейросети.

Контекст — это не раз и навсегда написанный документ. По мере работы над проектом он будет меняться и разрастаться. В дальнейшем, помимо верхнеуровневого описания, появятся документы по отдельным функциям.

С самого начала лучше писать каждый документ по одному шаблону с ключевыми разделами:

• Как продукт или функция должны работать
• Как сделано сейчас
• План работы
• Список проблем, которые нужно исправить

Не вываливайте весь контекст за раз: нейросеть его не запомнит. Модели ограничены так называемым окном контекста — максимальной длиной диалога, который они фиксируют в «памяти». Например, у GPT-5 это 272 тысячи токенов для входных данных, а у Claude Sonnet 3.7 — 200 тысяч. Ни один сложный продукт не «поместится» в эти рамки, поэтому проектировать контекст нужно по частям. Хорошо, если он занимает не меньше 20% «окна»: для модели с «окном» 128 тысяч токенов контекст составит не менее 25–30 тысяч.

Обсудите документ с нейронкой. Отправьте его в чат, обсудите архитектуру или попросите выбрать технологический стек. Задавайте вопросы, чтобы узнать недостатки вашего описания и улучшить его.

Добавьте в документацию детали:

• какие функции планируются в первой версии продукта
• из каких этапов будет состоять разработка
• каковы неожиданные пользовательские сценарии и поведение интерфейса для них

Например, при создании приложения для разделения счёта укажите, как будут добавляться плательщики, откуда подтягивать сумму счёта, как учитывать налоги и скидки и каким должен быть результат.

Не обязательно составлять документацию самостоятельно. Опишите нейронке задачу и попросите её задать вопросы по ней. На основании ваших ответов модель напишет детальный документ с инструкциями для себя. Скорее всего, вам даже не нужно будет вникать в написанное.

Как работать над проектом с помощью нейросети

Вот практические советы, которые помогут вайбкодить:

Работайте итеративно. Хороший продукт не получится сразу. Двигайтесь поэтапно и документируйте результаты каждой удачной итерации.

Не просите нейронку исправить ошибки. Если это не мелкий недочёт, команда «исправь» не поможет. Когда нейронка делает что-то не так, это означает, что есть ошибки в контексте или промте. Иногда нужно несколько раз переформулировать задачу.

Давайте модели полный контекст задачи. Допустим, вы хотите поменять скругление кнопки:

Не соглашайтесь с правками, если чего-то не понимаете. Лучше попросите нейронку объяснить термины или её действия. Это поможет разобраться с кодом даже тем, кто плохо разбирается в программировании.

Используйте форматирование Markdown. С ним получится структурированная документация, которую нейронке проще понять.

Используйте не чаты, а специальные агентские инструменты. Лучший агент для вайб-кодинга сегодня — это Claude Code компании Anthropic. Работать с ним в терминале может быть неудобно или непривычно, если у вас нет такого опыта.

Лучше установить его в Cursor, Windsurf или Google Antigravity в виде плагина и оплачивать подписку, потому что она выгоднее использования по API.

На втором месте по популярности и эффективности после Claude Code идёт OpenAI Codex: они похожи по функционалу и возможностям.

Если вы хотите разрабатывать продукт в одном окне, в том числе и с телефона, выбирайте Replit. Это полнофункциональная среда разработки с собственным агентом, который самостоятельно тестирует сгенерированные приложения. Есть режимы планирования и редактирования, логи, аналитика и база данных, а также можно развернуть продукт на хостинге.

Если нет необходимости вайбкодить с телефона, вам подойдут Bolt.new или Lovable.

Пробуйте разные модели, в том числе и платные. Качество кода может вырасти при смене нейросети, однако последние модели не всегда лучше.

Для простых задач подойдут недорогие нейронки, такие как GLM-4.6. Подключите их к Claude Code: так вы сэкономите на разработке без потери качества.

Мастер-классы и гайды по вайб-кодингу

Мастер-класс Дэна Холлика из Tailwind по использованию Claude Code

Мастер-класс по созданию приложения-каталога для разработчиков в Bolt

Трёхчасовой мастер-класс по работе с Bolt

Видео о работе с Cursor

Cursor AI: полный гайд по вайб-кодингу Олега Стефанова

Мастер-класс по созданию клона YouTube в Lovable

Сотни обучающих видео по работе с Replit

23-страничный гайд по вайб-кодингу Anthropic

15-минутное руководство по выстраиванию процессов при вайб-кодинге

Создать первый шрифт сложнее всего, потому что дизайнер ещё не знает всех деталей разработки, не обладает достаточной насмотренностью и опытом. Многое при разработке гарнитуры в первый раз приходится узнавать в процессе, перенося теоретические знания о шрифтовом дизайне на практику, что всегда сложно

Однако именно с первой гарнитуры начинается путь шрифтового специалиста. Чтобы стать опытным дизайнером, нужно сделать первый шрифт, потом второй, третий, параллельно усваивая, какие недочёты первых этапов нужно исправлять.

Позже, когда специалист наберётся опыта, первые работы покажутся некорректными, наивными, и всё-таки вызывающими тёплую ностальгию, ведь именно с них начинался профессиональный путь.

В этой статье мы расскажем, с чего начинать разработку первой шрифтовой гарнитуры, какие программы понадобятся для работы и чему нужно уделить больше внимания.

Теоретическая подготовка

Прежде чем вы приступите к непосредственной работе, запаситесь знаниями. Этот путь похож на университетский подход: сначала лекция, уже потом практическое применение на семинарах. Впрочем, это не строгое правило, ведь кому-то легче получать знания в процессе, берясь за работу сразу и изучая конкретные вопросы, возникающие по ходу создания. Выбирайте тот путь, который подходит вам.

Среди ресурсов, которые помогут при создании шрифта, вы также можете выбрать подходящие вам. Мы рекомендуем ориентироваться на разные источники: и книги, и интернет-порталы, и трансляции специалистов.

Вот книги, которые стоит держать на рабочем столе:

• Designing Type, книга Karen Cheng
• Type Tricks: Your Personal Guide to Type Design, книга Sofie Beier
• Designing Fonts: An Introduction to Professional Type Design, книга Thames and Hudson
• How to create typefaces. From sketch to screen, книга Cristobal Henestrosa, Laura Meseguer, Jose Scaglione

Также стоит подписаться на шрифтовых дизайнеров в социальных сетях, особенно если они проводят трансляции и делятся рекомендациями по созданию шрифтов. Например, студия TypeType каждый месяц проводит трансляции на тему шрифтового дизайна.

Чем больше разных источников вы найдёте на начальных этапах, тем лучше. Позже вы сможете отсортировать их и оставить самые любимые и полезные.

Этапы создания собственного шрифта

Итак, вы вооружились знаниями и готовы приступить к работе. Вам понадобится оборудование, то есть ноутбук или компьютер, подходящая программа и желание создать самый прекрасный шрифт в мире.

Начните с постановки задачи и определения состава, стиля и характера шрифта. Для первой гарнитуры лучше выбрать минимальный кассовый состав. Ответьте себе на вопросы — можно сделать это в блокноте или текстовом редакторе:

• какой шрифт вы создаёте: гротеск, антиква, брусковый
• где может использоваться ваш шрифт: на сайте, в печатной продукции, для оформления витрин
• какое позиционирование у шрифта: ультрасовременная гарнитура для стильных проектов или классический шрифт со строгим характером, отсылающий к конкретной исторической эпохе или подходящий под определённый тренд
• в каком размере и где будет использоваться шрифт: для оформления заголовков или в приложении, в плакатах или только на сайтах

Определите сроки. Даже если вы разрабатываете гарнитуру для личного пользования, будет полезно выработать привычку работать, ориентируясь на дедлайны.

Проведите исследование. На этом этапе стоит отобрать от 3 до 10 гарнитур, близких к тому, что вы планируете разработать. Копировать их в своём проекте, конечно, не стоит, но полезно изучить графические особенности, размеры и другие параметры шрифта, чтобы понять логику построения.

Определитесь с кассовым составом. Это следует сделать ещё на первом этапе, но в этот раз вам нужно подробно выделить все знаки, которые планируете отрисовать. Это может быть один язык, например базовая латиница, цифры и набор пунктуации.

Поработайте со скетчами. Когда исследования проведены и идея будущего шрифта сформирована, приступайте к скетчам. Вы можете использовать для этого карандаш и лист бумаги, тушь и кисть или графический редактор.

Цель скетчинга — определиться с визуальными формами шрифта.

Вначале вы можете отрисовать несколько символов, чтобы наметить общие формы шрифта. Когда стиль и основные формы будут готовы, переходите к работе над конкретными буквами.

К скетчам можно обращаться, когда не можете определиться с формой какого-то глифа. Например, выбрать между двумя вариантами буквы «a». Отрисуйте несколько форм и выберите подходящую, используя скетчинг.

Отрисуйте кассу. Когда все предыдущие этапы пройдены, переходите к созданию гарнитуры в шрифтовом редакторе. Помните, что шрифт — это не отдельные буквы, а система символов, объединенных общей идеей и характером. Графические решения, составляющие стиль шрифта, должны быть логичными и повторяться в нескольких символах.

На этом этапе вам предстоит отрисовать все символы шрифта: латиницу или кириллицу, знаки пунктуации, валют, дроби, дополнительные символы. Как мы упоминали ранее, начните с простого и базового состава, чтобы закончить шрифт в запланированный срок, получить опыт и ощутить радость от завершения проекта. В последующих проектах вы сможете расширять знаковый состав.

В шрифте может быть несколько начертаний, в том числе прямые и наклонные. Начните с одного, например, Regular или Medium, самых распространённых и часто используемых.

Когда нарисованная касса будет готова, приступайте к спейсингу. На этом этапе всем буквам назначаются корректные значения для левых и правых полуапрошей, другими словами, идёт работа с расстоянием между символами.

Поработайте над технической частью. Шрифт — это не просто касса отрисованных знаков, это продукт, которым можно пользоваться в программах.

После дизайнерской части работы наступает технический этап. Именно он определяет, насколько корректно созданная гарнитура будет работать. Для первого шрифта вы можете объединиться с более опытным специалистом, который поможет с технической частью работы.

Условно этот этап состоит из трёх: мастеринг, кернинг и TrueType хинтинг.

Мастеринг — это проверка и правка контуров, компонентов, диакритики и других элементов шрифта. На этом этапе создаются OpenType фичи, заполняется метаинформация внутри шрифта.

Кернинг — это процесс, в котором расстояние между буквами приводится в безупречный вид. Проще говоря, исправляются моменты, в которых между буквами образовалось слишком много белого пространства. Этот этап происходит после того, как работа со спейсингом завершена.

Хинтинг — это визуальная разметка шрифта для корректного отображения маленьких кеглей в различных операционных системах.

Инструменты и программы для создания шрифтов

Программ для работы со шрифтами достаточно много. Вот те, которыми часто пользуются шрифтовые дизайнеры:

• Glyphs
• Fontlab
• Robofont
• FontForge
• Fontographer

Пожалуй, из этого списка можно выделить Glyphs и Fontlab, так как бо́льшая часть специалистов использует их. Это связано с удобством интерфейса, разнообразием инструментов и адаптивностью под пользователя. Студия TypeType предпочитает Glyphs, хотя раньше работа студии проходила в Fontlab.

Мы рекомендуем познакомиться с двумя-тремя разными программами, изучить их функционал и понять, в какой работа проходит наиболее комфортно. Многие программы предоставляют тестовый период, поэтому это не потребует много ресурсов.

Позже сто́ит выбрать одну программу и работать в ней, наращивая опыт и улучшая навыки шрифтового дизайна.

Заключение

Создание первой гарнитуры может вызвать страх неизвестности, ведь многим новичкам кажется, что они не справятся, а создание шрифта — это очень сложно.

Решайтесь на первый шрифт, ведь в будущем именно его вы будете вспоминать с тёплой ностальгией. Ошибайтесь, экспериментируйте, создавайте неидеальные гарнитуры и вносите в них правки — со временем вы поймёте, в каком направлении продолжать.

Все герои на этой пикче — дизайнеры с доходом от миллиона в месяц

Не смотри, что они пиксельные. Они списаны с реальных людей, встреченных мною за десять лет в индустрии. Давай познакомимся с каждым поближе и узнаем, в чём их секрет.

Дизайн-директор

Этот дядя годами карабкался по карьерной лестнице в одной небедной корпорации. Сегодня он управляет дизайн-командами, встречается с руководством и растит метрики.

Он знает, что такое GMV, LTV, PU, CR1/CR2, поэтому умеет говорить на языке бизнеса. Понимает, сколько денег реально приносит компании, выбил себе процент от прибыли и получает солидные премии.

Таких, как он, мало. «Жирных» вакансий для них — ещё меньше. Они редко говорят о деньгах публично из-за этики или NDA. Но автору этой статьи известно как минимум о двух таких миллионерах.

Хочешь быть как они? Посмотри, кто возглавляет дизайн в крупнейших корпорациях — зачастую это публичные люди. Следи за ними, перенимай мышление и подход. Спойлер: придётся закрыть Фигму и открыть учебник по менеджменту.

Корпоративный стартапер 

Этот парень — обычный дизайнер, который придумал стартап внутри своей компании. Сделал MVP, прикинул бизнес-модель, пропитчил руководству и… получил деньги, ресурсы и поддержку!

Да, такое бывает. Например Яндекс Драйв основал рядовой менеджер Яндекс Карт. Дизайнеру тоже никто не запрещает повторить его подвиг. В некоторых корпорациях даже есть внутренние акселераторы для таких историй.

Важно лишь убедить «инвесторов» в компании, что ты способен воплотить задуманное. Тут пригодится опыт руководства, построения команд и бизнес-моделей.

Будешь ли зарабатывать миллион — зависит от успеха проекта, твоего вклада и умения договариваться. Но, опять же, Фигма уйдёт на десятый план.

Переехавший дизайнер

Эта леди была востребованным дизайнером на родине, но решила махнуть за своим миллионом в США. Изучила опыт ранее переехавших, бустанула портфолио, отполировала LinkedIn, натренировалась проходить собеседования с носителями и с N-ной попытки прошла.

Переезд и виза — дело хлопотное и дорогое. Многие перебираются сами и ищут работу уже на месте. Нашей героине повезло, что были накопления и компания помогла с релокацией.

Теперь она в центре индустрии, впитывает местную культуру и язык. В пересчёте на рубли — зарабатывает больше миллиона. Но бешеные цены, иной уклад жизни и тоска по дому не способствуют стремительному росту капитала и карьеры. Пожелаем ей удачно пройти этот этап!

Не везде за работу в Фигме платят так щедро, как в США. Многие страны не стоят переезда. Но если захочешь повторить её путь, погугли что-то типа «переезд дизайн faang». Гайдов и историй о разных странах уже полно.

Валютный удалёнщик

Ой, а это я — автор статьи. По мере роста профессионального, искал и роста дохода. Так я и пришёл к зарубежным удалёнкам. Подкачал язык, перевёл портфолио и LinkedIn, прошёл собес и… начал дизайнить втрое дороже.

Оказалось, в западных проектах комфортный темп. Если ускориться, можно осилить две работы и получать больше миллиона в месяц. И да: занимаясь дизайном дома или в путешествии, а не звонками и отчётами в офисе.

Сегодня у таких, как я, не лучшие времена: SWIFT заблокирован, интернет изолируется… Кто-то пустился в другие юрисдикции, а кто-то мучается с VPNом, крутит схематозы с криптой или Казахстаном.

Но если трудности не пугают и хочется подробностей — приглашаю изучить гайд по зарубежным удалёнкам. Там всё: и мой личный опыт, и подготовка, и формальности.

Основатель агентства

Этому дизайн-лиду осточертело работать на дядю: нервы, сроки, пох*изм вокруг… Уходя, он прихватил с собой продакта и разработчика. Вместе они основали своё диджитал-агентство. Сильное портфолио и хорошая репутация со времён найма обеспечили поток заказов, пускай и не всегда интересных.

Считается, что в свободном плавании можно забыть о финансовой стабильности, ментальном здоровье и лишнем времени. Но наш герой, списанный со знакомых автору основателей, выиграл по всем фронтам. Теперь он сам решает как работать, где, с кем и за сколько. В среднем выходит миллион в месяц. А сколько выходит у Артемия Лебедева представили?

Получится ли у тебя? Не факт. Но начать можно с изучения опыта таких основателей или фрилансеров-звёзд. Обычно они открыты к общению, напиши им с вопросом: «Как вам удалось?»

Сенсей

Этот харизматичный парень всегда умел захватывающе рассказать о своей карьере. Сотни подписчиков видели в нём пример для подражания, просили поддержки или совета. Но когда счёт пошёл на тысячи, помочь каждому по-отдельности стало нереально. Поэтому он собрал свой опыт в гайды, а детали и личные консультации сделал платными.

Когда профит покрыл базовые потребности, он бросил работу и запустил свою школу — с курсами, прогревами и комьюнити. Со временем появились ассистенты, новые направления и мероприятия, а доход перевалил за миллион в месяц.

Легитимность и популярность — вот что нужно на этом пути. Для начала стань хорошим специалистом, изучи опыт дизайн-инфлюенсеров и сделай первые потуги в медийности. А дальше разберёшься.

Стартапер

Этому челу плевать, что 90%+ стартапов не выживают — ведь его продукт решает реальную боль. Несмотря на дизайнерский перфекционизм, он быстро собрал MVP, проверил идею и пошёл дальше. Лишних ресурсов не было, зато была пара таких же энтузиастов и ментор-предприниматель, который помогал советами.

Когда проект показали инвестору, тот оценил прозрачные метрики, измеряемый потенциал и вложился в масштабирование. А когда продукт начал отвоёвывать долю рынка — случилось чудо. Его выкупила корпорация, как когда-то Альфа-Банк выкупил Нетмонет. Все участники разом стали миллионерами.

В этом пути важно трезво оценивать свои шансы на успех. Начинать не с идей, а с поиска реальных проблем. Говорят, важно проверять гипотезы быстро и учиться на обратной связи. Иначе — всё это затяжной путь к разочарованию.

Многостаночник

Этот персонаж не стал складывать все яйца в одну корзину. И, честно говоря, именно так действует большинство миллионеров. Основатели студий запускают школы, удалёнщики пилят стартапы, топ-менеджеры качают медийку…

Вот и наш герой зарабатывает на всём понемногу: дизайнит в найме, менторит новичков, продаёт рекламу в ТГ-канале с мемами, спекулирует на скинах в CS и сдаёт квартиру, доставшуюся от бабушки.

Не обязательно ограничиваться дизайнерской деятельностью. Подумай над другими ручейками, формирующими твою экосистему доходов.

Как видишь, миллионеры среди дизайнеров — это не миф. Но всех этих героев, как и их реальные прототипы, объединяет не просто желание апнуть лям, а ещё и стремление приносить пользу.

Во время переписки с одним из таких дизайнеров, Артёмом Марковским, я пообещал передать тебе его слова. Ими и закончу эту статью:

Деньги всегда приходят на масштаб цели и связанные с ним риски. И получает большие деньги не тот дизайнер, который лучше всех рисует или у кого миллион подписчиков в Инстаграме, а тот, кто умеет организовывать клиентский сервис на уровне международных или крутых российских агентств, обеспечивает надёжность, вселяет доверие, берёт ответственность, разгребает корпоративные конфликты, умеет доступным языком обосновывать и влюблять в свои решения, выдаёт качественный результат и делает всё, чтобы его работа была заметной.

Именно поэтому надо фокусироваться на этих вещах, и тогда ресурсы будут приходить в соответствии с твоей отдачей и выгодой для бизнеса, а не потому что ты вдруг решил, что просто хочется урвать от ляма в месяц.

Спасибо за интерес к статье! Если понравилось, заглядывай к автору в «Дизайн в деле».

За последние десять лет рынок стал значительно сложнее: конкуренция выросла, потребительский выбор расширился, а скорость появления новых продуктов увеличилась в разы. В таких условиях компании с долгой историей сталкиваются с необходимостью регулярно обновлять свою бренд-платформу — не ради моды, а для сохранения конкурентоспособности и управляемости роста.

В этой статье Дмитрий Сытин, эксперт в области IT-продуктов и цифровых экосистем, сооснователь платформы «Флатика», анализирует примеры трансформаций крупных брендов и показывает, как менялись их стратегии, роли и визуальные языки.

Сегодняшний потребитель — более требовательный и более осознанный. Он ожидает от компаний не просто полезного продукта, а понятную ценность и релевантный опыт взаимодействия. Это делает традиционные модели коммуникации и позиционирования недостаточными: они больше не объясняют, зачем бренд существует и какую роль играет в жизни пользователя.

Поэтому любой серьезный пересмотр бренда начинается с ключевого вопроса: какую задачу бренд решает для человека сегодня — и какую должен решать завтра?Ответ на этот вопрос стал основой для трансформации практически всех крупных игроков — от глобальных технологических компаний до fashion-индустрии. Каждый из них столкнулся с одинаковыми вызовами: изменением поведения аудитории, насыщением рынков и смещением фокуса от продукта к ценностям.

От сервиса аренды к бренду про принадлежность

Когда Airbnb столкнулся с кризисом доверия и падением бронирований в 2020 году, компания перестала говорить о «жилье» и начала говорить о принадлежности. Новый слоган “Belong Anywhere” стал не маркетинговым ходом, а философией бренда: Airbnb стал продавать не комнаты, а опыт жизни в другом месте, как дома.

Переосмысление помогло компании вернуться к прибыльности уже в 2022 году и стать одним из символов постковидной экономики — брендом о человеческом соединении, а не транзакции.

От игрушек к образовательной платформе

После кризиса 2000-х, когда продажи падали на 30% в год, LEGO отказалась от идеи быть просто производителем конструкторов. Компания переосмыслила свою миссию: вдохновлять и развивать будущих создателей мира.

Так родились LEGO Education, LEGO Foundation и LEGO Metaverse — направления, где игра стала инструментом обучения и технологического развития. Результат — рост выручки более чем в 4 раза и выход за пределы детской аудитории.

От элитарности к вовлеченности

В 2015 году бренд столкнулся с потерей актуальности среди молодых клиентов. Новый креативный директор Алессандро Микеле полностью изменил язык бренда: вместо недостижимой роскоши — самовыражение и свобода.

Gucci стал говорить на языке культуры, а не статуса: коллаборации с Balenciaga, Xbox, The North Face, запуск метавселенной в Roblox — всё это сделало бренд частью жизни аудитории поколения Z. Результат — более чем двукратный рост продаж за три года и возвращение в медиаповестку.

От технологии к экосистеме доверия

Пять лет назад Microsoft провела одну из самых тихих, но сильных трансформаций. Под руководством Сатьи Наделлы компания сменила фокус с «софтверного гиганта» на «партнёра по цифровой трансформации».

Главный посыл — “Empower every person and every organization on the planet to achieve more.”Microsoft перестала быть поставщиком решений — она стала инфраструктурой для роста других бизнесов. Эта стратегия привела компанию к капитализации более $3 трлн и вернула доверие клиентов, уставших от корпоративной бюрократии.

От outdoor-бренда к активисту планеты

Бренд давно перестал просто продавать одежду. Patagonia создала модель responsible capitalism — направляя прибыль на экологические инициативы и переориентируя коммуникации на устойчивое развитие.

В 2022 году основатель Ивон Шуинар передал компанию в траст, заявив: «Единственный владелец Patagonia — Земля».

Так бренд превратился из производителя в активиста — и стал примером того, как ценности могут быть сильнее коммерции.

От проката DVD к культурной платформе

Netflix начинал как логистическая компания. Но, увидев рост стриминга, он переосмыслил себя как культурного посредника — не просто дистрибьютора, а создателя контента.

Сегодня Netflix формирует вкусы, влияет на общественные дискуссии и экспортирует культурный код — от «Игр в кальмара» до документалок о спорте.

Трансформация стоила миллиарды инвестиций, но принесла новую идентичность — и монополию на внимание.

Локализация как стратегия: мировой тренд и закономерный шаг

Мировая практика показывает: зрелые цифровые платформы рано или поздно проходят этап локализации, что становится одним из ключевых посылов к бренд-изменениям и способом стать ближе к пользователю. Например, Ozon — один из пионеров российского онлайн-ритейла. В конце 2024 года акционеры компании приняли решение о смене юрисдикции с Кипра на Россию.

Причина: рынок потребовал локальных решений. Пользователь стал ждать от платформы не просто каталога, а сервиса с ближним опытом, адаптированным к российской реальности. Ozon начал усиливать финансовое направление, рекламные сервисы и логистику. Бренд-маркетплейс выбрал перестройку бизнес-модели и коммуникаций, а не только смену визуального фасада.

Похожие процессы происходят и в других отраслях. Ещё один показательный пример — Wildberries, крупнейший маркетплейс России. За последние годы компания прошла путь от интернет-ритейлера к самостоятельной экосистеме с финансовыми, логистическими и образовательными сервисами. Локализация здесь проявилась не только в структуре управления и региональной сети, но и в том, что платформа активно интегрировала национальных производителей, дала им цифровые инструменты для масштабирования и начала выстраивать внутренние стандарты качества, ориентированные на российский рынок. Фактически Wildberries стала примером того, как локальный бренд может выстроить глобальный по масштабу продукт, сохранив привязку к культурным и экономическим особенностям страны.

Тот же принцип работает и в профессиональных экосистемах. В октябре 2025 года международная платформа для дизайнеров и архитекторов Houzz объявила о переезде на новую платформу flatica.ru и запуске нового бренда «Флатика» — локализованной версии проекта для российского рынка.  Для российских пользователей это не косметическое обновление, а существенная трансформация продукта: функциональность адаптирована под местные потребности, поиск и фильтры ориентированы на локальные бренды, материалы и услуги, а рекомендации учитывают специфику рынка. В результате сообщество получило новые возможности: дизайнеры, мастера и пользователи взаимодействуют напрямую, обмениваются контактами, советами и отзывами. По сути, «Флатика» стала цифровой экосистемой для дома, созданной внутри страны, но основанной на международной экспертизе. 

Бренд-платформа 2.0: почему обновление начинается не с логотипа

Когда компании решаются на ребрендинг, они редко думают о главном — зачем они это делают. Меняют логотип, цвета, визуальный язык, но при этом продолжают говорить с клиентом так же, как раньше. Рынок, между тем, меняется быстрее, чем бренды успевают адаптироваться. И сегодня обновление бренд-платформы — не вопрос эстетики, а вопрос выживания.

Что это значит для бизнеса

Ребрендинг — управленческое решение, а не дизайнерский проект.
Он начинается не с презентации айдентики, а с диагностики: анализа восприятия бренда, ожиданий клиентов и реальной ценности, которую компания несёт рынку.

Ключевой вопрос — не «нравится ли нам наш логотип», а «что удерживает аудиторию рядом с нами». Без этого понимания любой редизайн превращается в косметический ремонт — временный эффект без стратегического результата.

Ошибки при ребрендинге

Самая частая ошибка — стремление быть «как другие». Копирование чужих моделей, попытка встроиться в визуальные тренды или перенять чужую коммуникационную интонацию обнуляет индивидуальность. Рынок не нуждается в клонах — он ищет бренды, у которых есть собственная логика и цель. Обновление бренд-платформы должно начинаться не с формы, а с смысла: кто мы, для кого и почему люди должны нам верить.

Три нематериальных актива сильного бренда

Сообщество — как капитал доверия

Сообщество — это не аудитория в соцсетях, а среда, где пользователи живут вместе с брендом. Когда обсуждения, отзывы и пользовательский контент продолжают существовать без прямого участия компании, это признак зрелости экосистемы.

Участие — как новая форма лояльности

Современные клиенты не хотят просто покупать. Они хотят участвовать, влиять, обсуждать. Бренды, которые умеют слушать и вовлекать аудиторию в совместное создание ценности, становятся частью ее образа жизни.

Аутентичность — как основа доверия

Люди устают от глянца и искусственных историй. Реальные кейсы, настоящие лица и честный тон коммуникации дают бренду то, чего не купишь рекламным бюджетом — ощущение подлинности.

Три правила смысловой архитектуры

Правило 1. Не начинайте с айдентики. Начните с вопросов.
Что мы меняем и зачем? Что в нас устарело — форма или идея?

Правило 2. Стройте экосистему, а не витрину.
Современный бренд — это живой организм, где пользователь не зритель, а соавтор.

Правило 3. Визуальный язык должен отражать структуру, а не хаос.
Хорошая айдентика не кричит, а упорядочивает. Она помогает бренду быть узнаваемым без навязчивости.

Что важно помнить

Ребрендинг — не косметическая процедура, а инструмент управления смыслом. Он помогает компании заново определить свою роль в жизни клиента и вернуться к исходному вопросу: зачем мы существуем. Когда бренд строит коммуникацию вокруг человека — его опыта, эмоций и среды, — он становится не просто узнаваемым, а устойчивым.

А в мире, где визуальные тренды устаревают за сезон, именно устойчивость становится новой формой успеха.

Практически во всех шрифтах помимо основного набора из букв, знаков и символов присутствуют дополнительные графические элементы. Это могут быть как обычные стрелки и цифры в кружочках, так и более сложные иллюстрации. При этом даже простейшие иконки в разных шрифтах выглядят по-разному. От чего зависит внешний вид этих элементов? Как и зачем они создаются? И какими они бывают? Обо всем этом мы расскажем в нашей статье

Немного истории: как появились стрелки и указатели

Стрелки — это один из вариантов «базовых» графических элементов шрифта, которые есть практически в каждой гарнитуре. Фактически их неправильно относить к категории иконок, но тем не менее мы хотели бы рассказать о стрелках подробнее. Ведь эти символы повсеместно используются во всем мире — на вывесках, указателях и так далее, чаще всего выполняя навигационную функцию. Но откуда они взялись?

Современная стрелка, которую мы привыкли видеть — это простой графический объект: прямая с двумя диагоналями, которые сходятся в одной точке. Но около 400 лет назад изображение стрелки больше напоминало стрелу лучника — которая, собственно, и лежит в основе данного символа. Со временем она упростилась и потеряла «оперение», превратившись в схематическое изображение.

Сегодня стрелка — это универсальный символ, понятный каждому. По этой причине стрелка используется даже на пластинках, находящихся на борту межпланетных станций «Пионер-10» и «Пионер-11». Иллюстрации на этих табличках адресованы гипотетическим жителям других планет. С помощью символов они передают информацию о человеке и о расположении Земли и Солнечной системы во Вселенной. То есть авторы рисунков посчитали, что значение стрелки должны понять даже инопланетяне.

Однако стрелки, судя по исследованиям, стали активно использоваться в качестве указателей только в 18 веке. Ранее для этой цели служили совсем другие изображения. Первым зафиксированным указателем считается рисунок, который вы видите ниже — он высечен на тротуаре города Эфес и датируется примерно 1-м веком н.э. На нем изображена стопа рядом с лицом женщины. Почему именно стопа? Очевидно, она буквально призывает «идти по следам», чтобы куда-то прийти. Так, в паре с лицом женщины эта «навигационная табличка» указывала направление к борделю.

В современном мире вы также можете встретить этот символ, например, в торговых центрах.

Кроме того, в качестве указателей использовались маникулы, или указующие персты. Считается, что этот символ появился в Испании в 12 веке н.э. С помощью этих перстов изначально делали пометки в тексте: маникулы изображались на полях и указывали на фрагменты, на которые нужно обратить внимание.

По манжету можно понять, что это рука арлекина. Однако по мере распространения маникулы стали изображаться по-разному. Особенно смело фантазировали на эту тему в средние века.

Получается, что стиль маникулы зависел от культурных и исторических особенностей, а также от видения автора. Теперь разберемся, что влияет на внешний вид иконок в современных шрифтах.

От чего зависит графика иконок

Для начала ответим на вопрос — а зачем вообще нужны иконки в шрифте? Во-первых, это красиво. Во-вторых, иконки помогают передать посыл шрифта, его настроение. В третьих, они показывают, в каком контексте может использоваться шрифт. Поэтому даже самые распространенные иконки — стрелочки, маникулы, сердечки и так далее — будут выглядеть по-разному в разных шрифтах.

Соответственно, графика иконок зависит от двух факторов:

1. От настроения самого шрифта (гарнитуры);
2. От сферы его применения.

Важно, какой посыл несет шрифт, какие ассоциации у нас возникают, когда мы на него смотрим. На настроение шрифта напрямую влияет конструкция знаков: толщина стемов, контраст, выносные элементы, засечки и так далее. Все эти конструктивные особенности отражаются и на графике иконок.

Во втором случае стиль иконок будет зависеть от того, для чего создавался шрифт — то есть дизайнер может заложить в гарнитуру какие-то специализированные иконки, необходимые для той или иной сферы применения.

Иконки и иллюстрации в шрифтах

Практически в каждой гарнитуре TypeType есть простейшие символы, такие как цифры в кружочках, стрелки и прочие указатели. Это стандартные элементы, которые часто используются для навигационных задач, для создания иерархии в тексте (например, составления списков) и так далее. Как правило, они не относятся к иконкам.

И даже эти элементы в разных гарнитурах выглядят по-разному. Например, в универсальном бестселлере TT Norms® Pro рисунок знаков отличается простотой и лаконичностью. Стрелка также выглядит максимально «базово».

В более технологичной и брутальной гарнитуре, такой как TT Autonomous, стрелка будет выглядеть немного иначе. Так, внутреннее белое в шрифте сквадрачено, а терминалы и окончания штрихов подрезаны. Срезы в стрелке повторяют формы терминалов, толщина стемов та же, что и в знаках. Общий стиль иконки простой и лаконичный, декоративные элементы в ней отсутствуют.

Иконки и иллюстрации — это более сложные графические элементы, которые рисуются для конкретного шрифта. Мы выбрали самые яркие примеры гарнитур TypeType, содержащих иконки, чтобы наглядно продемонстрировать, как их внешний вид зависит от общего стиля или назначения шрифта.

Колючий TT Ricks

При взгляде на TT Ricks возникают следующие ассоциации: колючий, резкий, несколько вычурный, злой, мистический. Среди иконок мы видим соответствующие символы — игральные карты, полумесяцы и звезды, канделябры и ядовитые грибы.

В конструкции знаков можно выделить подвижные, резкие засечки внушительных размеров. Это достаточно контрастная антиква с плотным набором. Это все отражается и в графике иконок — рассмотрим это на примере стрелки. В данном случае у нее острое навершие, тонкая перекладина, декоративный ромбовидный элемент — все это сделано для того, чтобы поддержать общую концепцию шрифта.

Чарующая TT Espina

Еще один пример влияния графики шрифта на графику иконок — TT Espina. Это достаточно контрастный, несколько агрессивный шрифт с ромбовидными формами, ассоциирующийся со стилем бохо и чем-то магическим. С этими ассоциациями связан и набор иконок — там есть магические шары, звезды и кометы, спички и кристаллы.

Стильный TT Ricordi Greto

TT Ricordi Greto — экспериментальный шрифт, вдохновением для создания которого послужила надпись на табличке 1423 года, расположенной в Базилике Санта-Кроче во Флоренции. Исторические формы в шрифте сочетаются с актуальными визуальными решениями. В сете иконок отразилась эта особенность — здесь есть кинжалы, кости и черепа, цветы и змеи. А еще в гарнитуру входит 13 оригинальных политипажей, которые также можно использовать отдельно в качестве графических элементов.

Дизайнерский TT Globs

TT Globs — стильный и необычный брусковый шрифт с широкими пропорциями. У него игривое, легкое и «летнее» настроение. Сет иконок подчеркивает все эти особенности: здесь есть глаза, перекликающиеся с формами глифов, легкомысленные цветочки, схематичные изображения планет и галактик.

Кинематографический TT Trailers

Влияние шрифта на графику иконок можно рассмотреть на примере TT Trailers. Он создавался как плакатный шрифт для для сферы кино. Он узкий, вытянутый, чтобы в минимальном пространстве помещалось большое количество информации. В составе гарнитуры есть сет маленьких букв, созданный для этих целей. И набор иконок здесь также связан со сферой применения шрифта — среди них есть билеты, экран, кресло, попкорн, указатели направлений и тому подобное.

Удобный TT Interphases Pro

Шрифт был создан специально для работы с интерфейсами, поэтому в нем заложен большой сет иконок, которые чаще всего используются в интерфейсах: различные стрелки, галочки, шестеренки, папки и так далее.

Универсальный TT Neoris

TT Neoris — многофункциональный шрифт-хамелеон, который можно адаптировать для любых проектов. Рисунок знаков отличается простотой и минималистичностью, при этом в нем есть интересные детали. Так как гарнитура предназначена для универсального использования, в нее вошли базовые иконки — сердечки, звездочки, ручки, геометрические фигуры и смайлики.

Графика в шрифтах

Отдельно стоит поговорить о других графических элементах в шрифтах, которые не относятся к иконкам.

Один из самых интересных примеров — TT Ramillas. После того, как мы его создали, у нас появилась идея добавить что-то в этот шрифт. Разумеется, мы начали с исследования, и в итоге остановились на том, что сделаем одно аутлайн начертание и буквицу.

Под каждую букву мы решили рисовать индивидуальный орнамент. Чтобы сохранить параметры вариативности и сократить время на создание буквицы, а также снизить трудозатратность процесса, мы сначала отрисовали отдельные модули — элементы, такие как листья, цветы, стебли, завитки. Затем из них, как из мозаики, скомпоновали рисунок под каждую букву.

Все эти элементы мы сохранили в качестве отдельных иконок, их тоже можно найти в гарнитуре. Дизайнер может самостоятельно создать из них какой-либо орнамент, использовать их как концевые элементы или редактировать с их помощью существующие глифы, если это необходимо для верстки.

Шрифты с историей

Примеры, которые мы приведем ниже, объединяет наличие исторического бэкграунда. Так, каждая из этих гарнитур создавалась на основе исторического прототипа — например, шрифта из старых книг или надписей на древних табличках. Эта особенность отразилось и на графических элементах: в частности, в каждом из шрифтов указатели выполнены в виде маникул, а не в виде стрелок.

TT Livret с книжной графикой

Это антиква, совмещающая в себе исторические черты и современные формы. Для того, чтобы ее можно было полноценно использовать в книгах и других периодических изданиях, мы добавили в гарнитуру полный набор графики для оформления книг, в том числе книжные разделители.

Орнаменты в TT Ricordi Marmo

В этой яркой и современной антикве элементы флорентийского гротеска смешались с более традиционными визуальными решениями. В гарнитуру мы добавили сет орнаментов-иконок, которые можно использовать по-разному. Например, заменять ими некоторые буквы, чтобы получилась надпись с яркими графическими элементами. Либо собирать из них бордюры и отбивки или просто использовать их в виде иконок. Все орнаменты адаптированы к буквам в шрифте.

TT Ricordi Allegria

Еще один шрифт из серии TT Ricordi, вдохновением для создания которого стали старинные надписи в базилике Санта-Кроче во Флоренции. В состав этой элегантной гарнитуры вошли несколько аккуратных иконок, которые подойдут для отбивки текста и будут подчеркивать визуальный язык шрифта.

TT Marxiana

TT Marxiana — проект, в рамках которого мы реконструировали дореволюционные шрифты, которые использовались в журнале «Нива» 1887 года. Их внешний вид максимально приближен к первоисточникам, поэтому гарнитуру можно использовать, например, для оформления журнала или книги, стилизованной под 19 век. Среди графических элементов есть около тридцати декоративных заглушек-указателей: стрелки, руки, трефы и так далее. Также есть возможность собрать декоративные рамки.

Заключение

Выходит, что иконки в шрифте — это не только интересное дополнение, которое подчеркивает характер гарнитуры, но и отличный инструмент, расширяющий возможности дизайнера.

В шрифтах заложено очень много интересных возможностей. Однако многие дизайнеры либо вовсе не знают, что эти возможности существуют, либо не понимают, как ими пользоваться. Но на самом деле никто от вас ничего не скрывает: все эти инструменты очень легко найти. Главное — знать, что именно искать. В этой статье мы расскажем, что такое функции OpenType (они же — OpenType фичи)

Что такое функции OpenType

OpenType фичи (OpenType features) — это те самые «скрытые возможности» шрифта, инструменты, которые в него заложены. У них есть несколько задач, которые можно разделить на две группы: технические и художественные.

Технические OpenType свойства направлены на то, чтобы улучшить верстку. Разработчики шрифта чаще всего хотят, чтобы их шрифт хорошо работал и им было удобно пользоваться, поэтому они делают все, чтобы дизайнеры с легкостью могли использовать весь функционал гарнитуры.

Художественные фичи — это стилистические сеты и альтернативы, которые позволяют дизайнеру самостоятельно подстроить внешний вид шрифта под проект, придать ему определенный характер и индивидуальность.

Удобство — отличительное свойство шрифтов, в которых заложены опентайп фичи. Шрифт OpenType по сравнению с форматом TrueType обладает бо́льшими возможностями, о которых мы и расскажем ниже.

Также рекомендуем посмотреть нашу лекцию «Скрытые возможности шрифта».

Для чего используются OpenType фичи и какими они бывают

Давайте разберемся, какие опентайп фичи существуют и как использовать каждую из функций.

Стилистические сеты

Часто в одной гарнитуре заложено несколько форм одних и тех же букв. Например, одночастная и двухчастная «а» — это альтернативные формы одного и того же знака. Их может быть очень много — все ограничивается лишь фантазией шрифтового дизайнера. Многие из этих альтернатив несут чисто графические, художественные функции. Но у некоторых есть и практическое свойство. Например, буква «l» (эль) с хвостиком очень часто необходима при навигационных задачах, чтобы не перепутать ее с прописной буквой «I» (ай), потому что они выглядят похоже.

Часто некоторые альтернативные формы имеют схожие характерные особенности, поэтому их объединяют в группы, которые называются стилистическими сетами. Стилистический сет — это набор знаков с общей альтернативной формой. С помощью стилистических сетов можно менять характер шрифта: например, превратить нейтральный гротеск в мягкий, веселый и даже игривый. И все это — за счет изменения формы некоторых букв. Но речь не только об отдельных буквах: если мы, например, хотим поменять форму точек, у нас будут меняться все знаки, в конструкции которых есть точки — а таких знаков достаточно много.

Все они чаще всего собираются в целый сет, чтобы не пришлось менять каждую букву отдельно, ведь это займет много времени — тем более, если это объемный текстовый документ или книга. Вы можете просто включить этот сет, и все знаки во всем текстовом блоке или документе поменяются. Это очень удобная функция.

Лигатуры

Лигатуры — это знаки, образованные путем соединения нескольких глифов. Лигатуры бывают стандартными и дискреционными. Стандартные лигатуры есть практически в каждом шрифте: например, fi, fl, ff, ffi, ffl, ft. Они несут практические функции.

Дискреционные лигатуры отличаются от стандартных тем, что их назначение скорее декоративное, и это могут быть любые сочетания букв — все зависит от фантазии автора и специфики проекта. Любые знаки, которые дизайнер захотел соединить и увидел в этом практический и эстетический смысл, превращаются в дискреционные лигатуры. Среди них можно найти крайне необычные решения, которые могут очень интересно выглядеть в дизайн-проектах.

Цифры

Специальные знаки, основанные на цифрах, также часто встречаются в шрифтах. Например, во многих шрифтах есть дроби. Существует огромное множество разных сочетаний. Еще есть разные варианты маленьких цифр, таких как надстрочные и подстрочные индексы, а также числители и знаменатели, из которых составляются дроби.

Также во многих шрифтах есть табулярные цифры — это цифры, которые вписываются в одинаковую ширину площадок. Грубо говоря, это «моноширинные цифры». Их очень удобно использовать в случаях, когда важно, чтобы каждая цифра в следующей строке оказывалась ровно под цифрой из строки выше. Например, в таблицах.

Еще одна интересная находка для дизайнеров — цифры в кружочках. Они бывают двух видов: в залитых и пустых кружочках. Обычно такие цифры находятся внутри стилистических сетов. Служат для декоративных целей.

Кроме того, существуют старостильные цифры. Они отличаются по форме от привычных нам современных цифр. Их можно использовать, чтобы придать ощущение историчности вашему проекту. А в паре с ними можно использовать старостильные валюты — еще одну фичу, заложенную во многих шрифтах.

Иконки

Многие знают, что практически во всех шрифтах есть какие-либо базовые иконки или другие необычные символы. Но в последнее время таких «картинок» в шрифтах становится всё больше и больше, они отражают и сильнее раскрывают характер гарнитуры. Это свойство многих современных шрифтов. Кроме того, иконки и символы, добавленные в гарнитуру — это самая подходящая к данному шрифту графика. Главный плюс такого решения в том, что у дизайнера нет необходимости рисовать дополнительные иллюстрации или другую графику, которая будет хорошо сочетаться со шрифтом, для своего проекта.

В спокойных по характеру шрифтах вы, скорее всего, встретите нейтральный и привычный пак иконок, а в акцидентных, вероятно, будут характерные изображения или даже образы, которые ассоциируются у шрифтового дизайнера со конкретным проектом. Соответствие настроению гарнитуры — важное свойство иконок.

Языковые локализации

Работая с другими языками, дизайнеры также не знают обо всех доступных им возможностях. Так, языки обычно переключаются, например, во вкладке Character (Символ) в программах Adobe Indesign и Photoshop.

Однако не во всех программах можно переключать языки таким образом. Для этих случаев существуют специальная функция — сеты локализации. Их можно включить в программе Illustrator через опентайп фичи и в Figma через стилистические сеты. Работает это наподобие замены альтернатив через стилистические сеты, то есть во всем выделенном текстовом блоке стандартные буквы заменяются на буквы, у которых нет Юникода, из включенного языка. Открыв список стилистических сетов в панели OT фич, можно увидеть сеты локализаций (после сетов с альтернативными формами знаков). Они будут подписаны названием языка, на знаки которого будут заменяться стандартные буквы с Юникодом.

Как использовать возможности шрифтов OpenType в различных программах

Теперь разберемся, как включить вышеперечисленные фичи в различных программах.

В программах Adobe

Adobe Illustrator

Чтобы открыть панель OpenType, откройте вкладку «Окно» и выберите «Текст» > OpenType.

Затем в появившемся окошке нажмите на значок в виде трех горизонтальных линий (в правом верхнем углу). В выплывающем меню выберите «Наборы стилей» — так вы увидите список стилистических альтернатив и фич локализации.

Adobe InDesign

Во вкладке «Свойства» выберите кнопку OpenType.

В появившемся окне вы увидите список всех возможных фич.

Выберите пункт «стилистические наборы», чтобы увидеть список всех стилистических альтернатив.

Adobe Photoshop

Выберите «Символ» — OpenType. В появившемся окне вы увидите список всех фич.

В Figma

В Figma стилистические сеты можно включить через панель Text — Type Settings — Details. Многие, увы, не знают, что можно просто перейти в эту вкладку и найти там очень много интересного.

В Word

И даже в программе Word можно, хоть и очень ограниченно, использовать эти возможности. Вам нужно перейти в главную вкладку и выбрать панель «Шрифт». В появившемся окошке выберите вкладку «Дополнительно» — здесь вы увидите стилистические наборы и формы цифр, а в соседней вкладке «Шрифт» можно включить маленькие цифры (подстрочные и надстрочные индексы). Поскольку функционал Word ограничен, так как это не графический редактор и не программа для создания дизайна, здесь сложнее работать с OpenType фичами. Но, тем не менее, даже здесь можно использовать некоторые скрытые возможности шрифта.

Список функций OpenType

Чтобы узнать, какие open type фичи есть в шрифте еще до того, как вы его приобретете, существуют спесимены — их выпускают для многих шрифтов. Обычно они есть на сайте, на котором вы покупаете шрифт. В спесимене описаны все otf и возможности шрифта, показываются шрифты в разных размерах, описываются их начертания, каждая характеристика и функционал.

Кастомизация

Каждый шрифт можно сделать уникальным с помощью кастомизации. В примерах выше вы видели, как несколько стилистических альтернатив кардинально меняют восприятие всего шрифта. Из-за изменения определенных знаков шрифт приобретает неповторимый характер, становится совсем другим.

Например, можно сделать такую кастомизацию, где все базовые глифы, у которых есть альтернативы, будут заменены на свои альтернативные формы, и поэтому характер текстового набора поменяется. Если вам понравился какой-то определенный шрифт, но вы хотите поменять, скажем, одночастную «а» на двухчастную, можно просто заменить глифы, в которых используется базовая (одночастная) «а» на альтернативный сет с двухчастными «а», при этом сохранить целостность во всей дизайн-системе.

Заключение

Как видите, OpenType features значительно расширяют возможности работы с шрифтовой гарнитурой и раскрывают ее потенциал. Надеемся, что эта статья поможет вам по максимуму использовать все скрытые возможности шрифта и сделать ваш дизайн уникальным!

В 2023 году японское маркетинговое агентство SHIFTBRAIN запустило интерактивный сайт, посвящённый двадцатилетию компании. Для этого проекта команда TypeType разработала уникальный вариативный шрифт, способный экстремально растягиваться по горизонтали. За основу мы взяли бестселлер TT Norms® Pro, который уже использовался в качестве корпоративного шрифта компании — вы можете увидеть его на основном сайте SHIFTBRAIN. О том, как проходила работа над этим необычным проектом, рассказываем в статье

Новая задача

Проект получил название SHIFTBRAIN Norms. Перед нами стояла задача разработать шрифт с вариативностью по оси Width на основе TT Norms® Pro Regular, доработать некоторые формы знаков и отрегулировать размер под японский шрифт A1 Gothic Regular. А ещё — внедрить логотип и 30 иконок-портретов сотрудников SHIFTBRAIN, которые они нам предоставили.

В 2022 году, на старте проекта SHIFTBRAIN, наш отдел продаж только формировал процессы взаимодействия с клиентами. Это был один из первых кейсов, где менеджер взял на себя полное сопровождение заказчика — от обсуждения ТЗ до контроля исполнения на производстве. Такой формат работы позволил выявить узкие места в коммуникации: например, задержки согласований или нестыковки в техзаданиях. Благодаря этому опыту мы оптимизировали работу отдела — внедрили чёткие регламенты и сократили сроки проектов для клиентов. 

Студия SHIFTBRAIN искала не просто шрифт, а инструмент для айдентики японского проекта, но столкнулась с проблемами: нужен был гибрид латиницы и японских эстетических элементов — готовых решений не было. Нам необходимо было объединить в один проект латинские и CJK-шрифты (CJK — аббревиатура от Chinese, Japanese, and Korean; то есть шрифты, поддерживающие китайский, японский и корейский языки). Требовалось точное попадание в стиль бренда без бесконечных правок. Важна была слаженная работа на расстоянии.

Конечно, новой для нас стала и экстремальная ширина вариативного шрифта.

«Особенно интересно было сделать что-то экстремальное с TT Norms® Pro, так как сам по себе он довольно нейтральный. Однако с такими широкими знаками довольно непривычно и неудобно работать, так как в экран монитора помещается не строка текста, как обычно, а всего несколько символов. К тому же мы старались сохранить характер TT Norms® Pro даже в супершироком начертании».

Марина Ходак, дизайн-лид TypeType

Как работал отдел продаж и production-менеджмент TypeType

Мы превратили сложный запрос в прозрачный процесс с предсказуемым результатом.

Этап 1. Глубокая аналитика 

Мы провели воркшоп с клиентом и выявили ключевые параметры:

• сочетание жесткой геометрии латиницы с плавными японскими штрихами
• ограниченная ширина символов для вертикальных надписей

Затем подобрали три базовых шрифта для возможной кастомизации из нашей библиотеки, чтобы ускорить старт. 

Этап 2. Детальное ТЗ и планирование 

Создали визуальную карту правок с примерами:

• как трансформировать засечки
• где добавить «японский» акцент

Закрепили контрольные точки — клиент получал скетчи каждые пять дней.

Этап 3. Контроль качества

Наши менеджеры сводили обратную связь от дизайнеров SHIFTBRAIN и производственного отдела TypeType в единый документ, чтобы исключить разночтения. Тестировали шрифт в реальных кейсах (логотип, упаковка) до финальной отрисовки.

Этап 4. Итог + поддержка

В результате мы передали заказчику полный комплект:

• четыре начертания кастомного шрифта
• гайд по использованию (кегли, интерлиньяж для японских носителей)
• SVG-иконки для совмещения с типографикой

Также мы делали бесплатные доработки в течение месяца после сдачи.

Результат для SHIFTBRAIN

• Экономия 30% времени — благодаря чёткому ТЗ и отсутствию «эффекта телефона» между командами
• Шрифт стал частью айдентики — используется в мерче и цифровых продуктах
• Продолжение сотрудничества — локализация шрифта для новых рынков

Почему клиенты выбирают TypeType для кастомизации

• Гибкость: мы работаем с любыми стилями — от гротесков до рукописных шрифтов
• Опыт: 600+ кастомных проектов
• Технологии: собственный FontEditor и инструменты для проверки кернинга

«TypeType не просто рисует буквы — они проектируют коммуникацию», — такой отзыв мы получили от команды SHIFTBRAIN!

Реализация: работа производственного отдела

Вариативный шрифт

Итак, нужно было сделать так, чтобы TT Norms® Pro менялся по горизонтали от начертания Condensed до суперширокого — то есть от 460 pt до 3480 pt. Выходит, что ширина меняется в целых 7,6 раз! В то время как обычно от Condensed до Expanded ширина меняется примерно в 1,5 раза. Таких широких шрифтов мы ещё не делали.

Узкое начертание осталось по ширине таким же, как Condensed, а справа по оси вариативности Width мы добавили ультраширокое начертание. В шрифте предусматривалась только латиница, цифры и стандартные знаки пунктуации. Для оси Width мы изначально взяли стандартные значения: 75-100-125-150. Однако резкое увеличение ширины со 125 до 150 смотрелось плохо. В итоге для Extended мы выбрали значение 200. 

Разрабатывать графику широкого начертания было непросто: буквы растягивались, было невозможно оценить, как они выглядят в наборе, в окне программы Glyphs. Поэтому приходилось после каждого изменения экспортировать файл и анализировать текстовый блок в программе вёрстки. Однако мы справились с этой задачей на отлично, несмотря на трудности!

Техническая работа

Параллельно с работой над графикой мы делали хинтинг шрифта и другие технические доработки. 30 ноября SHIFTBRAIN прислали японский шрифт A1 Gothic StdN Regular, под который нужно было подогнать метрики. Нам нужно было настроить интерлиньяж и базовую линию.

«Дело в том, что шрифты CJK отличаются по метрикам от латинских и кириллических шрифтов. И когда вы используете их рядом, получается очень рыхлая вёрстка. Вы можете представить себе любую упаковку китайского товара: там будут очень красивые иероглифы, а в кириллице или латинице — огромные межбуквенные расстояния и другие нюансы. Для того чтобы всё это гармонично смотрелось, как раз и необходимо подгонять один шрифт под другой».

Марина Ходак, дизайн-лид TypeType

В тот момент для нас это было довольно интересным и перспективным решением. Ведь это, с одной стороны, относительно несложная кастомизация, с другой — она решает очень большие задачи.

«Я отмасштабировал шрифт, увеличив его на 107% от исходного. Размер Em остался 1000 единиц как у референсного A1 Gothic. Из референса мы взяли настройки интерлиньяжа и пересадили параметры, отвечающие за него, в наш шрифт. Также немного сдвинули базовую линию по запросу клиента. Проверку соответствия референсу производили в Adobe Illustrator через Composite Fonts. Изначально клиент предоставил настройки, с которыми они использовали оригинальный шрифт в паре с A1 Gothic. Нашей задачей было сделать так, чтобы картинка не отличалась при использовании кастомного шрифта в паре с A1 Gothic с базовыми настройками Size и Baseline. Это позволяет применять эту пару шрифтов не только в Adobe Illustrator».

Юрий Наконечный, руководитель технического отдела TypeType

Иконки-портреты и логотип

SHIFTBRAIN прислали нам 30 красивых иконок с изображениями всех сотрудников компании. Однако сложность заключалась в том, что контур иллюстрации гораздо сложнее и детальнее контура буквы — там больше точек, они не соответствуют требованиям, и при экспорте из формата svg в glyphs некоторые детали начинают ломаться. Поэтому нельзя просто перенести векторное изображение в Glyphs. После того, как такая иконка подсаживается в шрифт, её нужно тщательно вычистить и поправить.

Мы внедрили в шрифт 30 иконок, тщательно всё проработав, однако уже после этого SHIFTBRAIN решили переделать изначальный рисунок 15-ти из них — изменить пропорции, чтобы привести к более обобщённому виду. Поэтому нам пришлось заново проделывать всю работу с половиной иконок. Но в итоге всё получилось!

Также мы внедрили в шрифт логотип компании и прописали для него фичу — при её включении буква ‘S’ меняется на логотип.

Графические доработки

Также мы внесли небольшие изменения в формы нескольких знаков. В частности, поменяли Q и добавили альтернативную S с горизонтальными срезами терминалов. Такую форму SHIFTBRAIN попросили добавить из-за сходства с логотипом.

Результат

В результате у нас получился экстремально широкий вариативный шрифт с набором встроенных иконок. Посмотрите, как оригинально и эффектно он смотрится на юбилейном сайте SHIFTBRAIN!

Figma давно стала стандартом для дизайнеров по всему миру. Этот инструмент сделал совместную работу над интерфейсами простой и доступной, а для многих команд — буквально незаменимой. Но в последние годы всё чаще звучит вопрос: есть ли достойная альтернатива Figma?

Причин для этого несколько. После громкого IPO в июле 2025 года компания, скорее всего, будет менять стратегию: повышать цены, ограничивать бесплатные тарифы и ориентироваться прежде всего на крупных корпоративных клиентов. Для фрилансеров, стартапов и студий это может стать серьёзным препятствием. Дополнительно накладываются региональные ограничения и сложности с оплатой подписки, из-за которых доступ к сервису уже нельзя считать гарантированным.

В такой ситуации всё больше дизайнеров начинают искать инструменты, которые смогут заменить Figma и при этом сохранить скорость, удобство и привычный рабочий процесс. Одним из главных кандидатов на эту роль становится Pixso — платформа для совместного дизайна, которая активно развивается и в версии Pixso 2.0 предлагает набор функций, способных конкурировать с лидером рынка.

Что такое Pixso и чем он отличается от Figma

Pixso — это универсальная платформа для UI/UX-дизайна, прототипирования и командной работы. Как и Figma, она работает в облаке, поддерживает редактирование в реальном времени и позволяет нескольким пользователям одновременно работать над одним проектом. С точки зрения базового взаимодействия Pixso действительно близка к Figma: дизайнеры открывают файл в браузере, видят изменения коллег сразу и могут работать совместно без потерь времени.

Но при этом Pixso имеет ряд особенностей, которые выгодно выделяют её среди конкурентов. Платформа предлагает бесплатный тариф, что делает её доступной для студентов, фрилансеров и небольших команд. Кроме того, у сервиса есть опция пожизненной лицензии — единоразовой оплаты, которая позволяет больше не зависеть от ежемесячных подписок. Важно и то, что Pixso активно развивает локализацию для разных рынков, включая полностью русскоязычный интерфейс, что делает её особенно удобной для дизайнеров из СНГ.

Pixso перестала ассоциироваться лишь с аналогом Figma. После релиза 2.0 стало ясно, что перед нами самостоятельная платформа, развивающаяся по собственному пути и претендующая на значимое место среди профессиональных инструментов для дизайнеров.

Обновление Pixso 2.0: новые функции и видение будущего

Ускорение и стабильность

Pixso 2.0 заметно быстрее предшествующих версий: файлы открываются почти мгновенно, работа с тяжёлыми макетами не вызывает задержек, а оптимизация памяти повышает стабильность. Это создаёт прочную основу для дальнейших улучшений.

Дизайн-токены

Дизайн-токены в Pixso открывают совершенно новый уровень управления визуальными параметрами проекта. С их помощью вы можете централизованно задавать цвета, размеры, отступы, шрифты и другие свойства интерфейса, которые раньше приходилось редактировать вручную в каждом отдельном элементе. Теперь достаточно один раз изменить значение токена — и это изменение автоматически отразится во всех связанных компонентах и макетах.

Такой подход обеспечивает полное единообразие стиля на всех этапах разработки, устраняет риск случайных расхождений и делает совместную работу дизайнеров и разработчиков более прозрачной и предсказуемой. Кроме того, токены позволяют гибко адаптировать дизайн к разным платформам, режимам отображения и сценариям использования, будь то светлая или тёмная тема, мобильная или десктопная версия продукта. В результате команда тратит меньше времени на рутинные правки и получает больше возможностей сосредоточиться на креативе и качестве пользовательского опыта.

Двунаправленный текст

Pixso поддерживает работу с двунаправленным текстом, что позволяет дизайнерам без ограничений создавать макеты для глобальных языков. Инструмент корректно отображает текст как с направлением слева направо (LTR), так и справа налево (RTL), полностью сохраняя структуру и визуальную логику интерфейса. Это особенно важно при работе с арабским, персидским или ивритом, где направление письма отличается от латиницы и кириллицы.

Благодаря встроенной функции смены направления текста, Pixso гарантирует точное воспроизведение международных проектов без искажений. Дизайнеры могут быть уверены, что их макеты будут одинаково удобны для пользователей по всему миру — от западных рынков до Ближнего Востока.

Текст по контуру

Функция «Текст по контуру» в Pixso позволяет легко задавать направление текста вдоль окружностей, дуг или произвольных кривых. Такой инструмент открывает новые возможности для создания креативных макетов, где надписи становятся частью визуальной композиции. Он идеально подходит для брендинга, афиш, рекламных материалов и декоративной графики.

Pixso точно передаёт все настройки текста — от шрифта и межбуквенного интервала до прозрачности и насыщенности. Дизайнер получает полный контроль над формой и стилем, что делает проекты выразительными, современными и визуально запоминающимися.

Совместимость и гибкость

Pixso гарантирует глубокую совместимость со Sketch и максимально точное воспроизведение всех визуальных эффектов. Поддерживаются все 17 режимов наложения Sketch, что обеспечивает 100% соответствие исходным макетам: фоновые размытия, параметры насыщенности, прозрачности и другие визуальные настройки корректно переносятся без искажений.

Кроме того, Pixso полностью охватывает вычислительную логику Sketch: сложные операции с фигурами, объединение и вычитание форм, исключение перекрытий и другие варианты булевых вычислений работают так же, как в оригинале. Это позволяет дизайнерам свободно переносить проекты и быть уверенными в том, что каждый элемент будет отображён с абсолютной точностью.

Сейчас Pixso уже поддерживает импорт Sketch-файлов. При этом ещё ранее платформа поддерживала импорт из Figma, Sketch, Axure и XD, что позволяло дизайнерам без труда переносить проекты из разных инструментов.

Режим разработчика и работа с кодом

В режиме разработчика Pixso появилась расширенная поддержка работы с кодом и дизайном в обоих направлениях. Теперь вы можете не только генерировать чистый и структурированный код из макета всего в один клик, но и выполнять обратное преобразование — визуализировать существующий код в виде аккуратных и точных дизайн-макетов. Такой двусторонний процесс позволяет дизайнерам и разработчикам работать в единой среде, быстро проверять гипотезы, минимизировать ошибки на этапе передачи материалов и добиваться максимально точного соответствия между макетом и итоговым продуктом. Благодаря этому заметно сокращается разрыв между креативом и реализацией, а совместная работа команды становится проще и эффективнее.

Pixso AI

Отдельного внимания заслуживает модуль Pixso AI. Он умеет превращать текстовый запрос в готовый дизайн-макет. Достаточно ввести prompt — например: «Создай современный минималистичный веб-дизайн главной страницы для IT-компании» — и система автоматически сгенерирует интерфейс с блоками, текстами и иллюстрациями.

Главное преимущество в том, что после генерации дизайнер может не только просмотреть макет, но и сразу увидеть сгенерированный код. Это значительно ускоряет процесс: идея быстро превращается в прототип, а разработчики получают основу для реализации без лишних итераций.

Таким образом, Pixso AI объединяет этапы дизайна и разработки, позволяя командам работать быстрее, исследовать больше вариантов и сосредоточиться на ключевых решениях, а не на рутинной подготовке файлов.

Эти обновления — не просто новый набор функций. Они отражают долгосрочное видение Pixso: сделать дизайн быстрее, умнее и доступнее для команд любого размера. Pixso 2.0 ясно демонстрирует, что это уже не копия Figma, а платформа, которая идёт своим путём и готова к следующему этапу развития.

Почему стоит рассмотреть Pixso как замену Figma

После IPO у Figma появились новые приоритеты: рост доходов, работа на интересы акционеров и ориентация на крупных корпоративных клиентов. Для многих это означает вероятное повышение цен и сокращение бесплатных возможностей. В такой ситуации дизайнеры начинают искать более гибкие решения.

Pixso предлагает именно такую альтернативу: платформа остаётся доступной, поддерживает бесплатный тариф и гибкие варианты лицензирования, полностью локализована на русский язык и ориентирована на потребности регионального сообщества. Версия 2.0 показала, что инструмент активно развивается и получает функции, которые важны для практической работы. Поэтому Pixso сегодня становится удобным выбором для фрилансеров, студий и продуктовых команд, которым нужен современный инструмент без лишних ограничений.

Заключение

Pixso 2.0 показывает, что платформа перестала быть просто похожим на Figma решением. Это уже самостоятельный инструмент, который сочетает в себе скорость работы, поддержку переменных, удобную совместную работу и гибкую ценовую модель. Для дизайнеров, которые ищут надёжную альтернативу Figma, Pixso становится реальным выбором.

Попробуйте Pixso 2.0 бесплатно и убедитесь сами, насколько этот инструмент способен упростить ваши рабочие процессы и дать больше свободы для креатива.

Реклама. Shenzhen Bosiyunchuang Technology Co., Ltd. ERID 2SDnjcvrAgN