Handling Fonts in iOS Development, a Simpler Way
Prologue:
I started writing blog post on Medium with Network reachability status monitoring on iOS, Part 1 and Part2. The total number of recommendations did not cross 15 for these two even after two and half months. I was not a happy guy after all 😞.
It was last day of 2016, I decided to write A Smart Way to Manage Colour Schemes for iOS Application Development to say a good bye to the most eventful year, 2016 of my life. I started composing the blog at 11 pm on 30th, and finally finished it in the next morning.
Since then, it has been viewed for more than 1790 times, readers completed reading this article for more that 811 times and finally it got recommended for 76 times and still counting. So all these statistics just amazed me. It’s my turn to thank you all and wish you a Happy New Year.
In my last blog, I promised to write an another one to handle fonts in an iOS application development more efficiently. It’s time to dig a little bit deeper ⛏.
So fonts play a great role in your application:
Always it’s not the performance, not the colour scheme, neither the feature images nor the best marketing, fonts plays a great role in association with all other key factors. Choosing a good font with respect to the colour scheme and UI Theme is also a great task for your designer.
Yet another story in your team:
You are working for a reputed firm. You are member of a team of 10 iOS developers. The development process is almost complete, your team is waiting for final approval from the client to submit the app in App Store for final review.
Finally the approval came (😆)only with a minor change request to increase the font size of each label by one point only(🙄), as because they are also targeting users aged in between 55–60 years. This is an easy task, just the font sizes are to be increased on every 47 screens (😕). You were assigned the task (☹️).
In the next 2 hours you would have found that each label and text field’s font has been assigned either by using storyboard font attribute or by UIKit’s UIFont(name:size:) initialiser (😭). The 3 word phase may come to your lip (👺), but it time not to utter it too loudly (🤐).
Not to face the scenario once again, you must have a strong strategy, a future proof architecture (🗽). This must be able to handle the followings-
- Your app needs to supports dynamic font family according to the user preference.
- Your client wish to have two different prototypes of the app, each one containing a single font family throughout the application.
- You may be asked to increase or decrease the font size by some points.
Recap, Custom Font in Xcode Project:
Before we start our journey to make usage of fonts easier, a brief recap on how to use custom fonts.
Step1:
Get the font bundle from the designer team. For my example project, I downloaded Roboto font family from 1001fonts. Drag and drop it to the resource folder to your project.
Step2.
List down all these fonts in your project’s Info.plist file under the key Fonts provided by application (UIAppFonts).
Step3:
Make sure all these newly added fonts are logged with Utility.logAllAvailableFonts() method. Note down all the listed fonts from debug console, we need to play with them.
How we will solve that?
Before we start coding, let’s start thinking to solve the problem. How we normally create a font? We use initializer UIFont(name:size:). To avoid the problems specified above, we will be controlling them from a central place. And to avoid problems with hard coded values (font name and size), we will need to follow a type safe way with two separate enums, one for font type, another for it’s size.
On your marks, ready, steady and code:
Here we can see two enums, first one FontName is used to handle all custom fonts which are added in the app bundle. On the other side, StandardSize tries to standardize font sizes to be used within an application.
enums, enums:
Wait, I have a problem🤔:
We all have this guy in our team man !!!. What if ze wants to use the inbuilt system font? What if ze wants a custom size ( say 25.0 ) of the font? Well, you can show zer following two enums.
With the help of FontType enum, now ze can mention a system font, an externally installed font or even a String literals which is to be used to create font directly from UIFont(name:size). The FontSize enum is a simpler one with only two cases. Case standard is to be used while ze specify a standard size ( h1, h2, …, h6). The other one, custom will be used to collect custom font size as Double.
Let’s wrap them up:
As there are two values (font name and size) to be considered at a time, let’s wrap all these enums within a struct Font.
- Struct Font has have two properties, one type of FontType and another one is size, FontSize. It will specify the size of the font.
- I have removed the argument label from it’s initializer to make the initialization process more concise and readable.
Wait, where is my font?
This time ze is right, we have not added any mechanism to create our final product i.e. an UIFont. Let’s do it now with the following extension of struct Font.
Usages:
The direct of usages of UIFont(name:size:) seems to be a little bit concise here.
But in the long run, I will rather like to use the following syntax as it provides better architecture, type safety and less maintainance overhead.
Epilogue:
You will find the full source code of this blog on GitHub. Please don’t forget to recommend or bookmark this blog if you like it 😎.
Promotions:
Don’t forget to read my other blogs😏.
