Apply Dynamic Type Text Styles in SwiftUI

Written by Team Kodeco

Dynamic type is a feature in iOS that allows users to adjust the size of text in their apps. This is an important accessibility feature that makes it easier for users with visual impairments to read text on their devices. In SwiftUI, you can easily apply dynamic type text styles to your app’s text views.

To apply dynamic type text styles in SwiftUI, use the font modifier with a dynamic type text style. Dynamic type text styles are defined by the system and adjust the font size based on the user’s preferred text size setting.

Here’s an example of how to apply a dynamic type text style to a Text view in SwiftUI:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello, world!")
        .font(.title)
    }
  }
}

This example shows a Text view that displays “Hello, world!” with a font size that adjusts based on the user’s preferred text size setting. You use the font modifier with the .title dynamic type text style to apply the style to the text.

When you run this code, you’ll see that the font size of the text adjusts based on the user’s preferred text size setting.

Here are some other popular text styles and when to use them:

• .largeTitle: Use for prominent titles, such as the title of a screen or section.
• .title: Use for section headings or other important text.
• .headline: Use for headings or labels that need to stand out.
• .subheadline: Use for secondary headings or labels.
• .body: Use for body text, such as paragraphs or descriptions.
• .callout: Use for text that needs to be emphasized, such as a quote or important information.
• .footnote: Use for small text, such as captions or disclaimers.
• .caption: Use for text that accompanies an image or other content.

For example, you might use .largeTitle for the title of a screen, .headline for a section heading, .body for a paragraph of text and .caption for a caption under an image. By using dynamic type text styles, the font size of the text will adjust based on the user’s preferred text size setting, making your app more accessible and user-friendly.

Try this longer, more colorful, example:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Welcome to my app!")
        .font(.largeTitle)
        .foregroundColor(.blue)
        .padding()
      
      Text("Explore the world")
        .font(.title)
        .fontWeight(.bold)
        .foregroundColor(.green)
        .padding()
      
      Text("Discover new places and experiences")
        .font(.headline)
        .padding()
      
      Text("Get inspired")
        .font(.subheadline)
        .foregroundColor(.purple)
        .padding()
      
      Text("Join our community")
        .font(.callout)
        .foregroundColor(.orange)
        .padding()
      
      Text("Share your adventures with us")
        .font(.footnote)
        .foregroundColor(.gray)
        .padding()
      
      Text("Follow us on social media")
        .font(.caption)
        .foregroundColor(.black)
        .padding()
    }
  }
}

The preview should look as follows:

Here, several Text views use different dynamic type text styles to create a fun and engaging user interface. You use .largeTitle for the app’s welcome message, .title for a call-to-action, .headline for a description, .subheadline for a tagline, .callout for a benefit statement, .footnote for a disclaimer and .caption for a social media prompt.

You also use various modifiers to customize the appearance of the text, such as foregroundColor to change the text color and fontWeight to make the text bold.

Note: Consult Apple’s developer documentation for a complete list of text styles. See the Typography section of Apple’s Human Interface Guidelines for best practices when formatting text.

That’s all there is to it! With dynamic type text styles and the font modifier, you can easily make your app’s text more accessible and user-friendly.