Tutorials · Sep 29, 2022

How to Use SF Pro Expanded and the Other New Font Widths

Compressed, Condensed, and Expanded are available in DetailsPro today to bring new expression and style to your designs.

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.

From top to bottom: Compressed, Condensed, Standard, and Extended. Each is set in 39pt Semibold. Every “Opens at 10:00 a.m.” text is set in Standard 19pt Regular.

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

  1. Open a design
  2. Select any Text element
  3. Add a Font modifier
  4. Choose a width in the “Width” section
  5. Try Compressed, Condensed, or Expanded
Select any Text element to start.
Select the Font modifier to edit the font.
Choose from Compressed, Condensed, Standard, and Expanded when using the SF Pro default font.
“Condensed” is my early favorite. I think it gives text a wonderful fun feeling that is perfectly subtle.

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!