Towards a Design System in iOS: Typography
In our previous post, we discussed about the importance of having a Design System to enhance consistency in the design of our apps, improving the discovery and adoption of new features. We also looked at colors in our design system and how we customized Style Dictionary to deal with light and dark mode variants for each color, and have a nice API to use colors as extensions to UIColor.
In this post, we are going to focus on typography and how we can customize it, without losing the ability to adapt it for accessibility.
Dynamic Type
Dynamic Types in iOS are semantic categories that assign size and weight to the font of a text given their relevance in the user interface. These can be headlines, titles, or footnotes, among others.
The key benefit of setting your font sizes and weights through these categories is that your text will adjust accordingly when the accessibility settings are changed. If your users decide to increase the font size, each category will increase proportionally to match the selected system setting. Otherwise, if you set fixed values for your font size, your users won’t be able to benefit from that feature.
Customizing dynamic types
Default dynamic sizes have pre-determined font sizes and weights that make sense for each category. However, this does not mean we cannot customize our own if we want to change the default font, size or weight for a given dynamic type.
In our case, we want to perform small changes to the sizes of each text style, and have it available in different weights (regular and bold). Style Dictionary also allows for generating custom font style code, but again, the default behavior does not exactly match our needs; therefore, we decided to extend its functionality with a custom plugin that uses a Handlebars template:
This creates an extension on UIFont that computes a font for a given text style, applying our customized size and weight for such style. An example of the generated code looks like:
The extension on UIFont allows us to easily use it to programatically assign a font to any UIKit component, such as a UILabel:
Conclusions
Following the approach we described in the previous post about colors, we are able to generate all custom font styles we need in our iOS application, from a description provided by our designers using Figma. It results in a nice extension of UIFont that maintains the same benefits regarding accessibility and responsive design, while having a nice API to consume.
Did you like what we are doing? Do you want to join us, and help us shape up the future of GoodNotes? We are hiring!
This article was written by:
Tomás Ruiz-López is a Senior Software Engineer working in the iOS team at GoodNotes. He enjoys learning new technologies in the Apple ecosystem and looking at them from the prism of Functional Programming. He has developed several open source projects related to the Bow library, an attempt to bring FP concepts into Swift.
