Blue gradient background with a visionOS app window showing a hello text on the center

Understanding typography in visionOS

Optimize text readability in visionOS leveraging font, color, and vibrancy

visionOS introduces a new layer to typography, where spatial considerations play a crucial role. Unlike traditional displays, text needs to be legible from varying distances and contexts. Font size and weight become the main factors in establishing a clear typographic hierarchy that remains legible across varying distances and contexts.

System font and extra large titles

The system font in visionOS, SF Pro, features exceptional legibility across the different Apple operating systems. The text's default color is white, leveraging high contrast against darker backgrounds for optimal readability.

The different text hierarchies on visionOS from the most relevant XLTitle1 to the least relevant Caption2
Hierarchy of typography styles, font sizes and weights used in visionOS.

However, vibrant materials within visionOS can sometimes challenge this clarity. For this reason, font weights have been subtly adjusted for improved contrast.

For instance, body text on iOS uses a regular weight font, while visionOS utilizes a medium weight for better visibility. Similarly, titles use bold instead of semibold. Additionally, tracking (spacing between letters) slightly increased to enhance legibility.

iPhone text font weight and visionOS text font weigh for Body and Title hierarchies
Body and Title font styles used in iOS and VisionOS.

For a deeper dive into ensuring legibility and contrast using materials and text in visionOS, check this article:

Ensuring interface legibility and contrast in visionOS
Use materials to craft spatial user interfaces, ensuring legibility and contrast.

visionOS introduces two new font styles for specific contexts: Extra Large Title 1 and Extra Large Title 2. These are ideal for prominent, attention-grabbing headings in wide, editorial-style layouts.

visionOS app showing the description of a documentary with an arrow pointing to the title and saying it is using the Extrar Large Title style
An example of Extra Large Title used in a visionOS user interface.

While windows in visionOS can scale up to incredible sizes, custom fonts that are smaller or lightweight can still pose readability challenges. To address this, consider increasing the weight of your chosen font or opting for a system font designed for optimal legibility.

For detailed information on utilizing extraLargeTitle and extraLargeTitle2 for text hierarchy, explore this article:

Extra Large Title text styles in visionOS
Learn how to use extraLargeTitle and extraLargeTitle2 for text hierarchy on visionOS applications.

Text contrast, color and vibrancy

Depth is a core design principle in visionOS, but it doesn't apply to all interface elements. 3D text, for instance, can be visually distracting and difficult to read. Therefore, prioritize using 2D text for better clarity. 3D text can often appear warped or challenging to read, especially from different angles or distances.

Image showing a text using 3D letters and saying to avoid it and a good practice example showing flat text on a 3D window
Comparison between three-dimensional text and plain text in visionOS (Principles of spatial design - WWDC23)

Contrast is crucial in making your text stand out against various backgrounds. As stated before, by default visionOS utilizes white text with the standard dark background, enhancing readability. If you choose a different text color, ensure thorough testing across various contexts to guarantee clarity. System colors can be effective for backgrounds or buttons, but avoid using them for text itself, as it can compromise readability.

Top example show the usage of a background color on a button with white text as a good practice and the example on the bottom shows the opposite as something to avoid
An example of correct color usage on glass material.

Vibrancy effects offer an additional layer of enhancing contrast and legibility. Vibrancy improves depth perception within your application. visionOS categorizes vibrancy into primarysecondary, and tertiary modes, each tailored to optimize the visibility and hierarchy of text, symbols, and fills:

  • Use .primary for standard text.
  • Use .secondary for descriptive text like footnotes and subtitles.
  • Use .tertiary for inactive elements, only when high legibility isn't crucial.
Example of usage of primary, secondary and tertiary vibrancy on UI text
An example of using vibrancy to optimize visibility and hierarchy of text.

To learn how typography influences the usability, user experience, and accessibility of your app, explore these resources: