Code Crafter's Den

Making Your iOS App More Accessible with Dynamic Type in SwiftUI

Saeid
Making Your iOS App More Accessible with Dynamic Type in SwiftUI

Ensuring your iOS app is accessible isn’t just about meeting compliance. It’s about making your app usable and enjoyable for everyone, including users with visual impairments, older adults, and anyone who benefits from larger or more readable text. One of the most impactful ways to support accessibility in iOS is by implementing Dynamic Type.

What Is Dynamic Type?

Dynamic Type is a system-wide accessibility feature in iOS that enables users to adjust the text size across all apps. When users increase their preferred content size in iOS Settings, apps that support Dynamic Type automatically scale their text accordingly.

As developers, supporting this behavior is essential. It ensures your app adapts gracefully to a wide range of user needs, improves readability, and creates an inclusive experience for all.

Supporting Dynamic Type in SwiftUI

The good news? SwiftUI makes Dynamic Type support incredibly easy, especially when using system font styles. This means that for built-in text styles (such as .title and .body), your text views will automatically adapt to the user’s preferred font size set in the device settings.

For example, when using standard font styles:

Text("Code Crafter's Den")
// Scales text automatically
.font(.title)

Scaling Custom Fonts in SwiftUI

If you are using custom fonts in your application, you can still ensure they scale correctly with Dynamic Type. You need to use the custom(_:size:relativeTo:) modifier method to specify the custom font, its base size, and which standard text style it should scale relative to.

This approach enables the system to accurately scale your custom font according to the user’s Dynamic Type settings, while preserving the visual characteristics of your chosen typeface.

A common pattern is to create a ViewModifier to apply this scaled custom font consistently throughout your app:

struct ScaledFont: ViewModifier {
    var name: String
    var size: CGFloat
    var relativeTo: Font.TextStyle // Text style to scale relative to

    func body(content: Content) -> some View {
        content
            .font(.custom(name,
                          size: size,
                          relativeTo: relativeTo)) // Use .custom with relativeTo
    }
}

extension View {
    func scaledFont(name: String,
                    size: CGFloat,
                    relativeTo: Font.TextStyle = .body) -> some View {
        self.modifier(ScaledFont(name: name,
                                 size: size,
                                 relativeTo: relativeTo))
    }
}

Usage example:

var body: some View {
    Text("Code Crafter's Den")
        .scaledFont(name: "Roboto-Regular", size: 24)
}

Avoiding Text Truncation and Layout Issues

When text scales to larger sizes, it requires more space. It is critical to ensure that scaled text is not truncated, overlaps with other text, or becomes unreachable. Text in apps must support scaling to at least 200% and remain fully visible.

By default, SwiftUI Text views expand to multiple lines, which helps prevent truncation. To further avoid text truncation, especially when content might exceed the screen space with larger font sizes, it is recommended to place your text content inside a scrollable container like a ScrollView. You should also avoid setting fixed values for heights or widths on elements that contain text. Ensure you haven’t set a lineLimit on your Text views if you want them to wrap onto multiple lines.

Here are a few tips to avoid layout issues:

  • Allow text to wrap onto multiple lines. Avoid setting lineLimit unless necessary.
  • Use scrollable containers like ScrollView for long content.
  • Avoid fixed height/width constraints for views that include text.
  • Test with larger accessibility sizes (up to 200%) to ensure everything remains readable.
ScrollView { // Use a scrollable container
    VStack {
        Text("Content should scroll!")
            .padding()
        // Add more views here if needed
        ForEach(0..<20) { index in
            Text("Additional content \(index)")
                .padding()
        }
    }
    .frame(maxWidth: .infinity) // Ensure content expands
}

Final Thoughts

Making your iOS app accessible with Dynamic Type is not just best practice, it’s the right thing to do. Whether you’re using system fonts or custom typefaces, SwiftUI gives you the tools to ensure your app adapts to the needs of real users.

By embracing flexible layouts and scalable text, you’re creating an experience that’s welcoming and usable for everyone.

Summary

In this article, you learned how to implement Dynamic Type support in SwiftUI, scale custom fonts, and design layouts that remain readable across all text sizes. Accessibility isn’t an afterthought. It’s a core part of building inclusive, user-friendly iOS apps.

Saeid Avatar
Saeid