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.
Accessibility for System
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.
Accessibility for Custom Fonts
Play also lets you use Dynamic Type for any custom Type styles you create in the Styles Panel. By default, each newly created Type style *that does not use System Font* has the Dynamic Text Accessibility switch turned on.
With this setting enabled, your custom font will be able to dynamically adjust based on each user’s accessibility settings. You’ll notice a few attributes that appear, which allow you to configure the specific behavior of your text.
Scale Relative To
As mentioned, all System Type styles will automatically adapt to system text settings, but each will scale differently. In general, smaller system styles like .caption2
will scale up and down more relative to their default size than larger styles, like .largeTitle
.
The Scale Relative To setting allows you pick the System Type style that you would like your Custom Style to resize most similarly to. The default setting of Auto will automatically select the option that is closest in PT size to your custom type style.
Bold Variant
When the user enables Bold Text in their system settings, each types style using a custom font needs to know how to respond. If your custom font offers a Bold variant/weight, this is where you’ll select it.
If your type style is set to a heavier weight, you can choose to set the Bold Variant even bolder, if your custom font supports it. For example, if your type style’s weight is “Bold”, perhaps your Bold Variant would be “Heavy”. The default setting of Auto will automatically attempt to select the bolder variant.
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.