How would I create a UIButton with two lines of text and the first line of text being larger than the second?

Question

Basically, I want a button that looks like this as the end result:

Where the button spans two lines, and the top line is of larger font-size. In this picture the top is 38pt and the bottom is 24pt.

I'm aware this would be a task for NSAttributedString, but I'm having trouble figuring out how to do it correctly. I have a UIButton in my storyboard with the text set to attributed (and line break set to word wrap), then an outlet where in viewDidLoad I do the following:

UIFont *font = [UIFont systemFontOfSize:39.0];
UIFont *font2= [UIFont systemFontOfSize:17.0];

NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"625 WPM"];
[string addAttribute:NSFontAttributeName value:font range:NSMakeRange(0, string.length)];
[string addAttribute:NSFontAttributeName value:font2 range:NSMakeRange(string.length - 2, 2)];

self.button.titleLabel.attributedText = string;

Basically I give everything a large font, then for the last few letters I make it smaller. But it simply comes out looking bold.

What am I doing wrong?

Answer 1

the titleLabel of a UIButton is not accessible in the same ways a standalone UILabel is. You'll want to use UIButton's setAttributedTitle:forState: method.

edit: (adding to answer line spacing question)

in this example, the attribute is NSParagraphStyleAttributeName and the value is pStyle

NSMutableParagraphStyle *pStyle = [[NSMutableParagraphStyle alloc] init];
pStyle.lineSpacing = 8;

return @{
          NSParagraphStyleAttributeName : pStyle
          };