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",

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.

Erik van der Wal

Erik van der Wal

I love building things with Swift, Objective-C, Ruby and tinkering with technologies like Golang and Elixir.

  • The Netherlands
comments powered by Disqus