CODEWITHSUNDEEP
cssswiftswiftui
Joseph
Joseph

Reputation: 863

iOS Dynamic Type sizes — possible to change default sizes / have pt sizes in between styles?

See here for Apple's Dynamic Type sizes.

I want to use dynamic font sizing, to make text in my app scale according to accessibility settings. However, the default pt sizes don't cover what I require.

Eg.:

Title 1 — 28pt

Title 2 — 22pt

I want to be able to use a 24pt font, with dynamic sizing. With the Large (default) setting, this is not possible... but if the user has the xLarge setting, Title 2 actually scales to 24pt...

As I am targeting iOS 15, I am using these modifiers on my Text so I can use a rounded font with dynamic sizing:

.font(.system(.title2, design: .rounded))
.fontWeight(.regular)

I've searched and searched, but none of the suggested answers work for me. I like the idea of being able to scale the existing dynamic type sizes by a multiplier but if I use .scaleEffect(value) it created pixellation when scaling up, and messes with padding even when scaling down.

Upvotes: 1

Views: 597

Answers (1)

Ashley Mills
Ashley Mills

Reputation: 53101

You can create a font with a custom point size that scales with other dynamic fonts using:

Font.custom(_:size:relativeTo:)

e.g.

struct ContentView: View {
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Title").font(.title).border(.green)
            Text("Title").font(.title1½).border(.blue)
            Text("Title").font(.title2).border(.red)
                
        }
    }
}

extension Font {
    static let title1½ = Font.custom("", size: 24, relativeTo: .title2)
}

(leaving the name blank seems to return the system font)

enter image description here

You can adapt this to use rounded fonts in iOS 15. First you'll need to find the name of the font itself, using UIKit:

let font = UIFont.systemFont(ofSize: 24, weight: .regular)
let fontDescriptor = font.fontDescriptor.withDesign(.rounded)!
let roundedFont = UIFont(descriptor: fontDescriptor, size: 24)
print(roundedFont.fontName)

// .AppleSystemUIFontRounded-Regular

You can use this in your custom Font method:

extension Font {
    static let title1Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 28, relativeTo: .title)
    static let title1½Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 24, relativeTo: .title2)
    static let title2Rounded = Font.custom(".AppleSystemUIFontRounded-Regular", size: 22, relativeTo: .title2)
}

Upvotes: 3

Related Questions