Let's talk about the three new font width styles in iOS 16

Preface

In iOS 16, Apple introduced three new width style fonts to the SF font library.

1. Compressed
2. Condensed
3. Expend

UIFont.Width

Apple introduced a new structure UIFont.Width, which represents a new width style.

There are currently four styles.

• standard: The default width we always use.
• compressed: The narrowest width style.
• condensed: A width style between compressed and standard.
• expanded: The widest width style.

SF font and new width styles

How to use SF fonts with the new width style

To use the new width style, Apple has a new UIFont class method that accepts the new UIFont.Width .

 class UIFont : NSObject {
 class func systemFont(
 ofSize fontSize: CGFloat,
 weight: UIFont.Weight,
 width: UIFont.Width
 ) -> UIFont
 }

You can use the new method as you normally would when creating fonts.

 let condensed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .condensed)
 let compressed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .compressed)
 let standard = UIFont.systemFont(ofSize: 46, weight: .bold, width: .standard)
 let expanded = UIFont.systemFont(ofSize: 46, weight: .bold, width: .expanded)

SwiftUI

Update: In Xcode 14.1, SwiftUI provides two new APIs for setting this new width style: width(_:) and fontWidth(_:).

Currently (Xcode 16 beta 6), this new width style and initializer is only available in UIKit, but luckily, we can easily use it in SwiftUI.

There are many ways to integrate UIKit into SwiftUI. I’ll show you two ways to use the new width styles in SwiftUI.

1. Convert UIfont to Font.
2. Create a Font extension.

Convert UIfont to Font

We know from how to convert UIFont to Font in SwiftUI ^[1] that Font has an initializer method that receives a UIFont as a parameter.

The steps are as follows

1. You need to create a UIFont with a style of the new width.
2. Create a Font using that UIFont.
3. Then use them like normal Fonts.

 struct NewFontExample: View {
 // 1
 let condensed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .condensed)
 let compressed = UIFont.systemFont(ofSize: 46, weight: .bold, width: .compressed)
 let standard = UIFont.systemFont(ofSize: 46, weight: .bold, width: .standard)
 let expanded = UIFont.systemFont(ofSize: 46, weight: .bold, width: .expanded)

 var body: some View {
 VStack {
 // 2
 Text("Compressed")
 .font(Font(compressed))
 Text("Condensed")
 .font(Font(condensed))
 Text("Standard")
 .font(Font(standard))
 Text("Expanded")
 .font(Font(expanded))
 }
 }
 }

• Create a UIFont with the new width style.
• Initialize Font with UIFont, and then pass it to .font for modification.

Creating a Font extension

This method is actually the same as converting UIfont to Font. We just need to create a new Font extension to make it easier to use in SwiftUI.

 extension Font {
 public static func system(
 size: CGFloat,
 weight: UIFont.Weight,
 width: UIFont.Width) -> Font
 {
 // 1
 return Font(
 UIFont.systemFont(
 ofSize: size,
 weight: weight,
 width: width)
 )
 }
 }

Create a static function to pass the parameters required by UIFont. Then, initialize UIFont and create Font.

We can use it like this.

 Text("Compressed")
 .font(.system(size: 46, weight: .bold, width: .compressed))
 Text("Condensed")
 .font(.system(size: 46, weight: .bold, width: .condensed))
 Text("Standard")
 .font(.system(size: 46, weight: .bold, width: .standard))
 Text("Expanded")
 .font(.system(size: 46, weight: .bold, width: .expanded))

How to use the new width style

You can use it anywhere you want. There won't be any restrictions, all new widths will have the same dimensions, same height, only the width will change.

Here is the same text, same font size and same font style with different font width styles.

New Width Style Advantages

You can use new width styles on top of existing font styles, such as thin or bold, to create a unique experience in your app.

Apple uses it in their Photos app, in the "Memories" feature, by combining different font widths and styles in the title or subtitle.

Here are some font combinations of different widths and styles to inspire you.

 Text("Pet Friends")
 .font(Font(UIFont.systemFont(ofSize: 46, weight: .light, width: .expanded)))
 Text("OVER THE YEARS")
 .font(Font(UIFont.systemFont(ofSize: 30, weight: .thin, width: .compressed)))

 Text("Pet Friends")
 .font(Font(UIFont.systemFont(ofSize: 46, weight: .black, width: .condensed)))
 Text("OVER THE YEARS")
 .font(Font(UIFont.systemFont(ofSize: 20, weight: .light, width: .expanded)))

You can also use the new width styles to control the readability of text.

The following example shows how different width styles affect the number of characters per line and paragraph length:

Download this font

You can download these new font width styles from the Apple Font Platform[2].

After downloading and installing, you will find a new style that combines the existing width styles with the new width styles.

Basically, you are prohibited from using SF fonts anywhere except in the simulated system UI of the simulator. Please make sure you read and understand the license before using.

References

[1] How to convert UIFont to Font in SwiftUI: ​​https://www.jianshu.com/p/56ee0d1ea0e1.

[2] Apple Font Platform: https://developer.apple.com/fonts/.