Using custom fonts with lining numbers on iOS

Using a custom font in your app can really improve it's look and feel. However, some fonts will render non-lining lowercase numbers by default. This works really well for regular text, but not so much when you're only using uppercase characters, as is often the case for header titles.

A lot of fonts also provide lining numbers, which do line up perfectly with uppercase text. The difference is clearly visible in the following image. The first label uses the non-lining lowercase numbers, whereas the second uses lining, uppercase numbers.

Using lining numbers inside your app is pretty straigtforward. You only need to construct a new UIFontDescriptor and tell it which case type to use for numbers. If you already have a UIFontDescriptor instance, you can opt to use fontDescriptorByAddingAttributes: instead.

Good ol' Objective-C

//#import <CoreText/SFNTLayoutTypes.h>

NSDictionary *uppercaseNumbersAttribs = @{  
    UIFontFeatureTypeIdentifierKey: @(kNumberCaseType),
    UIFontFeatureSelectorIdentifierKey: @(kUpperCaseNumbersSelector)
};

NSDictionary *fontAttribs = @{  
    UIFontDescriptorNameAttribute: @"Raleway-Medium",
    UIFontDescriptorFeatureSettingsAttribute:@[uppercaseNumbersAttribs]
};

UIFontDescriptor *descriptor = [[UIFontDescriptor alloc] initWithFontAttributes:fontAttribs];  
UIFont *titleFont = [UIFont fontWithDescriptor:descriptor size:18.0f];  

Shiny new Swift

let uppercaseAttribs = [  
    UIFontFeatureTypeIdentifierKey: kNumberCaseType,
    UIFontFeatureSelectorIdentifierKey: kUpperCaseNumbersSelector
]

let fontAttribs = [  
    UIFontDescriptorNameAttribute: "Raleway-Medium",
    UIFontDescriptorFeatureSettingsAttribute: [uppercaseAttribs]
]

let descriptor = UIFontDescriptor(fontAttributes: fontAttribs)  
let titleFont = UIFont(descriptor: descriptor, size: 18.0)  

Please note that I didn't actually run the Swift version. It should work though.