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
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.
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.