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

Перевод материала из блога Aetherpoint.

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

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

После этого инструктор дал немного рисовой бумаги. Мы уже готовы рисовать, опускаем кисть, и вдруг происходит неожиданное: выходит нечто не совсем похожее на птицу.

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

Но это относится и к инструментам и коду, которые мы используем.

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

В своей статье “What Is Code” писатель и программист Пол Форд написал:

В дополненной реальности все устройства ввода — это компьютерная периферия. Они часть среды.

Было много экспериментов, больше, чем у меня есть время вам представить, но из последних могу отметить 3D-тип шрифта от Вишну Ганти, вариативный шрифт Jabin от Фриды Медрано, эксперименты Энди Клаймера с сенсорами для Arduino, отзывчивый леттеринг Эрика Вана Блоклэнда и работы студентов вроде Юна Ю Ноха.

3D в режиме реального времени — это ещё одна среда, которая влияет на нашу типографику и дизайн. Как это отражается на типографике? Придётся ли нам проектировать по-другому?

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

Несколько лет назад я написал статью о вариативных шрифтах.

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

Работая с Эриком Ваном Блоклендом, я понял, что в AR мы легко можем понять, где относительно текста находится тот, кто его читает. Вначале мне пришла мысль, что мы можем манипулировать 3D-точками, как в стандартных шрифтах.

Но в 3D всё сложнее. При 3D-рендеринге в режиме реального времени сетки в определённый момент должны превратиться в треугольники.

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

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

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

Это привело к тому, что мы решили объединить усилия с Си Джеем Данном и сделать образец типа шрифта для его неизданной гарнитуры Louvette в AR .

Мы хотели продемонстрировать оптическую ось Louvette (её засечек), основываясь на расстоянии от наблюдателя до неё.

В Unity мы пробовали как стандартные текстовые компоненты, так и signed distance fields.

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

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

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

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

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

Размещение букв и цифр в трёхмерном пространстве не является чем-то новым. В инсталляции «Лес чисел» Эммануэля Моро использовались случайно расположенные слои чисел, которые отражали 2017 год.

Я начал сотрудничать с Дэвидом Джонатаном Россом и экспериментировать с идеями, навеянными «Лесом чисел».

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

Метод проб и ошибок привёл нас к упрощению вещей.

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

Оказалось, довольно эффектный каскадный эффект. Но главное здесь то, что сам контент может меняться в зависимости от близости человека к объекту, а не только от своего стиля.

В 2011 Итан Маркотт написал книгу «Отзывчивый веб-дизайн». В ней изложены способы адаптации наших средств к различным условиям.

В одной из глав Итан упоминает отзывчивую архитектуру. Её можно разделить на две категории.

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

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

Это вызвало довольно интересный волновой эффект.

Это означает, что мы можем толкать и вытягивать типографику по оси Z, поэтому текст способен быть объёмным.

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

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

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

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

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

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

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

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

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

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

Есть много подобных примеров в искусстве и дизайне.

Рисунки мелом Трейси Ли Стум используют перспективу, чтобы создать иллюзию глубины.

Анаморфная типографика, проект Джозефа Игана и Хантера Томсона, читается только под определённым углом.

Fit Nation («стройная нация») от Pentagram умело побуждает вас двигаться по пространству, поддерживая концепцию фитнеса.

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

Было несколько разных подходов.

Я попробовал разные подходы в Unity (и благодаря Бьянке Бернинг смог использовать вариативный шрифт Venn, который имеет самую большую ось ширины).

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

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

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

Для вертикальных знаков диапазон движения может выглядеть примерно так.

Я также хотел попробовать поработать с плоскими предметами, лежащими на поверхности.

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

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

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

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

Благодаря экспериментам я понял, что люди никогда не будут смотреть на что-то под углом 90 градусов. Установка максимального угла около 60 градусов показалась мне хорошим балансом.

Фактическая площадь поверхности текста меняется. Это интересный ход, который можно использовать.

Оптическая типографика в AR может занимать разное количество места в зависимости от вашего угла обзора.

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

С древних времён, от подвижного шрифта.

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

К среде веб-пространства. Это блоковая модель в CSS.

Мы знаем её настолько хорошо, что постоянно шутим о том, как бы её «сломать».

Мы делаем гибкие контейнеры и сетки.

Делаем их содержимое адаптивным.

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

Такое исполнение поможет придать гибкости нашему дизайну и макетам.

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

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

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

Отличный пример: в этой инструкции по сборке Lego нижняя панель адаптируется к оптическим потребностям типографики, а не к чему-то ещё.

Так как же выглядит наша среда?

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

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

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

Пространство, в котором существует типографика, тоже должно адаптироваться.

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