Apple announced three new fonts at WWDC 22 that make up the new and expanded San Francisco font family: Compressed, Condensed, and Expanded. I’m excited to share that DetailsPro now makes it easy for you to start experimenting and designing with these beautiful new fonts in your designs today.
To use these fonts, you must be on iOS 16, iPadOS 16, or macOS Ventura and the latest version of DetailsPro. You can use these fonts anywhere you could use SF Pro before, and selecting these new widths is easy. Here’s how you do it:
How to try the new fonts in your designs
- Open a design
- Select any Text element
- Add a Font modifier
- Choose a width in the “Width” section
- Try Compressed, Condensed, or Expanded
From the WWDC Session
Export as SwiftUI code
DetailsPro fully supports exporting code for the new expanded San Francisco font family so you can take these designs with you for iOS 16 and up. When you design with DetailsPro, you can take the design you make with you as 1:1 SwiftUI that can be exported to Xcode, Swift Playgrounds and more. Export as SwiftUI code is available free to all DetailsPro designers.
Just the beginning
As I’ve been building in support for these new fonts to DetailsPro, I have been using them and I truly think we haven’t even seen 1% of how far these fonts will go. Condensed is straightway my favorite because it’s got almost a The Flintstone’s/The French Dispatch feeling of wonder to it. I thought Expanded would be my favorite, because it’s outwardly the coolest in my opinion, but I am loving Condensed and itching for an excuse to use it in something.
I can’t wait to see what you design with it. If you make anything you want to share, tag me on twitter @sahandnayebaziz and @detailsproapp!