Шрифт Яндекса — Yandex Sans

image

23 квітня 2016 Я. Суботнику для дизайнерів ми анонсували наш власний шрифт Yandex Sans. Ми працювали над ним два з половиною року і дуже щасливі нарешті поділитися результатом. У цьому пості я розповім про те, навіщо ми все це задумали, як відбувалася робота, що вийшло в результаті і що буде далі. Пост написаний за мотивами нашої розповіді на Суботнику.

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

Шрифт — це один з базових «голосів» графічного дизайну нарівні з кольором, формою і т. д. Шрифт впливає на те, як сприймається інформація, їм набрана. У Джона Маэды в його лекції на TED я підглянув дуже наочний спосіб це продемонструвати. Це історія про форму та зміст. Давайте візьмемо деякий зміст і спробуємо, зафіксувавши його, змінювати форму. Нехай нашим змістом буде добре відомий девіз Яндекса — «знайдеться все».

Ось як він виглядає, набраний Букварной гарнітурою — шрифтом, який ми використовуємо для комунікацій:
image
Так зазвичай і каже Яндекс. Це наше повідомлення, послане нашим же голосом.

* * *

А що, якби ми використали для цього ж змісту ось такий шрифт?
image
Погодьтеся, виглядає непереконливо. Ледве читається. Занадто по-дизайнерськи. Знайдуться дизайнери, хіпстери і смузі. Але зовсім не всі.

* * *

image
Ось це вже серйозна заява. Таке могло б підійти для розпродажі в «Ашані» або «З рук в руки». Налітай, купуй!

* * *

А якщо так?
image
Це вже якийсь луркоморье, а може навіть і зовсім днище інтернету. Знайдуться всі приколи, безкоштовно, без смс.

* * *

image
Цей варіант більше схожий на весільне запрошення. А може бути, на меню в дорогому ресторані. Знайдуться всі устриці, трюфелі і шампанське.

* * *

А адже можна і ось так:
image
Мені здається, це щось на зразок автозаправки з магазином. Знайдеться все: омывайка, ключі з домкратами, так і перекусити можна недорого.

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

А що зараз говорить Яндекс?
Тарас Куль, керівник групи прототипування нових продуктів і один з авторів програми нашій Школи дизайну, протягом місяця записував фрази, які чимось чіпляли його в наших продуктах і комунікаціях. Вийшла дуже наочна добірка саме нашої мови, нашого стилю і нашого голосу. Ось, наприклад, типові представники наших інтерфейсних фраз, набрані Ариалом:

image

до Речі, Влад Головач розповів, що, на його думку, по-російськи правильно називати цей шрифт Аріель, так як спочатку він був названий співзвучно з персонажем «Бурі» Шекспіра. Але поки я, з вашого дозволу, продовжу писати «Аріал».

Взагалі, Аріал повинен бути добре знайомий читачеві. І так, саме цей шрифт ми використовуємо в наших веб-інтерфейси сьогодні:

image

Чому саме Аріал? Дизайнерам повинна бути добре відома його історія. Аріал базується на пропорціях і малюнку букв Гельветики, одного з найбільш знаменитих і навіть культових шрифтів XX століття. Гельветика з'явилася в 1957 році під ім'ям Neue Haas Grotesk. Якщо з якоїсь причини ви пропустили фільм Helvetica, обов'язково подивіться хоча б цей трейлер (а краще фільм цілком, звичайно):



Це гарнітура, яку можна побачити майже в будь-який момент майже в будь-якій точці світу. На ній заснований візуальний мову незліченної кількості брендів. Одним словом, жива класика.

Коли Microsoft в 80-х вибирали шрифт для своєї операційної системи Windows, вони з якоїсь причини вирішили не платити за ліцензію на Гельветику, а замість цього попросили компанію Monotype зробити для них власну версію цієї гарнітури. Так з'явився Аріал — «гельветика для бідних» за влучним висловом когось з наших шрифтових дизайнерів. Не буду тут вдаватися до порівняння Ариала і Гельветики. Будь-хто без праці переконатися, що вони дійсно дуже близькі:

