Larger Dynamic Type For Accessibility

In my recent post on dynamic type there was an aspect that I overlooked when the user enables larger type for accessibility.

Enabling Larger Dynamic Type

The standard Text Size setting allows the user to choose between seven content size categories from XS to XXXL:

However if you access the “Larger Type” setting from General > Accessibility > Larger Type you can enable “Larger Dynamic Type” and select from a further five accessibility size categories:

It may be difficult to see in the screenshot but the first seven slider settings correspond to the standard content size categories. However if you move the slider further to the right you can select one of the five accessibility content size categories:

  • UIContentSizeCategoryAccessibilityMedium
  • UIContentSizeCategoryAccessibilityLarge
  • UIContentSizeCategoryAccessibilityExtraLarge
  • UIContentSizeCategoryAccessibilityExtraExtraLarge
  • UIContentSizeCategoryAccessibilityExtraExtraExtraLarge

I covered supporting dynamic type in an early post using text styles and preferred fonts. If you followed that approach there is, for the most part, nothing extra you need to do to support these larger accessibility content sizes. Of course you should test with these settings to make sure it does not cause layout issues but otherwise it should just work.

Text Styles

Update 14 Aug 2017: In iOS 11 Apple changed the larger accessibility sizes so that they impact all text styles not just the body text. Also see Using A Custom Font With Dynamic Type.

One thing that can be confusing about these larger accessibility content sizes is that they do not impact all of the text styles. In fact as far as I can tell the only text style that continues to increase in size is the body text style (UIFontTextStyleBody). The screenshot below is from the DynamicText example app with the preferred content size set to the largest (XXXL) accessibility setting:

For comparison here is the same text displayed at the standard XXXL setting:

Notice how only the body text increases in size. For comparison, with iOS 7.0.4 the body text style uses a 20 point font for the standard XXXL content size. Enable the larger accessibility sizes and the body font grows from 24 point (M) all the way up to 46 point for the XXXL size.

Adjusting Table Row Height

As I mentioned you do not need to do anything specifically to support the larger accessibility sizes with the preferred font text styles. However if you are manually adjusting layout based on the preferred content size category you should be aware that there are twelve possible values and not just the seven standard values.

For example, consider the situation where you want to increase the height of a table view row that uses the body style for the larger type sizes. A method to calculate the row height could look something like this:

- (void)configureRowHeight {
  CGFloat rowHeight = 44.0;
  NSString *contentSize = [[UIApplication sharedApplication] preferredContentSizeCategory];
  NSArray *largeSizes = @[UIContentSizeCategoryExtraExtraLarge,
                          UIContentSizeCategoryExtraExtraExtraLarge,
                          UIContentSizeCategoryAccessibilityMedium,
                          UIContentSizeCategoryAccessibilityLarge,
                          UIContentSizeCategoryAccessibilityExtraLarge,
                          UIContentSizeCategoryAccessibilityExtraExtraLarge,
                          UIContentSizeCategoryAccessibilityExtraExtraExtraLarge];

  if ([largeSizes containsObject:contentSize]) {
    rowHeight = 64.0;
  }
  self.tableView.rowHeight = rowHeight;
}

This method just takes the current preferredContentSizeCategory from the App delegate and if the size is XXL or larger (including any of the accessibility sizes) it uses a slightly larger 64 point row height compared to the default.

You would want to call this method from the viewDidLoad method of the table view controller to set the initial row height and then also in the method called in response to a content size change notification:

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

- (void)didChangePreferredContentSize:(NSNotification *)notification {
  [self configureRowHeight];
  [self.tableView reloadData];
}