How to support Dynamic Type accessibility in SwiftUI

Dynamic Type allows users to increase or decrease the size of text in apps based on their reading preferences. This can be configured in the iOS Settings under Accessibility → Display & Text Size → Larger Text.

Supporting Dynamic Type ensures that our app remains readable and accessibible to more users. In this article, we'll look at how to support Dynamic Type in a SwiftUI app.

Let's jump in.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Using system fonts

When we're using SwiftUI's built-in text styles like .body, .headline, or .title, Dynamic Type is automatically supported:

Text("hello")
    .font(.body)

These styles scale according to the user’s preferred content size category and follow the system's typographic hierarchy.

Using custom fonts

We can also use custom fonts with scaling. Here's a simple example:

Text("hello")
    .font(.custom("SomeCustomFont", size: 24))

As of iOS 14 and later, this version will also scale automatically with the system's text size setting.

When using custom fonts, we can specify a relative text style:

Text("hello")
    .font(.custom("SomeCustomFont", size: 24, relativeTo: .title))

Without the relativeTo parameter, it defaults to .body. Setting it gives us more control over how strongly the font reacts to the user's text size setting, for example a .title will grow more aggressively than .body.

Adapting layout with @ScaledMetric

Supporting Dynamic Type isn't just about text - it may affect other layout settings like spacing, padding etc. To adapt layout values like padding or spacing, we can use the @ScaledMetric property wrapper:

@ScaledMetric(relativeTo: .body) var padding: CGFloat = 10

Text("Hello")
    .padding(scaledPadding)

This value will scale just like .body would, which helps maintain proportional spacing and a visually balanced layout as text grows.

Opting out of scaling

In rare cases, we might want a text element to stay at a fixed size regardless of the user's text size setting. For example, in tight UI elements where scaling might cause layout issues. In these cases, we can use fixedSize:

Text("Hello")
    .font(.custom("SomeCustomFont", fixedSize: 20))

However, fixed-size text may become unreadable for some users and should only be used where truly necessary.

Scaling the font is only one part of supporting larger text. When growing content no longer fits its original structure, we can also adapt the SwiftUI layout for accessibility text sizes.