Type Styles
Updated this week

Type styles are the typography options used throughout your project, and they're specific to each project. Your projects won't start with any Type Styles, and text elements will instead use Apple's native System Fonts (and System Styles) by default. Once you've created your own Type styles, you can use them for any text element in your project.

Play lets you fully customize your Type styles using the following properties:

  • The Family property gives you a list of all the supported fonts in Play. If you have a specific font in mind, you can use the search bar to search for it.

  • The Styles property lets you choose between any variants (Medium, Bold, Italic, etc.) of the selected font family. If the font family you’ve selected has no variants, the styles slider will default to the style provided by the font.

  • The Font Size property adjusts the type size. The preview area will update as you drag the slider left and right, making the type larger and smaller respectively.

  • The Letter Spacing property adjusts the kerning, which is the space between each letter. By default, a new Type style will have a letter spacing of 0%.

  • The Line Height property adjusts the leading, which is the space between each line of text. By default, a new Type styler will have a line height set to auto.

  • The Transform property, you can make the text all uppercase, all lowercase, or all title case. By default, a Type style has no forced case. Only one case can be active at a time.

Type Styles in macOS

To create a Type style in macOS, click the plus icon in the Styles Panel. A new Type style will appear in your Type styles list. To adjust the Type style, click the edit icon on the row and adjust the properties from the panel that appears. Closing the panel will automatically save your style.

Edit a Type style the same way you created the initial style.

To duplicate, delete, or rename your Type style, right click on its name.

Type Styles in iOS

To create a Type style on iOS, tap the four circle icon, and select "Type" from the menu that appears. Tap New Type, and a modal will appear where you can edit all the properties mentioned at the top of this article. Closing the modal will automatically save your Type style.

Edit your Type style by tapping on the one you'd like to edit, and adjusting the properties the same way you created the initial type value.

To duplicate, delete, or rename your Type style, tap on its name while in the Type style editor.

Did this answer your question?