How to change SwiftUI font size

How to change SwiftUI font size

There are two ways to set a font size for Text view in SwiftUI.

1. Fixed size
2. Dynamic size

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

What is Fixed Size

Fixed font size stays the same regardless of user preference.

How to set a fixed font size

To set fixed font size, we specified the size we wanted at a time when we created a font. We can set this for both the system font and a custom font.

System Font

We create a system font with Font.system(size:weight:design:) method. This method lets us specify a fixed font size that we want.

Here is an example where we set the font for the second text to a fixed size of 36 points.

VStack {
    Text("Hello, world!")
    Text("Hello, world!")
        .font(.system(size: 36))
}

System font has many variations for us to choose from. As you might notice, there are weight and design parameters in the Font.system(size:weight:design:) method.

You can also set weight and design along with the font size.

Here is an example of fixed system font for different weights and designs.

VStack {
    Text("Hello, world!")
        .font(.system(size: 36))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .semibold))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .bold, design: .monospaced))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .heavy, design: .rounded))
    Text("Hello, world!")
        .font(.system(size: 36, weight: .black, design: .serif))
}

Custom Font

Setting a fixed font size for a custom font is no different than the system one. The only different is we use Font.custom(_:fixedSize:) method instead.

Here is an example where we use "American Typewriter" font with a fixed size of 36 points.

Text("Hello, world!")
    .font(.custom("AmericanTypewriter", fixedSize: 36))

A custom font can have a different weight and design, so we can't specify that as a method argument like the system font. We have to specify the name for a custom variation manually.

Here is an example of a different font style of American Typewriter.

VStack {
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Semibold", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Bold", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-Condensed", fixedSize: 36))
    Text("Hello, world!")
        .font(.custom("AmericanTypewriter-CondensedLight", fixedSize: 36))
}

What is Dynamic Size

Dynamic Type size is a way we describe text size from its usage (text style) instead of the exact point size.

Apple has 11 text styles at the moment.

• Large Title
• Title 1
• Title 2
• Title 3
• Headline
• Body
• Callout
• Subhead
• Footnote
• Caption 1
• Caption 2

The benefit of defining size like this is adaptivity and accessibility. Text size and weight will automatically react to accessibility features like bold text and larger type.

Here is an example of how each text style adapts to the dynamic type size.

Compare this to fixed font size, which always stays the same.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

How to set dynamic font size

To set dynamic font size, we specify the text style or purpose to the system font.

System Font

To set a dynamic font size for a system font, we create it with Font.system(_:design:) method.

As you can see, size and weight parameters are gone since that would be dynamically adjusted based on user preference.

Here is an example of five text style on large Dynamic Type sizes (default size).

VStack {
    Text("Large Title")
        .font(.largeTitle)
    Text("Title 1")
        .font(.title)
    Text("Title 2")
        .font(.title2)
    Text("Title 3")
        .font(.title3)
    Text("Body")
        .font(.body)
}

Here is the same text style on xxxLarge Dynamic Type sizes.

Custom Font

Dynamically adjusting font appearance isn't an easy task. Apple does heavy lifting for us to define font size, weight, and leading for each text style of the system font to make sure it is readable based on user preference.

Luckily we can use some of this goodness (font scaling) on our custom font.

To make a custom font scale with the same scaling factor as Apple text style, we use Font.custom(_:size:relativeTo:) method.

Here is an example where I use custom font with the same size and use the same scale factor as Apple text style.

VStack {
    Text("Large Title")
        .font(.custom(
            "AmericanTypewriter",
            size: 34,
            relativeTo: .largeTitle))
    Text("Title 1")
        .font(.custom(
            "AmericanTypewriter",
            size: 28,
            relativeTo: .title))
    Text("Title 2")
        .font(.custom(
            "AmericanTypewriter",
            size: 22,
            relativeTo: .title2))
    Text("Title 3")
        .font(.custom(
            "AmericanTypewriter",
            size: 20,
            relativeTo: .title3))
    Text("Body")
        .font(.custom(
            "AmericanTypewriter",
            size: 17,
            relativeTo: .body))
}

As you can see, it scales at the same pace as the system text style.

Font.custom(:size:) vs Font.custom(:size:relativeTo:)

There is also another method for a custom font that you should be aware of, Font.custom(_:size:).

This method is equivalent to Font.custom(_:size:relativeTo:) with relativeTo parameter set to .body text style.

Here is an example using Font.custom(_:size:) along side with Font.custom(_:size:relativeTo:) and Font.custom(_:fixedSize:).

VStack {
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            size: 17,
            relativeTo: .body))
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            size: 17))
    Text("Hello, world!")
        .font(.custom(
            "AmericanTypewriter",
            fixedSize: 17))
}

It looks the same on the large dynamic type size.

But as we change the size to xxx large, Font.custom(_:fixedSize:) stays the same while the other two adapt with the same scale factor.