image
Слайд Крістіана Шварца показує накладення Ариала і Гельветики

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

  • Пропорції і малюнок літер місцями викликають питання — особливо в кирилиці, багато літери якої виглядають відверто дивно.
  • Немає варіацій насиченості (тобто, товщина ліній букв). Тільки звичайний і жирний (окремо існує ще Arial Black). Для сучасних інтерфейсів цього вже не вистачає, потрібні різні ступені насиченості, легкі тонкі накреслення, напівжирні і т. д.
  • Погана читаність у дрібних кеглях. Через закритого малюнка букв в розмірах нижче 12px символи починають «злипатися» і читаність страждає. У веб-інтерфейси Яндекса самі дрібні написи ми набираємо відкритої Верданой, позбавленої цього недоліку.


Крім веб-інтерфейсів є інтерфейси мобільні. Додатки Яндекса працюють на різних платформах, а значить в частині шрифту ми успадковуємо візуальний мову платформи:

image

На Андроїді нашим «голосом» виявляється досить холодно-технологічно-інженерний шрифт Roboto, в iOS — максимально нейтральний San Francisco, у Windows — характерний Segoe, до кирилиці якого є багато питань.

* * *

А як звучать рекламні комунікації Яндекса? Підбірка Тараса знову показує характерне:

image

