UIFont Updates in iOS 17

Typography is a key design element across all Apple platforms, supported by customised fonts that are included specifically for user interfaces across iOS, macOS, watchOS and more. Starting with the San Fransisco typeface introduced in iOS 9, Apple has iterated on the standard font to include support for compressed and expanded variants, as well as introduced new typefaces to support monospaced, rounded, and seriffed fonts. As well as different visual styles, Apple platforms have a set of built in semantic font types, allowing fonts to be chosen based on their purpose, rather than specific point sizes. This allows fonts to automatically update to match the user's preferred text size settings - a feature known as Dynamic Type. It is this feature that has seen an update in iOS 17.

Making Space for Titles

In WWDC 2023 session 10076 Design for spatial user interfaces, Apple introduced two new semantic text styles - .extraLargeTitle and .extraLargeTitle2. On iOS, for users using the default text size setting, these map to San Francisco 36pt Bold, and San Francisco 28pt Bold respectively.

This update gives app designers a couple of extra tools to use when designing interfaces with impactful, bold titles.

But What About Branding?

Ah yes, of course, it would all be a bit too easy just to use the fonts that come out-of-the-box on Apple platforms, wouldn't it? Many apps feature a visual design that is influenced by brand considerations, which often requires the use of a custom font. Fortunately, it is possible to use semantic text styles with custom fonts on iOS, allowing users to benefit from Dynamic Type whilst maintaining brand identity. In fact, it's not just possible, but really easy using the Ampersand framework that I developed specifically for this purpose (I also wrote an article explaining its creation and how to use it).

But it gets better! You can use Ampersand with Xcode 15 and iOS 17 to support custom fonts using the new .extraLargeTitle and .extraLargeTitle2 text styles right now. To do this, simply update the existing Ampersand configuration file to include the following two additional entries in the styles array:

{
  "styles": [
    {
      "textStyle": "UICTFontTextStyleExtraLargeTitle",
      "fontName": "Avenir-Heavy",
      "pointSize": 34
    },
    {
      "textStyle": "UICTFontTextStyleExtraLargeTitle2",
      "fontName": "Avenir-Heavy",
      "pointSize": 26
    },
    ...
}

The UICTFontTextStyle​ExtraLargeTitle and UICTFontTextStyle​ExtraLargeTitle2 text style entries correspond to the two new semantic text styles. Simply provide the font name and point size that you would like to use for these styles at the default text size, and you're good to go. Simple!