visionOS вывел типографику на новый уровень, где решающую роль играет пространственное мышление. В отличие от традиционных дисплеев, текст должен быть разборчивым на разном расстоянии и под разными углами. При этом размер и насыщенность шрифта остаются основными факторами в создании чёткой типографической иерархии.
Системный шрифт и Extra Large Title
В visionPro есть системный шрифт SF Pro, который отличается исключительной удобочитаемостью в различных операционных системах Apple. Цвет текста по умолчанию — белый, что обеспечивает высокую контрастность на более тёмном фоне для оптимальной читаемости.
При этом оживлённые сцены в visionOS иногда бросают вызов проработанному шрифту в вопросе читаемости и ясности. Для этого разработчики тонко скорректировали насыщенность шрифта, чтобы улучшить его контрастность.
К примеру, основной текст в iOS использует стандартную насыщенность, но для visionOS её надо повышать до средней для лучшей видимости. Аналогичным образом в заголовках используется полужирный шрифт и увеличивается расстояние между буквами.
Также в visionOS представлено два новых стиля шрифта: Extra Large Title 1 и Extra Large Title 2. Они идеально подходят для крупных, привлекающих внимание заголовков в широкоформатных макетах.
Окна в visionOS могут масштабироваться до невероятных размеров, поэтому у некоторых пользовательских шрифтов могут быть проблемы с читаемостью. Чтобы избежать этого, увеличьте насыщенность шрифта или просто используйте системные стили, которые изначально адаптированы под visionOS.
Контраст, цвета и яркость
Глубина — основной принцип проектирования интерфейсов в visionOS, но и тут нужно быть внимательным. К примеру, 3D-текст визуально может визуально отвлекать и очень тяжело читается. Кроме того, под некоторыми углами он может выглядеть деформированным. Поэтому отдавайте предпочтение привычному двумерному тексту.
Решающее значение имеет контраст, благодаря которому текст выделяется. По умолчанию visionOS использует белый текст со стандартным тёмным фоном. В таком случае сохраняется читаемость. Если вы выбираете другой цвет текста, то убедитесь, что он не сливает с различными фонами и протестируйте различные сценарии. Помните, что системные цвета эффективны для фона и кнопок, но не используйте их для самого текста. Это может поставить под угрозу читаемость.
Эффект vibrancy
в visionOS предлагает дополнительный слой, повышающий контрастность и удобочитаемость. У эффекта есть три уровня для разных типов текста:
.primary
— для обычного текста;.secondary
— для описаний, сносок или субтитров;.tertiary
— для неактивных элементов.
l_Tungus_l
Прошу прощения за возможный оффтопик. Статья сама понравилась, но есть другой вопрос касаемо шрифта SF Pro.
Возможно ли его использование в своих сайтах/веб-приложениях? Скажем так, какой у него "ранг" среди всех шрифтов по удобочитаемости, лёгкости в настройке, применению и т.п.?
Делаю просто свой пет-проект, но смотря на шрифты по типу Montserrat, Inter и др., чувствует глаз что что-то здесь... не так :D