Accessibility setting that every App to support
Adapting apps to dynamic font settings.
Agenta
For various reasons such as age, visibility, avoiding eye strain most of mobile phone users keeps their phone font setting above or below standard size, So in this blog we will be seeing how to adapt dynamic font settings.
Where to find this settings ,
Settings > Accessibility > Display & Text Size > Larger text
Where user will be allowed to switch between 7 font sizes, On toggling “Large Accessibility Sizes” switch you will be given 12 size variants.
Technically these are the size variants,
.extraSmall:
.small:
.medium:
.large: (Default)
.extraLarge:
.extraExtraLarge:
.extraExtraExtraLarge:.accessibilityMedium:
.accessibilityLarge:
.accessibilityExtraLarge:
.accessibilityExtraExtraLarge:
.accessibilityExtraExtraExtraLarge:
Scaling of font,
To scale font of any UI component, we can set adjustsFontForContentSizeCategory property to true.
A Boolean that indicates whether the object automatically updates its font when the device’s content size category changes.
Supporting custom fonts
Setting the flag to true alone won’t help us to scale, when we where using custom font. Here comes saviour UIFontMetrics
A utility object for obtaining custom fonts that scale to support Dynamic Type.
Here is the expression for using font metrics,
UIFontMetrics(forTextStyle: <#T##TextStyle#>).scaledFont(for: <#T##UIFont#>)We can categories our UI component into 11 predefined TextStyle based on the font size and weight needed for our UI, The below table is for large font size, which is the default phone settings.
Referenced From: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#dynamic-type-sizes
Basic example of how to support dynamic font settings
Next we’ll be writing a proper extension, which will take TextStyle, Font name and Size as input parameters.
Which can be used as,
largeTitleLabel.font = UIFont.set(font: .regular, size: .large, style: .largeTitle)Output:
Supporting Bold Text,
Accessibility settings has additional option to make all fonts to be in Bold. To support this settings we need to update our setFont function a bit.
Run your sample, now you app will render all fonts in bold, but we have to observe changes on bold settings ON/OFF. For that add notification listener,
NotificationCenter.default.addObserver(self, selector: #selector(setFont), name: UIAccessibility.boldTextStatusDidChangeNotification, object: nil)Output:
Scaling of Images,
Same as font, icons also has be scaled depending on system accessibility settings.
Setting adjustsImageSizeForAccessibilityContentSizeCategory of UIButton or UIIMageView to true will do the job for us.
A Boolean value that indicates whether the image size increases to support accessibility content size categories.
Note: UIComponent should not have any fixed width or height constraint, which won’t all icon to scale.
Debugging
To debug we can use Environment Overrides options from top bar of debug view.
Found this post useful? Kindly tap the 👏 button below! :)
Leave you comments, queries and suggestions below.
