Can you spot the difference between these two layouts?

No? OK, let me zoom in to 200% and go to the area I’m talking about.

See it now? Nothing? Or yes? OK, let me make it really obvious.

In the first instance, the text is positioned in a way that does not feel aligned well with the button on the left. You can see that between the top of the 1st line text ascenders and the border of the button there is 2px of space, whereas the bottom line baseline is the same level as button bottom border. On the second image, we shift the text up by 1px, so that between the button top border and top line text ascender there is 1px, and between bottom line text baseline and button bottom border there is also 1px.

Does one pixel really matter?

You would be surprised how much more balanced the second version feels. The first version just feels broken and non-aligned on the device. Although there may be even better ways to do this layout, the second version feels much more complete, correct and better balanced. One pixel does matter.

Tech note

Unfortunately, the first version is what you get out-of-box with the iPhone SDK, if you simply try to have a UILabel as the custom title view of your UINavigationController and configure it to have 2 lines. If you set the height to 44 px (height of nav controller title view), this is what you get. You may try to be smart and set it to 43 px, thinking it will be anchored to top, but it’s not the case. It is anchored to bottom and still one pixel too low.

The fix to bump up the text by a pixel is to have a UIView as your custom title view, with the full 44px height. iPhone will respect this height. Inside this UIView, have a UILabel with 43px height and positioned at (0,0), i.e anchored at the top of UIView. iPhone won’t go inside your UIView to mess with the layout, and it will render correctly.

One great thing about this kind of custom UIView is that iPhone does a really great job with rendering the top view layout correctly from horizontal layout perspective. You can see that there is a “Back” button on the left, custom title view with arbitrary amount of text in the middle, and button on the right. iPhone automatically clips reasonable amounts of text from both the button label and title text, resizes the left button, and adds an ellipsis at the end of both texts. In the process, you can also see it clips the title view from left and right sides, so you do not need to worry about it, it all just works. Really well done in the SDK.

One small thing to keep in mind with the above setup is that you just need to set the autoresizing mask of the UILabel to UIViewAutoresizingMaskFlexibleWidth, so that it would get clipped and resized properly together with the enclosing UIView.