How to use a custom font with dynamic text sizes in iOS7
Behind the scenes of that API, apple has some sort of lookup table that returns a specific font family, size, and sometimes symbolic traits (like bold) that (e.g. UIFontTextStyleHeadline) and the user's preferred text size. The latter is a string pulled off of the sharedApplication like this:
[UIApplication sharedApplication].preferredContentSizeCategory;
(I logged out all the default sizes/fonts/traits for Helvetica-Neue for the various dynamic text sizes). We've since added handling for the accessibility sizes, which is important.
So all you really have to do is build a similar lookup table. Our designer created a simple spreadsheet for me:
Notice that we added a couple styles (caption 3 & 4) to have 8 instead of 6 to choose from.
Then you'll want to put it someplace convenient, like a category on UIFontDescriptor. You'll want your method to return a UIFontDescriptor like Apple's API, so that it's still easy to adjust with symbolic traits, etc.
My category looks like this:
UIFontDescriptor+AvenirNext.h
#import <UIKit/UIKit.h>
extern NSString *const ANUIFontTextStyleCaption3;
@interface UIFontDescriptor (AvenirNext)
+(UIFontDescriptor *)preferredAvenirNextFontDescriptorWithTextStyle:(NSString *)style;
@end
UIFontDescriptor+AvenirNext.m
#import "UIFontDescriptor+AvenirNext.h"
NSString *const ANUIFontTextStyleCaption3 = @"ANUIFontTextStyleCaption3";
NSString *const ANUIFontTextStyleCaption4 = @"ANUIFontTextStyleCaption4";
@implementation UIFontDescriptor (AvenirNext)
+(UIFontDescriptor *)preferredAvenirNextFontDescriptorWithTextStyle:(NSString *)style {
static dispatch_once_t onceToken;
static NSDictionary *fontSizeTable;
dispatch_once(&onceToken, ^{
fontSizeTable = @{
UIFontTextStyleHeadline: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @26,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @25,
UIContentSizeCategoryAccessibilityExtraLarge: @24,
UIContentSizeCategoryAccessibilityLarge: @24,
UIContentSizeCategoryAccessibilityMedium: @23,
UIContentSizeCategoryExtraExtraExtraLarge: @23,
UIContentSizeCategoryExtraExtraLarge: @22,
UIContentSizeCategoryExtraLarge: @21,
UIContentSizeCategoryLarge: @20,
UIContentSizeCategoryMedium: @19,
UIContentSizeCategorySmall: @18,
UIContentSizeCategoryExtraSmall: @17,},
UIFontTextStyleSubheadline: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @24,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @23,
UIContentSizeCategoryAccessibilityExtraLarge: @22,
UIContentSizeCategoryAccessibilityLarge: @22,
UIContentSizeCategoryAccessibilityMedium: @21,
UIContentSizeCategoryExtraExtraExtraLarge: @21,
UIContentSizeCategoryExtraExtraLarge: @20,
UIContentSizeCategoryExtraLarge: @19,
UIContentSizeCategoryLarge: @18,
UIContentSizeCategoryMedium: @17,
UIContentSizeCategorySmall: @16,
UIContentSizeCategoryExtraSmall: @15,},
UIFontTextStyleBody: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @21,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @20,
UIContentSizeCategoryAccessibilityExtraLarge: @19,
UIContentSizeCategoryAccessibilityLarge: @19,
UIContentSizeCategoryAccessibilityMedium: @18,
UIContentSizeCategoryExtraExtraExtraLarge: @18,
UIContentSizeCategoryExtraExtraLarge: @17,
UIContentSizeCategoryExtraLarge: @16,
UIContentSizeCategoryLarge: @15,
UIContentSizeCategoryMedium: @14,
UIContentSizeCategorySmall: @13,
UIContentSizeCategoryExtraSmall: @12,},
UIFontTextStyleCaption1: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @19,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @18,
UIContentSizeCategoryAccessibilityExtraLarge: @17,
UIContentSizeCategoryAccessibilityLarge: @17,
UIContentSizeCategoryAccessibilityMedium: @16,
UIContentSizeCategoryExtraExtraExtraLarge: @16,
UIContentSizeCategoryExtraExtraLarge: @16,
UIContentSizeCategoryExtraLarge: @15,
UIContentSizeCategoryLarge: @14,
UIContentSizeCategoryMedium: @13,
UIContentSizeCategorySmall: @12,
UIContentSizeCategoryExtraSmall: @12,},
UIFontTextStyleCaption2: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @18,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @17,
UIContentSizeCategoryAccessibilityExtraLarge: @16,
UIContentSizeCategoryAccessibilityLarge: @16,
UIContentSizeCategoryAccessibilityMedium: @15,
UIContentSizeCategoryExtraExtraExtraLarge: @15,
UIContentSizeCategoryExtraExtraLarge: @14,
UIContentSizeCategoryExtraLarge: @14,
UIContentSizeCategoryLarge: @13,
UIContentSizeCategoryMedium: @12,
UIContentSizeCategorySmall: @12,
UIContentSizeCategoryExtraSmall: @11,},
ANUIFontTextStyleCaption3: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @17,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @16,
UIContentSizeCategoryAccessibilityExtraLarge: @15,
UIContentSizeCategoryAccessibilityLarge: @15,
UIContentSizeCategoryAccessibilityMedium: @14,
UIContentSizeCategoryExtraExtraExtraLarge: @14,
UIContentSizeCategoryExtraExtraLarge: @13,
UIContentSizeCategoryExtraLarge: @12,
UIContentSizeCategoryLarge: @12,
UIContentSizeCategoryMedium: @12,
UIContentSizeCategorySmall: @11,
UIContentSizeCategoryExtraSmall: @10,},
UIFontTextStyleFootnote: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @16,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @15,
UIContentSizeCategoryAccessibilityExtraLarge: @14,
UIContentSizeCategoryAccessibilityLarge: @14,
UIContentSizeCategoryAccessibilityMedium: @13,
UIContentSizeCategoryExtraExtraExtraLarge: @13,
UIContentSizeCategoryExtraExtraLarge: @12,
UIContentSizeCategoryExtraLarge: @12,
UIContentSizeCategoryLarge: @11,
UIContentSizeCategoryMedium: @11,
UIContentSizeCategorySmall: @10,
UIContentSizeCategoryExtraSmall: @10,},
ANUIFontTextStyleCaption4: @{
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: @15,
UIContentSizeCategoryAccessibilityExtraExtraLarge: @14,
UIContentSizeCategoryAccessibilityExtraLarge: @13,
UIContentSizeCategoryAccessibilityLarge: @13,
UIContentSizeCategoryAccessibilityMedium: @12,
UIContentSizeCategoryExtraExtraExtraLarge: @12,
UIContentSizeCategoryExtraExtraLarge: @11,
UIContentSizeCategoryExtraLarge: @11,
UIContentSizeCategoryLarge: @10,
UIContentSizeCategoryMedium: @10,
UIContentSizeCategorySmall: @9,
UIContentSizeCategoryExtraSmall: @9,},
};
});
NSString *contentSize = [UIApplication sharedApplication].preferredContentSizeCategory;
return [UIFontDescriptor fontDescriptorWithName:[self preferredFontName] size:((NSNumber *)fontSizeTable[style][contentSize]).floatValue];
}
+(UIFontDescriptor *)preferredAvenirNextDemiBoldFontDescriptorWithTextStyle:(NSString *)style {
return [[self preferredAvenirNextFontDescriptorWithTextStyle:style] fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
}
+(UIFontDescriptor *)preferredAvenirNextBoldFontDescriptorWithTextStyle:(NSString *)style {
return [UIFontDescriptor fontDescriptorWithName:[self preferredBoldFontName] size:[self preferredAvenirNextFontDescriptorWithTextStyle:style].pointSize];
}
+(NSString *)preferredFontName {
return @"AvenirNext-Medium";
}
+(NSString *)preferredBoldFontName {
return @"AvenirNext-Bold";
}
@end
We chose to use the same base font AvenirNext-Medium, and then bold and such via symbolic traits, but you could get crazy and specify different weight variants on your font as part of your lookup table as well if you wanted, like AvenirNext-ExtraBold.
That's all there is to it! We use it like this:
[UIFont fontWithDescriptor:[UIFontDescriptor preferredAvenirNextFontDescriptorWithTextStyle:UIFontTextStyleHeadline] size: 0]
This is how I do it in Swift. I like this because it's more general, it only requires one table, and it should work well with any font. First I wrote a generalized multiplier (in a getter).
var fontSizeMultiplier : CGFloat {
get {
switch UIApplication.sharedApplication().preferredContentSizeCategory {
case UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: return 23 / 16
case UIContentSizeCategoryAccessibilityExtraExtraLarge: return 22 / 16
case UIContentSizeCategoryAccessibilityExtraLarge: return 21 / 16
case UIContentSizeCategoryAccessibilityLarge: return 20 / 16
case UIContentSizeCategoryAccessibilityMedium: return 19 / 16
case UIContentSizeCategoryExtraExtraExtraLarge: return 19 / 16
case UIContentSizeCategoryExtraExtraLarge: return 18 / 16
case UIContentSizeCategoryExtraLarge: return 17 / 16
case UIContentSizeCategoryLarge: return 1.0
case UIContentSizeCategoryMedium: return 15 / 16
case UIContentSizeCategorySmall: return 14 / 16
case UIContentSizeCategoryExtraSmall: return 13 / 16
default: return 1.0
}
}
}
Then I update the font (e.g., in the observer) using a UIFontDescriptor like this:
textView.font = UIFont(descriptor: fontDescriptor!, size: fontDescriptor!.pointSize * fontSizeMultiplier)
In iOS 11 UIFontMetrics class was introduced. Create a FontMetrics object for the text style that you're interested in. Then choose any font you want, sized for the standard dynamic type size. And then you can ask the FontMetrics object to scale that font given the user's current settings.
let bodyMetrics = UIFontMetrics(forTextStyle: .body)
let standardFont = ... // any font you want, for standard type size
let font = bodyMetrics.scaledFont(for: standardFont)
@Bob Spryn code rewritten with swift:
import UIKit
extension UIFontDescriptor {
private struct SubStruct {
static var preferredFontName: NSString = "OEMeodedPashutPro-Regular"
}
class func preferredDescriptor(textStyle: NSString) -> UIFontDescriptor {
struct Static {
static var onceToken : dispatch_once_t = 0
static var fontSizeTable : NSDictionary = NSDictionary()
}
dispatch_once(&Static.onceToken) {
Static.fontSizeTable = [
UIFontTextStyleHeadline: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 26,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 25,
UIContentSizeCategoryAccessibilityExtraLarge: 24,
UIContentSizeCategoryAccessibilityLarge: 24,
UIContentSizeCategoryAccessibilityMedium: 23,
UIContentSizeCategoryExtraExtraExtraLarge: 23,
UIContentSizeCategoryExtraExtraLarge: 22,
UIContentSizeCategoryExtraLarge: 21,
UIContentSizeCategoryLarge: 20,
UIContentSizeCategoryMedium: 19,
UIContentSizeCategorySmall: 18,
UIContentSizeCategoryExtraSmall: 17
],
UIFontTextStyleSubheadline: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 24,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 23,
UIContentSizeCategoryAccessibilityExtraLarge: 22,
UIContentSizeCategoryAccessibilityLarge: 22,
UIContentSizeCategoryAccessibilityMedium: 21,
UIContentSizeCategoryExtraExtraExtraLarge: 21,
UIContentSizeCategoryExtraExtraLarge: 20,
UIContentSizeCategoryExtraLarge: 19,
UIContentSizeCategoryLarge: 18,
UIContentSizeCategoryMedium: 17,
UIContentSizeCategorySmall: 16,
UIContentSizeCategoryExtraSmall: 15
],
UIFontTextStyleBody: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 21,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 20,
UIContentSizeCategoryAccessibilityExtraLarge: 19,
UIContentSizeCategoryAccessibilityLarge: 19,
UIContentSizeCategoryAccessibilityMedium: 18,
UIContentSizeCategoryExtraExtraExtraLarge: 18,
UIContentSizeCategoryExtraExtraLarge: 17,
UIContentSizeCategoryExtraLarge: 16,
UIContentSizeCategoryLarge: 15,
UIContentSizeCategoryMedium: 14,
UIContentSizeCategorySmall: 13,
UIContentSizeCategoryExtraSmall: 12
],
UIFontTextStyleCaption1: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 19,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 18,
UIContentSizeCategoryAccessibilityExtraLarge: 17,
UIContentSizeCategoryAccessibilityLarge: 17,
UIContentSizeCategoryAccessibilityMedium: 16,
UIContentSizeCategoryExtraExtraExtraLarge: 16,
UIContentSizeCategoryExtraExtraLarge: 16,
UIContentSizeCategoryExtraLarge: 15,
UIContentSizeCategoryLarge: 14,
UIContentSizeCategoryMedium: 13,
UIContentSizeCategorySmall: 12,
UIContentSizeCategoryExtraSmall: 12
],
UIFontTextStyleCaption2: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 18,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 17,
UIContentSizeCategoryAccessibilityExtraLarge: 16,
UIContentSizeCategoryAccessibilityLarge: 16,
UIContentSizeCategoryAccessibilityMedium: 15,
UIContentSizeCategoryExtraExtraExtraLarge: 15,
UIContentSizeCategoryExtraExtraLarge: 14,
UIContentSizeCategoryExtraLarge: 14,
UIContentSizeCategoryLarge: 13,
UIContentSizeCategoryMedium: 12,
UIContentSizeCategorySmall: 12,
UIContentSizeCategoryExtraSmall: 11
],
UIFontTextStyleFootnote: [
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge: 16,
UIContentSizeCategoryAccessibilityExtraExtraLarge: 15,
UIContentSizeCategoryAccessibilityExtraLarge: 14,
UIContentSizeCategoryAccessibilityLarge: 14,
UIContentSizeCategoryAccessibilityMedium: 13,
UIContentSizeCategoryExtraExtraExtraLarge: 13,
UIContentSizeCategoryExtraExtraLarge: 12,
UIContentSizeCategoryExtraLarge: 12,
UIContentSizeCategoryLarge: 11,
UIContentSizeCategoryMedium: 11,
UIContentSizeCategorySmall: 10,
UIContentSizeCategoryExtraSmall: 10
],
]
}
let contentSize = UIApplication.sharedApplication().preferredContentSizeCategory
let style = Static.fontSizeTable[textStyle] as NSDictionary
return UIFontDescriptor(name: SubStruct.preferredFontName, size: CGFloat((style[contentSize] as NSNumber).floatValue))
}
}
Usage:
UIFont(descriptor: UIFontDescriptor.preferredDescriptor(UIFontTextStyleBody), size: 0)