Це Textbook New, він же гарнітура Букварная, вперше розроблена в СРСР в 1958 році Оленою Царегородцевой в НВО «Поліграфмаш» для набору — дійсно — букварів і шкільних підручників. Добрий шрифт, знайомий кожному, чиє дитинство проходило на радянському (і трошки пострадянському просторі. Свій, рідний. Але дещо дивний для сучасної високотехнологічної компанії в ХХІ столітті.

З цим набором шрифтів ми жили до поточного моменту, однак давно відчували його обмеження. Ми відчували, що:
  • недостатньо виразних і технічних можливостей Ариала і Текстбука;
  • хочеться мати свій голос у світі чужих платформ.


Все це призвело до роздумів про те, яким має бути шрифт Яндекса.

Яким повинен бути шрифт Яндекса
Ми сформулювали вимоги до нашого шрифту:

1. Шрифт повинен мати своє обличчя, відрізнятися від конкурентів
Конкуренти — це, в першу чергу, Roboto, San Francisco, Segoe — шрифти інтерфейсів Google, Apple і Microsoft відповідно.

image

2. І в той же час бути спокійним, нейтральним, не надто характерним
Розповім про нейтральність трохи докладніше. Крім згадуваних вище інтерфейсних і комунікаційних текстів, основне застосування шрифту в продуктах Яндекса — передавати інформацію, новини, дані. Ось яскраві приклади текстів з цієї категорії:

image

Однією з найважливіших наших цінностей завжди була відсутність редакційної політики. Новини відбираються алгоритмами, без участі людини. Ми — дзеркало інтернету, ми відображаємо те, що відбувається, без додавання власної оцінки, позиції і якого б то не було спотворення. З цієї точки зору дуже важливо, щоб шрифт теж не додавав ніяких додаткових смислів, був гранично нейтральним.

Цікаво, що ця вимога в деякому сенсі суперечить попередньому. Нам треба було знайти баланс між максимальною виразністю і максимальної нейтральністю.

3. Виражає наші цінності
Нейтральність нейтральністю, але якесь обличчя у шрифту все-таки має бути. Якщо спробувати описати, які емоції можуть бути закладені в шрифті, ми зазвичай формулюємо приблизно такий список:
  • відкритий,
  • сучасний,
  • розумний,
  • нейтральний,
  • локальний,
  • технологічний, але з людським обличчям.
Мені особливо близький останній пункт. Хоча ми — сучасна високотехнологічна компанія, нашим продуктам завжди була властива теплота і людяність. Ми точно не бездушний робот-андроїд.

4. Зробленим в першу чергу для кириличного набору
Як відомо, більшість шрифтів спочатку створюються для латиниці, і лише пізніше їм домальовують кириличну версію. Іноді це виходить зробити більш вдало, іноді — менше. Для нас було дуже важливо, щоб Яндекс говорив по-російськи без акценту. Стосовно до шрифту це означає, що кирилиця повинна створюватися одночасно з латиницею або навіть раніше.
Ну і звичайно шрифт повинен мати всі необхідні нам символи і букви, що використовуються в країнах, де ми працюємо: Росії, Україні, Білорусі, Казахстані, Туреччині та ін., знак рубля і т. д.

5. Дуже добре читаним, розбірливим і застосовним у всіх сучасних середовищах
Інтерфейси і комунікації Яндекса зустрічаються в самих різних середовищах. Ось, наприклад, деякі середовища, в яких типографіка зустрічається у Яндекс.Таксі (це далеко не повна добірка):

image

6. Збігається з основних метрик і пропорціям з Ариалом
Це технічна вимога, важливе для веб-інтерфейсів. При заміні шрифту з Ариала на наш, верстка сторінки не повинна роз'їжджатися. Важливо також, щоб шрифт не програвав Ариалу по ємності (тобто кількості символів в рядку середньої ширини), щоб інформації в блоці тексту заданого розміру (наприклад, в результатах пошуку) містилося не менше.

7. Мають кілька ступенів насиченості
Тобто товщини ліній:

image

Зараз навіть для веб-інтерфейсів вже не вистачає просто «жирного» і «нежирного», потрібні градації.

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

Команда
Нам був потрібен шрифтовий дизайнер з досвідом роботи над великими системами накреслень. Він повинен був бути російськомовним або щільно співпрацювати з російськомовним дизайнером.

Іра Волошина, яка починала проект в Яндексі, звернулася до Іллі Рудерману, який, у свою чергу, порекомендував підключити Крістіана Шварца.

У підсумку нам дуже пощастило працювати над шрифтом з Іллею і Крістіаном з його студією Commercial Type.

* * *

image
Крістіан Шварц у світі шрифтового дизайну — справжня суперзірка світового рівня. Він співпрацював з Font Bureau (у них взагалі зірковий склад, включаючи, наприклад, Метью Картера, автора шрифтів Verdana і Georgia), працював з Еріком Шпикерманном. Серед його робіт — шрифти для американського Esquire, Deutsche Bahn і величезна система накреслень для британської газети The Guardian, яка отримала міжнародні нагороди. Крістіан удостоєний премії лондонського Design Museum і був включений журналом Wallpaper у список 40 найбільш впливових дизайнерів до 40 років».

* * *

image
Ілля Рудерман — один з найвідоміших російських дизайнерів шрифтів, викладач Британської вищої школи дизайну. Ілля навчався дизайну шрифтів в Королівській Академії Мистецтв в Гаазі, а пізніше у нього самого вчилися багато російські шрифтові дизайнери. Працював над системами накреслень для Афіші та багатьох інших замовників. Що дуже важливо, Ілля давно співпрацює зі Шварцем, разом вони зробили вже не один шрифт.

* * *

В команді з Крістіаном та Іллею в ролі провідного дизайнера працював Мігель Рейес, дизайнер нью-йоркського офісу Commercial Type, який як і Ілля навчався дизайну шрифтів в Голландії.

Хинтингом і складанням шрифтів займався Марк Рекорд.

Нам дуже пощастило, що вдалося зібрати для проекту таку зіркову команду.

З боку Яндекса над шрифтом працювало на різних етапах багато чудових людей. Проект починала Ірина Волошина. Більш ніж активно брали участь Тарас Куль, якого я вже згадував в цьому пості, Данило kovchiy Ковчий і Сергій Федоров, Стас plkv Поляків, Іван Semus Семенов, Андрій karmatsky Кармацкий, Міша Мильников, Рома Іскандаров, Андрій Лось, Настя Ларкіна, Сергійко 3apa3a Томілов, Микита Бровиков, Діма Середа, Саша Володін і дуже-дуже багато інших. Нескінченну кількість разів нескінченну кількість дизайнерів надсилали правки, зауваження і побажання. Мені б дуже хотілося подякувати всіх, і я дуже боюся когось забути, тому не буду перераховувати кожного.

Як працювали над шрифтом
Розповім тут дуже-дуже коротко і тільки про основні віхи роботи. За два з половиною роки було багато всякого, а пост, здається, і так вже виходить надто довгим. Ілля і Крістіан найближчим часом збираються написати свої пости, в яких, напевно, буде більше деталей про процес.

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

Flat — більш контрастний і більш гострий, характерний:

image

Round — більш доброзичливий і м'який:

image

Після примірки в макети інтерфейсів і комунікацій, а також після порівняльних тестів беззаперечним переможцем виявився Round.

Шрифт, правда, все одно виглядав досить «колючим», тому в наступних версіях закінчення штрихів пом'якшили:

image
<img src=«cdn-images-1.medium.com/maximage/800/1* XWqkkUy888GRSMI2NsgD_Q.png» alt=«image»/>

З самого початку у нас було в роботі дві версії шрифту: Text і Display:

image

Побачивши слово Display, можна подумати, що ця версія призначена для екранів, але це не так. В типографіці Text використовується для основного набору, дрібних кеглів, а Display — для великого, наприклад, для заголовків. Можна побачити, що літери Display більш характерні, химерні.

У курсиве ми перебрали велику кількість варіацій окремих знаків. Довго не могли вибрати форму літер г, д, е, і, ї, т, ц, ч, ш, щ, f. Зрештою, після незліченних проб зупинилися на такому варіанті:

image

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

image

Паралельно весь час відбувалося нескінченну кількість технічної роботи, підбору кернинговых пар, хінтінгу, роботи над декількома накресленнями:

image

Що вийшло в результаті
Фінальна (на сьогоднішній день) версія шрифту Yandex Sans виглядає так:
image
image
Мені здається, нам вдалося вирішити головне завдання — зробити сучасний нейтральний шрифт, який відрізняється від основних конкурентів і досить точно передає образ Яндекса і «голос» нашого бренду.

А ось як виглядає примірка шрифту в природному середовищі:

image
Yandex Sans в макеті результатів пошуку. Автор — Даня Ковчий

image
Концепт інтерфейсу Яндекс.Музики з новим шрифтом. Автор — Даня Ковчий

image
Концепт головної сторінки Яндекса з новим шрифтом. Автор — Даня Ковчий

image

image

image

image

Прямо зараз ми вже використовуємо новий шрифт в інтерфейсі нашого Лончера на Андроїд і на сторінці Про компанії:

image

Тепер місію Яндекса і історію компанії можна прочитати нашим «голосом» — нашим новим шрифтом.

А ось як виглядають приклади фраз з початку посту, набрані Yandex Sans:

image

image

image

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

далі
Багато запитують, чи плануємо ми викласти новий шрифт у відкритий доступ. Зараз ми цього не плануємо. Yandex Sans — голос нашого бренду, такий же як логотип Яндекса. Тому і використовуватися він буде тільки в наших продуктах і комунікаціях. Apple і Google роздають свої шрифти відкрито для того, щоб розробники додатків під iOS і Android могли ними скористатися. У нас такого завдання прямо зараз немає, тому і віддавати назовні шрифт не планується.

Попереду у нас найцікавіше. Як відомо, із запуском продукту робота над ним тільки починається. Нам ще тільки належить по-справжньому тестувати Yandex Sans в продуктах. І якщо в комунікаціях він зовсім скоро почне з'являтися, то на головній сторінці Яндекса або в результатах пошуку Yandex Sans точно не варто чекати найближчим часом. Втім, початок покладено, і це, як мені здається, найголовніше.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.