Skip to main content
All CollectionsDesign System
System Fonts for Accessibility
System Fonts for Accessibility
Updated over a week ago

By default, text in Play will use System Fonts. Because System Fonts are what Apple recommends to use in production apps, designing with them eliminates the difference between your design and the final product, which is difficult to do with traditional design tools that don’t offer System Fonts. System Fonts also offer greater customization and accessibility improvements.

System Font Properties

With System Fonts, you can still edit the normal text properties like weight, size, and line height, but there are two new properties that you only get with System Fonts: Design & Width.

Design

System Font's Design property lets you switch between different variations of the System Font. The options are Default (Sans Serif), Monospaces, Rounded, and Serif.

Width

When the Design is set to Default (Sans Serif), you can adjust the font width. The options here are Standard, Compressed, Condensed, and Expanded.

System Styles

Play provides you with a list of presets from Apple's native System Font Styles. These are different from your project's Type Styles. System Styles cannot be edited, so there is no concern that they'll be overridden.

You can select a System Style, or a Type Style, from the four-circle icon in the top right corner of the Text Settings Panel. The System Styles are blue and each has a "." in front of its title.

With a System Style selected, you can still adjust some properties like the weight or design. These adjustments will be applied to the text element or text field you're editing, but they won't be applied to the System Style itself.

Accessibility

It's important to consider how your app might look to users with different needs as you're designing it, which can be hard with a lot of tools.

Play lets you take advantage of Apple's Dynamic Type, so any text in your design becomes automatically accessible and responds to each user's text size settings. For example, many users have Large Text turned on. By using System Styles in Play, your device will automatically resize your text based on Apple's specific settings for each System Style across type sizes.

Having accessibility features in your design tool elevates your design process, so you're better able to make iOS apps for all users. We'll add System Colors soon as another step towards making accessibility design easier for designers.

Did this answer your question?