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

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

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

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

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

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

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

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

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

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

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

Эволюция носителей, начиная с ксилографии (гравирование по дереву), используемой с 200 года нашей эры, до цифровой печати, появившейся в 1991 году
Эволюция носителей, начиная с ксилографии (гравирование по дереву), используемой с 200 года нашей эры, до цифровой печати, появившейся в 1991 году

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

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

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

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

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

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

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

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

Скриншоты статьи
Скриншоты статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Отзывчивый веб-дизайн» Итан Макотт
«Отзывчивый веб-дизайн» Итан Макотт

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

  1. Способность здания удовлетворять изменяющиеся потребности его жителей.
  2. Способность здания адаптироваться к внешним климатическим условиям.

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

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

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

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

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

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

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

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

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

Интерфейс Magic Leap
Интерфейс Magic Leap

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

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

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

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

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

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

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

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

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

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

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

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

3D-рисунок мелом Трейси Ли Стум
3D-рисунок мелом Трейси Ли Стум

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

Анаморфная типографика Джозеф Иган и Хантер Томсон, 2011 год
Анаморфная типографика Джозеф Иган и Хантер Томсон, 2011 год

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

«Будь стройной». FitNation. Pentagram
«Будь стройной». FitNation. Pentagram
FitNation. Pentagram
FitNation. Pentagram

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

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

Типографика в дополненной реальности: сделать шрифт более читаемым под разным углом обзора
  1. Ничего не делать.
  2. Трекинг букв в 3D.
  3. Интерполировать ширину шрифта.
  4. Сделать шрифт «биллбордовым».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Китайская печать с помощью подвижного шрифта Изобретён Би Шэном (990–1051 годы)
Китайская печать с помощью подвижного шрифта Изобретён Би Шэном (990–1051 годы)

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

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

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

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

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

«CSS классный»
«CSS классный»

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

Изучение гибкости: Die Neue Typographie. Автор Джен Симмонс

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

Pia Flower. Автор Юн Ю Нох

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

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

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

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

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

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

1. Визуальная иерархия. 2. Оптические настройки. 3. Контент. 4. Глубина. 5. Свет. 6. Визуальное пространство
1. Визуальная иерархия. 2. Оптические настройки. 3. Контент. 4. Глубина. 5. Свет. 6. Визуальное пространство

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

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

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

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

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

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

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

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

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

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

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

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

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

4242
2 комментария

Блин, понимаю, что статья важная, но к сожалению времени столько нет. Остается только проскроллить...

1
Ответить

А на чем писали?

Ответить