iOS Typography design system in Swift: Dynamic Font Scaling

iOS Typography design system for Swift: Dynamic Font Size Scaling
image by Miloskiy

Most mobile products face the same problem: how to make design work well on all device screen sizes. Auto-layouts resolve the problem by scaling views with different screen sizes, but what about fonts? Have you seen at least once how ugly can be combination of scaled views and static font sizes for instance on iPhone SE (of course, we all are waiting to drop its support)? Ugh! Besides, what will your designer say when you show him/her this? I guess you already know the answer.
Therefore, the point is how to scale the font size depending on the screen size of the device.
Back to Design System topic check my previous article about Basic typography design system using Swift ☺️

Create own Font Style parts

Apple-designed typefaces support an extensive range of weights, sizes, and styles. But what if you have different needs than Apple? Or want to use your custom font sizes and weights?

So in case if you want to have flexible size and weight values of font, define custom Font Style parts up to yours needs:

Dynamic font scaling based on screen size

When your typography management is centralized in one place it is easier to implement dynamic font scaling. In example below I assumed that you use custom Font Style parts (if not, replace CustomWeight on standard UIFont.Weight)

For calculation of scale factor you need to know the most popular screen size of your app (or original design size). I prefer to rely on screen width because it got less variations than height.

In most cases it will be either 375 (iPhones 6(s), 7(s), 8(s), X, XS, 11…) either 414 (iPhones 6(s) plus, 7(s) plus, 8(s) plus, XR, XS Max, 11 Max…).

In any case, make sure that all your font styles after scaling are easy to read, even with the small size of the device. Otherwise, font will not be legible and readable. For instance, Apple does not recommend using a font size of less than 10pt (used only for the TabBar titles).

For this purposes I added minScaleFactor, because I use original point size 13pt and larger, and even on iPhoneSE the bodyS becomes 12pt.

Another way to control autoscaling is to add var doesSupportMinScalling: Bool { rawValue > Size.bodyM.rawValue } property to Size enum (to specify readability bounds).

Thanks for the reading. I hope you are inspired from Typography design system for Swift article and now ready to act 🍏
Full code version can be found over at GitHub.

Feel free to text: LinkedIn, Facebook, Instagram.