Шрифт Бюросайн

Арт‑директор просит сделать навигационный шрифт. Шрифтов для навигации с кириллицей до сих пор немного, но нам хочется иметь свой фирменный.

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

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

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

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

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

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

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

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

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

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

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

Немецкий шрифтовик Ральф Херманн пишет о том, как он создавал свой навигационный шрифт Вэйфайндинг Про, в первую очередь уделяя внимание тестам на различимость. Руководствуясь своими задачами, он создал простую программу‑тестер, которая имитирует расстояние прочтения.

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

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

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

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

Например, буква l (эль латинская строчная) должна отличаться от I (Ай латинская прописная), буква б должна отличаться от 6, З — от 3, и так далее. Характерные штрихи в буквах должны быть хорошо различимы — например, шапка у буквы f, живот и хвостик у буквы а, окончания у букв у и t.

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

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

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

Рядом с эскизами более жёстких форм сразу рисуем иконки. Подход к иконкам должен быть такой же, как и к формам букв.

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

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

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

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

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

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

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

Параллельно разбираемся со стрелкой. Арт‑директора не устраивает излишняя мягкость той стрелки, которая есть сейчас.

Дорисовываем алфавиты.

Основная проблема сейчас в пропорциях. Исправляем все буквы.

Чистим, проверяем на жирность, доделываем остальные знаки, керним.

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

Не все иконки вырисовываются сразу и легко.

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

Сразу видно, что наше светлое в сравнении с обычным темнит. Делаем светлое ещё светлее.

Дорисовываем остальные знаки.

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

Дорисовываем остальные знаки базового набора.

Тестируем, понимаем, что нужно увеличить апроши.

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

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

Тестируем шрифт не только в домашних условиях, но и на сотрудниках бюро.

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

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

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

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

Сначала определяемся с тем, насколько узкие начертания мы хотим. Первым заходом пробуем попасть в начертание Compressed — самое сжатое и узкое.

Арт‑директор не хочет настолько узкие формы, просит сделать пошире, что‑то ближе к начертанию Condensed.

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

Доделываем оставшиеся начертания, которые будут нашими мастерами.

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

Соединяем все начертания, создаём так называемое «поле дизайна». Из этого поля мы можем вытащить сколько угодно инстанций.

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

Чтобы не запутаться в названиях начертаний, прибавляем цифровое обозначение. В нашем поле по оси насыщенности самое светлое начертание — это 0, а самое жирное — 1000. По оси пропорций узкое — 0, а обычное — 1000. Так, если начертание ближе к светлому по насыщенности, но немного темнее, оно будет называться Light 200. Начертание чуть светлее жирного и шире узкого будет Condensed 200 Bold 900.