Supporting Dynamic Type

Accessibility & localization Mid-level Swift 5.0+ iOS 17+ Reviewed By Alok Singh

Pick the fix

A row has 16 pt fixed text and a 24 pt icon; at the largest sizes the text truncates. Fix?

Options
Hint 1 of 1

Text, icon and layout all need to adapt.

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A Use a text style font, scale the icon with @ScaledMetric, let text wrap, and stack vertically at accessibility sizes

Correct. Text grows, the icon keeps proportion, and the layout reflows.

Why not the others?
  • B Set minimumScaleFactor to 0.3. Shrinking text defeats the user's setting.
  • C Cap Dynamic Type at Large. It ignores users who need bigger text.
  • D Make the row taller. Fixed text still won't grow.

30-second answer

Use text styles (.font(.body) in SwiftUI, UIFont.preferredFont(forTextStyle:) with adjustsFontForContentSizeCategory in UIKit) so text follows the user's size. Scale custom sizes, such as icons and padding, with @ScaledMetric or UIFontMetrics. Let text wrap, and switch horizontal layouts to vertical at accessibility sizes using dynamicTypeSize.isAccessibilitySize or ViewThatFits.

Practise saying it · 30 s. No recording, just a timer

Explain Dynamic Type support.

Say your answer out loud, then check which of these points you covered:

  • Text styles
  • @ScaledMetric
  • Reflow at large sizes

Deep dive

Custom fonts scale with .font(.custom("Name", size: 17, relativeTo: .body)).

Test the largest accessibility sizes, not just one step up.

Avoid fixed heights on text containers.

Large Content Viewer helps for bar items that can't grow.

Common mistakes

  • Fixed point sizes.
  • Truncating text instead of wrapping.

Senior take & follow-ups

Seniors design layouts that reflow at the largest sizes.

Follow-up questions

Think of your answer first, then open the hint.

  1. How do custom fonts scale?

    Show hint

    relativeTo: in SwiftUI, UIFontMetrics in UIKit.

  2. What changes at accessibility sizes?

    Show hint

    Layouts often stack vertically.

Related questions

Suggest a fix if something here is wrong or out of date.