Accessibility: Bold Text with custom fonts
Apple guidelines
As Apple is stating in its guidelines:
Ensure that your app responds correctly and looks good when users enable bold text. People turn on the bold text accessibility setting to make text and glyphs easier to see. In response, your app should make all text bolder and give all glyphs an increased stroke weight.
Using custom fonts, we need to add support for Bold Text functionality. It can be enabled by the user on his phone via Settings → Accessibility → Display & Text Size → Bold Text.
Statistics
How many users are using Bold Text Accessibility functionality?
In the Immoweb iOS app, it has been over a year since we started recording statistics about which accessibility features are used by our users.
Immoweb is one of the biggest Belgian apps (and is mostly used in Belgium)
If we look specifically at users using the Bold Text functionality, we can see it represents 6.3% of our audience which is not negligible.
Solution
In our previous article, we extended UIFont
with 2 static functions to build fonts based on our custom FontStyle
s. It looked like this:
We can iterate on this solution to support bold fonts:
Here we are:
- Checking if Bold Text functionality is enabled through
UIAccessibility.isBoldTextEnabled
variable (note that since iOS 13 you can also checkUITraitCollection.legibilityWeight
) - Adding the
.traitBold
trait to our fontdescriptor
Going further
If we take another look at the example provided by Apple we can see that even bold texts are getting bolder.
The problem with our solution above is that it will set regular fonts to bold but bold fonts will stay bold. While they should become black (if your custom font supports this variant, of course).
A way we could handle this is by mapping each font to its bold equivalent. For example:
- Montserrat-Regular → Montserrat-Bold
- Montserrat-Italic → Montserrat-BoldItalic
- Montserrat-Bold → Montserrat-Black
- Montserrat-BoldItalic → Montserrat-BlackItalic
Thank you for reading.
Together, we’ll make Accessibility great again! 💪
Resources
- Previous article — Dynamic Type: Scaling Custom Fonts
- Text size and weight — Apple Human Interface Guidelines
Other articles of the “Dynamic Type” series
Special thanks to Vincent Martin for proofreading this article 🙏