Dynamic Type in Timeline 3D

Wednesday, September 18, 2013

Personally, one of my favorite features in iOS 7 is one that many people seem to be overlooking. That is “Dynamic Type,” which gives you the opportunity to tell the operating system what size fonts you prefer, and then apps that support Dynamic Type can adjust accordingly.

When adapting Timeline 3D for iOS 7, this is one of the first features on which I focused.

Here is an animated image of our Timeline 3D’s event list, event detail page, and the Dynamic Type setting. You can see how each of them look with different size settings. Click the animation for the full size.

Obviously, the font sizes are changing. It may be less obvious that the layout is changing too. The image size, the margins, and the list spacing are all adjusting according to the font metrics.

For example, the app always tries to keep the event details within a single screen if it is practical to do so. As a result, the kangaroo image gets smaller as the text around it grows larger. There are design rules that govern the size of the image. So, it will only shrink to a minimum size, and then, if the event needs more room, the layout will introduce a vertical scroll.

Furthermore, the fonts are not all scaling in a linear proportion. Notice that the event dates in the list do not grow as fast as the event notes on the middle screen.

There is one more interesting note to point out from our support of Dynamic Text. The feature, in its stock configuration, provides variations of Helvetica Neue to apps. We wanted to use Brandon Text for our app, because it is more beautiful and readable than Helvetica Neue at small sizes. Therefore, I built a custom Dynamic Text system that forms a layer between the stock system and our app. This custom system translates your preferences into the font faces, weights, and sizes that our app's design language is built upon.

Labels: dynamic type, font, ios7, timeline 3D