Beautifully-formatted Times and Numbers

Example of rendered proportional numbers and monospaced numbers

Example of rendered proportional numbers and monospaced numbers

Not all font instances are created equally! In iOS text is mostly displayed using proportional fonts, meaning each character width is trimmed and varies depending on each character. This makes the text easier to read and feel more natural and you’ll notice this on characters such as ‘i’ which will often be the thinnest character compared to say an ‘m’ character. However for numbers displayed in a tabular format such as times, figures and currencies you’ll want monospaced characters so you can tidy up the layout and visually scan the data quickly. So how do you do this?
Continue reading

Custom fonts on iPad and iPhone

Just incase you didn’t realise, with iOS 3.2 (iPad) and above you can load in custom fonts and use them with a standard UIFont object. There are a few catches… The font must be in the following format: –

  • OpenType Format (OTF)
  • TrueType Format (TTF)

Once you’ve dragged your chosen font file into an Xcode project, the next step is to add a line into the application’s Info.plist file. Add a new key UIAppFonts and make it an array. Expand the array and add a new string for each font, making the string the file’s full name including an extension.

Xcode Screenshot

You’re all set up now to use the font. That would be great if you knew which font it was! Here is a great little snippet for looping through all the fonts loaded into the system. Scan through the list and find your font.

Objective-C:

// Get all the fonts on the system
NSArray *familyNames = [UIFont familyNames];
for( NSString *familyName in familyNames ){
	printf( "Family: %s \n", [familyName UTF8String] );
	NSArray *fontNames = [UIFont fontNamesForFamilyName:familyName];
	for( NSString *fontName in fontNames ){
		printf( "\tFont: %s \n", [fontName UTF8String] );
	}
}

Swift:


// Get all the fonts on the system
UIFont.familyNames.forEach { familyName in
    print("Family: \(familyName)")
    UIFont.fontNames(forFamilyName: familyName).forEach { fontName in
        print("\tFont: \(fontName)")
    }
}

To use your font now, just use the standard UIFont constructor…

Objective-C:

self.titleLabel.font = [UIFont fontWithName:@"Inkpen Medium" size:31.0];

Swift:


self.titleLabel.font = UIFont(name: "Inkpen Medium", size: 31.0)

Some points to note: –

  • You can also use the font inside UIWebViews.
  • Interface Builder for XCode 3.2 has a bug that won’t let you choose the font. You have to do it in code.
  • Loading in too many fonts will slow your loading time down and will hurt your users’ eyes.