Implementing Dynamic Type Support

iOS 7 introduced typographically heavy and complex designs that pushed solutions using string drawing and WebKit (both based on Core Graphics) to the limit. Going down to Core Text (an Advanced Unicode layout engine) may be overkill to simply render a label. Apple’s answer was Text Kit which is a fast, modern, object-oriented text layout and rendering engine which is built on Core Text and is tightly integrated with UIKit. In fact, all of Apple’s UI text-based controls like UILabel, UITextField, UITextView, and even UIWebView were rebuilt on top of Text Kit. This should provide seamless animations in UITableViews and even UICollectionViews.

This week I had the opportunity to get into Text Kit. The app I am working on has some views which are text heavy and to some have a small, hard to read, text. The answer was Text Kit’s Dynamic Type that provides designed type styles that are not only optimized for legibility but also user selectable through the Accessibility Settings on the iPhone. Getting this to work was easy and I started by building a prototype so as to know what I needed to add to the app. I’ll describe step-by-step what I did to build the prototype and although I have the prototype posted on GitHub I recommend you follow along step-by-step.

1. I first created a iPhone Single View Application and in my Main.storyboard dragged a UITextView onto the View Controller.

UITextView on ViewController

UITextView on ViewController

2. In the ViewControler implementation file in the viewDidLoad I added the following NSNotificationCenter line:

- (void)viewDidLoad
 {
 [super viewDidLoad];
 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(preferredContentSizeChanged:)
   name:UIContentSizeCategoryDidChangeNotification object:nil];
 }

3. I then implemented the selector method with an NSLog to ensure I was getting the change notification:

- (void)preferredContentSizeChanged:(NSNotification *)aNotification {
    NSLog(@"User wants the Font to change");
 }

The system content size is exposed to users in Settings > General > Text Size as a slider with seven different base sizes where the default size roughly matches the font sizes previously recommended for iOS 6 and below. Changing the Text Size now triggers the NSLog.

Changing the Text Size

Changing the Text Size

Next we need to actually respond to the notification of Content Size Changes by changing the text in the UITextView.
We can achieve this by adding an Outlet to our UITextView and then adding one line of code in the preferredContentSizeChanged: method:

@property (weak, nonatomic) IBOutlet UITextView *mainTextView;

- (void)preferredContentSizeChanged:(NSNotification *)aNotification {
    NSLog(@"User wants the Font to change");
    self.mainTextView.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
 }

This sets the text view font to one based on the new preferred size.
Run the app again and the font size will change in the View Controller.

UITextView now responds with Dynamic Type

UITextView now responds with Dynamic Type

To sum it up the implementation of Dynamic Type only requires a UIFont method call and one NSNotification. Apple has made this low hanging fruit and we really have little excuse to skip Dynamic Type support.

Where to next:
If you like what you’ve read and want to know more I suggest the 2013 WWDC Session Videos for the following sessions:
220: Advanced Text Layouts and Effects with Text Kit
223: Using Fonts with Text Kit

One thought on “Implementing Dynamic Type Support

  1. Pingback: Dynamic type support | Barty's Ways

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s