TypographyKit — An iOS Framework to help you support Dynamic Type and enable Visual Consistency

Dynamic Type is a feature in iOS that supports accessibility by allowing the user to change the font size used by the operating system and installed apps.

Supporting Dynamic Type in your iOS app has traditionally involved a fair amount of development work but in iOS 10 Apple introduced the adjustsFontForContentSizeCategory on UILabels, UITextFields and UITextViews which allows the font size to change on these UIKit elements without having to listen for a UIContentSizeCategoryDidChange notification — but only if you use the system font. If you wish to use a custom font, as is the case in many apps, you need to handle this yourself using the UIFontMetrics class.

TypographyKit improves on this by providing extensions for UIButtons, UILabels, UITextFields and UITextViews allowing you to support Dynamic Type without writing any additional code back to iOS 9.

For example, where you would usually set the text on a UILabel:

titleLabel.text = “My label text”

Use can TypographyKit’s UIKit additions:

titleLabel.text(“My label text”, style: .heading)

Or simply set the fontTextStyleName property in Interface Builder to the name of the font style you define saving you writing any code at all. Once done, your UIKit element will automatically support changes in the preferred font size including custom fonts back to iOS 9.

Defining a font style

In addition to helping you improve the accessibility of your app through supporting Dynamic Type, defining font styles helps to make your app visually consistent. Rather than having slightly variations of a font family at slightly different point sizes - using a defined font style ensures that the same font family and point size is used across every screen of your app.

In TypographyKit a font style is defined in the TypographyKit configuration file which may either be in JSON or property list format as follows:

“ui-font-text-styles”: {
“heading”: {
“font-name”: “Avenir-Medium”,
“point-size”: 36,
“text-color”: “blue-gem”,
“letter-case”: “regular”
},
“paragraph”: {
“font-name”: “Avenir-Medium”,
“point-size”: 16,
“text-color”: “blue-gem”,
“letter-case”: “regular”
}
}

The font name and point size properties are compulsory but the text color and letter case are optional properties which may be defined as needed. It is worth noting that the font size property defines the base point size i.e. the font size when the text size slider in iOS is at the default setting.

The TypographyKit configuration file can be included in your app bundle and will be detected automatically. Alternatively, your configuration file may be hosted remotely allowing you to update your settings without releasing a new build of your app — simply set the `TypographyKit.configurationURL` property.

See here for sample TypographyKit.json and TypographyKit.plist files.

Defining colors

TypographyKit also supports visual consistency by allowing you to define a color palette for your app in your configuration file:

“typography-colors”: {
“blue-gem”: “#2C0E8C”
}

Once you’ve defined the color palette you can host your configuration file remotely to allow your palette to be updated at a later point in time, or using the color names as part of your font styles:

“ui-font-text-styles”: {
“heading”: {
“font-name”: “Avenir-Medium”,
“point-size”: 36,
“text-color”: “blue-gem”,
“letter-case”: “regular”
}
}

Using Palette for TypographyKit you can even make use of your color palette in Interface Builder.

Summary

TypographyKit helps your app by:

- Providing CSS for apps (by defining your text styles and colors in a configuration file which optionally may be remotely hosted)
- Making your app visually consistent across screens
- Allowing your app to support Dynamic Type back to iOS 9
- Supporting changes in preferred font size on UIButtons
- Supporting Dynamic Type where using attributed text, not just regular strings
- Updating your font styles and colors remotely
- Allowing you to use the same colors programmatically and in Interface Builder using Palette for TypographyKit

More information on TypographyKit can be found over at GitHub.