CODEWITHSUNDEEP
swiftuitextfont-sizecustom-fontdynamictype
Simon W
Simon W

Reputation: 51

Using custom font together with dynamic type size in SwiftUI

So far I have been using the modifier .dynamicTypeSize every where to define the text size like that:

Text("Hello, World")
    .dynamicTypeSize(.xxxLarge)

Now I also want to define a custom font like AmericanTypewriter for exemple but it seems incompatible with the other modifier.

All the tutorials I found on the subject, including Apple doc, seem to mention a different type of dynamic type size, based on .body, .title, .largeTitle, etc. not on .xLarge, .xxLarge and so on, like:

Text("Hello, world!")
    .font(Font.custom("MyFont", size: 32, relativeTo: .title))

I tried to substitute .xxLarge to .title in the above expression, but this does not work.

Then I tried to remove the `.dynamicTypeSize' modifier. Here is my text code:

Text(etLogique ? ET : OU)
    .font(.custom("AmericanTypewriter", size: 18))
    .bold()
    .pastille(color: Color("fondbleu"))
    .onTapGesture {
        etLogique.toggle()
    }

ETand `OU are the two symbol characters to represent logical 'AND' and 'OR' and when touching the text you toggle between one and the other.

let ET = "\u{2229}"
let OU = "\u{222A}"

By the way, pastille()is the format extension:

extension View {
    func pastille(color: Color) -> some View {
        self.padding(6)
            .background(color)
            .border(/*@START_MENU_TOKEN@*/Color.black/*@END_MENU_TOKEN@*/, width: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/)
            .cornerRadius(/*@START_MENU_TOKEN@*/20.0/*@END_MENU_TOKEN@*/)
            .overlay(
                RoundedRectangle(cornerRadius:20).stroke(.black, lineWidth: 1))
    }
}

The result is a bit weird. The AND symbol is appearing smaller than the OR one:

AND

OR

Upvotes: 1

Views: 752

Answers (2)

Damien
Damien

Reputation: 3362

Dynamic Type is an accessibility feature that allows users to scale the UI. DynamicTypeSize is used in SwiftUI to get the Dynamic Type and tweak the UI for a better visual result (WWDC 24 session on the matter 7:20)

In order to set the size of your font in SwiftUI, you can either:

  • use the defined semantic system fonts:

.font(.body)

  • use the system font with a custom size (NOT changing with dynamicType):

.font(.system(size: 15))

  • use the system font with a custom size (changing with dynamicType):

.font(.system(size: UIFontMetrics(forTextStyle: .body).scaledValue(for: 15)))

  • if you're using a custom font:

.font(Font.custom("MyCustomFont", size: 15, relativeTo: .body))

Some time ago I made a google drive spreadsheet with a graph to visualize the scaling properties of the different semantic system Fonts Apple provides, in case you want to use a custom font and are wondering which text style to use.

Upvotes: 0

Simon W
Simon W

Reputation: 51

Foolowing @Sweeper's advice, I updated my code like this:

Text(etLogique ? ET : OU)
    .font(.custom("HiraMinProN-W3", size: 22))
    .bold()
    .pastille(color: Color("fondbleu"))
    .onTapGesture {
        etLogique.toggle()
    }

Which seems to work. I had to try to find out 22 is the size that matches with the next Text which has no size modifier.

Upvotes: 0

Related Questions