How to set kerning (spacing between characters) on UINavigationBar title - Swift or Objective-C

Question

I've got my nav bar mostly customized to my liking, but I'm trying to increase the kerning using NSKernAttributeName. I'm using the appearance proxy to set the nav bar to white text and a custom font, but when I try to add kerning it doesn't take effect.

[[UINavigationBar appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
                                                     [UIColor whiteColor], NSForegroundColorAttributeName,
                                                     [UIFont fontWithName:@"HelveticaNeue-Light" size:20.0], NSFontAttributeName,
                                                     [NSNumber numberWithFloat:2.0], NSKernAttributeName, nil]];

Do I need to do something else to add some of the less common attributes like kerning to the title label?

Answer 1

According to the documentation, the titleTextAttributes of UINavigationBar only lets you specify the font, text color, text shadow color, and text shadow offset.

If you want to use other attributes, you can create a UILabel with the NSAttributedString you want, and set it as the titleView for your controller's navigationItem

For example:

UILabel *titleLabel = [UILabel new];
NSDictionary *attributes = @{NSForegroundColorAttributeName: [UIColor whiteColor],
                             NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue-Light" size:20.0],
                             NSKernAttributeName: @2};
titleLabel.attributedText = [[NSAttributedString alloc] initWithString:self.navigationItem.title attributes:attributes];
[titleLabel sizeToFit];
self.navigationItem.titleView = titleLabel;

Answer 2

UIViewController Extension

I converted the above answers into a UIViewController extension to tidy it away.

Swift 3

extension UIViewController {
    func setUpCustomTitleView(kerning: CGFloat) {

        let titleLabel = UILabel()

        guard let customFont = UIFont(name: "Montserrat-SemiBold", size: 18) else { return }

        let attributes = [NSForegroundColorAttributeName: UIColor.gray,
                      NSFontAttributeName: customFont,
                      NSKernAttributeName: kerning] as [String : Any]

        guard let title = title else { return }

        let attributedTitle = NSAttributedString(string: title, attributes: attributes)

        titleLabel.attributedText = attributedTitle
        titleLabel.sizeToFit()
        navigationItem.titleView = titleLabel
    }
}

Call the extension function from the viewDidLoad() of your view controller.

setUpCustomTitleView(kerning: 2.0) 

Answer 3

I've tried many different ways to accomplish this and found that you can only change the font, text color, text shadow color, and text shadow offset of UINavigationBar as @Jesús A. Alvarez above have said.

I've converted the code in Swift and it works:

let titleLabel = UILabel()

let attributes: NSDictionary = [
    NSFontAttributeName:UIFont(name: "HelveticaNeue-Light", size: 20),
    NSForegroundColorAttributeName:UIColor.whiteColor(),
    NSKernAttributeName:CGFloat(2.0)
]

let attributedTitle = NSAttributedString(string: "UINavigationBar Title", attributes: attributes as? [String : AnyObject])

titleLabel.attributedText = attributedTitle
titleLabel.sizeToFit()
self.navigationItem.titleView = titleLabel

Answer 4

Above answer updated for Swift 4

I created a superclass, where I defined this method, which you can call from each subclass you want:

func setNavigationTitle(_ title: String, kern: CGFloat) {
    let titleLabel = UILabel()

    let attributes = [
        NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 18),
        NSAttributedStringKey.foregroundColor: UIColor.white,
        NSAttributedStringKey.kern: kern] as [NSAttributedStringKey : Any]

    let attributedTitle = NSAttributedString(string: title, attributes: attributes)

    titleLabel.attributedText = attributedTitle
    titleLabel.sizeToFit()
    self.navigationItem.titleView = titleLabel
}