Today every highly qualified team with streamlined design processes should have its own design system, which includes Colors, Typography, Icons etc.
So, in this article I’ll show you how to make the basic typography design system in iOS app using Swift.
Last updated: 10.03.2020 | added accessibility support |
Why do you need typography design system?
Consistency
Every modern company has a typography system (set of predefined text styles) that’s used across different platforms or within one platform to provide consistent experience to its users. It’s much easier for user to process 6-7 same text styles that create visual hierarchy on the screen in order for them to understand key parts of the content.
Scalability
Nothing is constant in this world, and text styles are not exception. At some point, your designer might come up with a genius idea to make all H1s across the app 28pt instead of 26pt or change the font family from San Francisco to Time New Roman. If you have a complex app, this will require you to go over storyboards and classes and manually change them. This is simply not scalable.
So, it’s better to have a centralised place where all font management happens. This management should be scalable and easy to understand for new teammates of any professional level.
Text style structure
There are a few main components in text style:
- Text family
- Text weight (styling)
- Text size
- Line height (optional)
- Color (optional)
The first three are the most important, so let’s focus on them.
If you open Storyboard, you can easily spot these three components:
By combining these three components, you can create a set of reusable text styles for your app. Usually, it’s done by the designer and there are six or seven different text styles used throughout the app.
For example, in our project, we have Header 1, Header 2, Header 3, Body L, Body M, Body S.
I would suggest you align with the designer on naming and use the same names as they use in designs. This will simplify your communication and keep you on the same wavelength.
Create the Font Manager
It’s time to go to the point.
First of all, create a file where you’ll manage your fonts (for example: FontManager).
To avoid confusion with the string values of the Font names, create enums for the font Family, Weight and Style.
The method described below returns the font name from the family and weight parameters.
stringName method provides you the option to list incompatible Font Family and Weight. (For example Inter has no Heavy Weight)
IMPORTANT: Before adding a new Font, check what Weights are available for this font family
UIFont.familyNames.map { UIFont.fontNames(forFamilyName: $0) }
Otherwise, you will get an exception or incorrect font for incompatible Font Families and Weights in the future.
It’s time to update your code and put everything together:
Furthermore, I added a default font family (in case you app should have only one). But sometime your app is required to support more than one Font Family.
Update for Swift UI
If you’re already started transitioning to SwiftUI, add the code above to bottom of the FontManager file:
Easy peasy!
Usage
To illustrate the simplicity of usage, check how easy it is to assign a new font to UIKit elements using Swift:
SwiftUI:
Optional improvement
Moreover, you can add your most-used font style in the UIFont extension (or Font extension for SwiftUI)
From iOS 13.0 on, Apple added Own typography system.
For using custom Own, override existing typography:
Recap
And lastly, in my case, the whole typography system near 70 lines!
Thanks for your time.
I hope you learned how to make the basic typography design system in iOS app using Swift from this piece.
You can download the gist from GitHub.
Check my previous articles how to create own custom xCode Template or iOS Localization Advices.
If you want to stop animal testing and want to see live implementation of this typography system you can check my app Cares