Back to All Articles

Articles

Adopting Dynamic Type in Apps and on the Web

John Wickham ▪︎ August 6, 2019

Typography is one of the most important elements of UI design. The type in our apps and websites plays a big role in establishing the visual tone and reinforcing a brand’s identity, but the primary role of type is always the same: communicating information. That’s why it’s so important to make sure your type is legible to everyone, and fortunately, Dynamic Type makes that easy.

Dynamic Type: Making Type Accessible

Introduced in iOS 7, Dynamic Type is an accessibility feature in iOS, watchOS, and tvOS that puts users in control of the text they read. Dynamic Type lets people decide which text size is right for them—smaller, information-dense text, or larger, easy-to-read text—across their entire device, including all of their third-party apps from the App Store.

Being able to adjust all text across a person’s device can be a game changer for them. It may seem like a small thing, but supporting Dynamic Type as a developer means that your app gets to participate in that game-changing transformation, changing from something difficult to use for many into something delightful to use for all.

In Apps

Like most elements of an app’s UI, iOS sets a strong precedent for how type should appear in different situations. The Dynamic Type API makes it easy to choose the right system-defined text appearance.

Let’s take a look at using Dynamic Type in a project (first, in Interface Builder):

Dynamic Type can be applied to any Interface Builder object that has a font property, like UILabel, UIButton, and UITextView. To apply Dynamic Type, select the object and, in the inspector, click the small font panel icon inside the Font field. Then, from the font popover, choose a text style from the Font pop-up menu.

Here’s the same Dynamic Type features applied in Swift:

titleLabel.font = UIFont.preferredFontFor(textStyle: .headline)
textView.font = UIFont.preferredFontFor(textStyle: .body)

If you’re using a custom font, you can still adapt your type to the user’s preferred point size without having to use the system-defined text styles:

let preferredPointSize = UIFont.preferredFontFor(textStyle: .body).pointSize
textView.font = UIFont(name: "My Font", size: preferredPointSize)

Beyond point size

Dynamic Type does more than just adjust the point size of text. The fonts returned by UIFont’s preferredFontFor(textStyle: ) method also take kerning and leading into consideration, so using Dynamic Type with the system font guarantees the maximum legibility possible for readers.

Consider how text size affects layout

With the user in control of text size, even static text will have unpredictable dimensions, so remember to consider how your layout will be affected by changing text sizes. Savvy has a great article about using Auto Layout alongside Dynamic Type to create dynamic, adaptable layouts.

On the Web

You can even take advantage of Dynamic Type on the web for users that browse with Safari. WebKit provides these special values to use with the Font property:

  • font: -apple-system-body;
  • font: -apple-system-headline;
  • font: -apple-system-subheadline;
  • font: -apple-system-caption1;
  • font: -apple-system-caption2;
  • font: -apple-system-footnote;
  • font: -apple-system-short-body;
  • font: -apple-system-short-headline;
  • font: -apple-system-short-subheadline;
  • font: -apple-system-short-caption1;
  • font: -apple-system-tall-body;

You can find more about these properties and using them on the Web at Use Your Loaf.


Resources

Follow us on Instagram