How to change SwiftUI font size

⋅ 6 min read ⋅ SwiftUI Font Text

Table of Contents

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.

Sponsor sarunw.com and reach thousands of iOS developers.

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))
}
Default font size vs fixed font size of 36 points.
Default font size vs fixed font size of 36 points.

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))
}
Default style, semibold weight, bold weight with monospaced design, heavy weight with rounded design, and black weight with serif design.
Default style, semibold weight, bold weight with monospaced design, heavy weight with rounded design, and black weight with serif design.

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))
An American Typewriter font with a fixed size of 36 points.
An American Typewriter font with a fixed size of 36 points.

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))
}
American Typewriter in regular, semibold, bold, condensed, and condensed light style.
American Typewriter in regular, semibold, bold, condensed, and condensed light style.

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.

Text style adapts their size according to user preference.
Text style adapts their size according to user preference.

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

Fixed font size will not change.
Fixed font size will not change.

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

Sponsor sarunw.com and reach thousands of iOS developers.

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)
}
Large title, title 1, title 2, title 3, and body text style on a large dynamic type size.
Large title, title 1, title 2, title 3, and body text style on a large dynamic type size.

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

Large title, title 1, title 2, title 3, and body text style on an xxx large dynamic type size.
Large title, title 1, title 2, title 3, and body text style on an xxx large dynamic type size.

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.

Using custom font with the same font size and font scale as the system font.
Using custom font with the same font size and font scale as the system font.

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.

Font.custom(_:size:), Font.custom(_:size:relativeTo:) , and Font.custom(_:fixedSize:) on large dynamic type size.
Font.custom(_:size:), Font.custom(_:size:relativeTo:) , and Font.custom(_:fixedSize:) on 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.

Font.custom(_:size:), Font.custom(_:size:relativeTo:) , and Font.custom(_:fixedSize:) on xxx large dynamic type size.
Font.custom(_:size:), Font.custom(_:size:relativeTo:) , and Font.custom(_:fixedSize:) on xxx large dynamic type size.

Read more article about SwiftUI, Font, Text, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to prepare your iOS project to support modular architecture

At the beginning of a project, there are a lot of changes and uncertainty. You might want to start modularizing your code in the later phase, where the scope is clearer. Let's see how to prepare your single module project to support future modularizing.

Next
How to create SwiftUI circular progress bar

In this tutorial, we will learn how to create a circular progress bar in SwiftUI using just three SwiftUI views.

← Home