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

Системный шрифт и Extra Large Title

В visionPro есть системный шрифт SF Pro, который отличается исключительной удобочитаемостью в различных операционных системах Apple. Цвет текста по умолчанию — белый, что обеспечивает высокую контрастность на более тёмном фоне для оптимальной читаемости.

Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS
Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS

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

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

Также в visionOS представлено два новых стиля шрифта: Extra Large Title 1 и Extra Large Title 2. Они идеально подходят для крупных, привлекающих внимание заголовков в широкоформатных макетах.

Пример стиля Extra Large Title в интерфейсе приложения для visionOS
Пример стиля Extra Large Title в интерфейсе приложения для visionOS

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

Контраст, цвета и яркость

Глубина — основной принцип проектирования интерфейсов в visionOS, но и тут нужно быть внимательным. К примеру, 3D-текст визуально может визуально отвлекать и очень тяжело читается. Кроме того, под некоторыми углами он может выглядеть деформированным. Поэтому отдавайте предпочтение привычному двумерному тексту.

Сравнение трёхмерного и обычного текста в visionOS
Сравнение трёхмерного и обычного текста в visionOS

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

Пример правильного использования цвета на материале с эффектом стекла
Пример правильного использования цвета на материале с эффектом стекла

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

  • .primary — для обычного текста;

  • .secondary — для описаний, сносок или субтитров;

  • .tertiary — для неактивных элементов.

Пример использования эффекта vibrancy для работы с иерархией текста
Пример использования эффекта vibrancy для работы с иерархией текста

Комментарии (1)


  1. l_Tungus_l
    01.06.2024 09:23

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

    Возможно ли его использование в своих сайтах/веб-приложениях? Скажем так, какой у него "ранг" среди всех шрифтов по удобочитаемости, лёгкости в настройке, применению и т.п.?

    Делаю просто свой пет-проект, но смотря на шрифты по типу Montserrat, Inter и др., чувствует глаз что что-то здесь... не так :D