visionOS вывел типографику на новый уровень, где решающую роль играет пространственное мышление. В отличие от традиционных дисплеев, текст должен быть разборчивым на разном расстоянии и под разными углами. При этом размер и насыщенность шрифта остаются основными факторами в создании чёткой типографической иерархии.
![](https://habrastorage.org/getpro/habr/upload_files/68d/16a/86f/68d16a86f99771b967c2c758e312b416.jpg)
Системный шрифт и Extra Large Title
В visionPro есть системный шрифт SF Pro, который отличается исключительной удобочитаемостью в различных операционных системах Apple. Цвет текста по умолчанию — белый, что обеспечивает высокую контрастность на более тёмном фоне для оптимальной читаемости.
![Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS Иерархия стилей типографики, размеров и насыщенности шрифта в visionOS](https://habrastorage.org/getpro/habr/upload_files/64a/94e/55f/64a94e55f2569562fbe9301fdcd8f24c.jpg)
При этом оживлённые сцены в visionOS иногда бросают вызов проработанному шрифту в вопросе читаемости и ясности. Для этого разработчики тонко скорректировали насыщенность шрифта, чтобы улучшить его контрастность.
К примеру, основной текст в iOS использует стандартную насыщенность, но для visionOS её надо повышать до средней для лучшей видимости. Аналогичным образом в заголовках используется полужирный шрифт и увеличивается расстояние между буквами.
![](https://habrastorage.org/getpro/habr/upload_files/4d5/6d9/4d9/4d56d94d9a5dfdae6a4caba7b5c30b13.jpg)
Также в visionOS представлено два новых стиля шрифта: Extra Large Title 1 и Extra Large Title 2. Они идеально подходят для крупных, привлекающих внимание заголовков в широкоформатных макетах.
![Пример стиля Extra Large Title в интерфейсе приложения для visionOS Пример стиля Extra Large Title в интерфейсе приложения для visionOS](https://habrastorage.org/getpro/habr/upload_files/07c/0e9/230/07c0e92304e4e74786bfa1b6dcfff3a5.jpg)
Окна в visionOS могут масштабироваться до невероятных размеров, поэтому у некоторых пользовательских шрифтов могут быть проблемы с читаемостью. Чтобы избежать этого, увеличьте насыщенность шрифта или просто используйте системные стили, которые изначально адаптированы под visionOS.
Контраст, цвета и яркость
Глубина — основной принцип проектирования интерфейсов в visionOS, но и тут нужно быть внимательным. К примеру, 3D-текст визуально может визуально отвлекать и очень тяжело читается. Кроме того, под некоторыми углами он может выглядеть деформированным. Поэтому отдавайте предпочтение привычному двумерному тексту.
![Сравнение трёхмерного и обычного текста в visionOS Сравнение трёхмерного и обычного текста в visionOS](https://habrastorage.org/getpro/habr/upload_files/354/b40/1d7/354b401d7459588ea0bc2361b962230a.jpg)
Решающее значение имеет контраст, благодаря которому текст выделяется. По умолчанию visionOS использует белый текст со стандартным тёмным фоном. В таком случае сохраняется читаемость. Если вы выбираете другой цвет текста, то убедитесь, что он не сливает с различными фонами и протестируйте различные сценарии. Помните, что системные цвета эффективны для фона и кнопок, но не используйте их для самого текста. Это может поставить под угрозу читаемость.
![Пример правильного использования цвета на материале с эффектом стекла Пример правильного использования цвета на материале с эффектом стекла](https://habrastorage.org/getpro/habr/upload_files/51a/796/22d/51a79622d4d2466dcee170fbf9c6ab63.jpg)
Эффект vibrancy
в visionOS предлагает дополнительный слой, повышающий контрастность и удобочитаемость. У эффекта есть три уровня для разных типов текста:
.primary
— для обычного текста;.secondary
— для описаний, сносок или субтитров;.tertiary
— для неактивных элементов.
![Пример использования эффекта vibrancy для работы с иерархией текста Пример использования эффекта vibrancy для работы с иерархией текста](https://habrastorage.org/getpro/habr/upload_files/eac/88c/0d9/eac88c0d957ffd0110339dc4cf36fe6c.jpg)
l_Tungus_l
Прошу прощения за возможный оффтопик. Статья сама понравилась, но есть другой вопрос касаемо шрифта SF Pro.
Возможно ли его использование в своих сайтах/веб-приложениях? Скажем так, какой у него "ранг" среди всех шрифтов по удобочитаемости, лёгкости в настройке, применению и т.п.?
Делаю просто свой пет-проект, но смотря на шрифты по типу Montserrat, Inter и др., чувствует глаз что что-то здесь... не так :D