Why does text in my UILabel look so blurry?

Of course there are a variety of reasons why you might end up with blurry text in a UILabel or elsewhere in your iOS app, but if you are computing the position of the text element (or its parent, or parent’s parent, etc.) one of the most common reasons is that you have managed to place your text at a fractional location instead of a clean integer coordinate. It is quite possible for apps experiencing this issue to have some lines of text that look perfectly clear and others that ruin your gorgeous interface with blurry, out-of-focus edges.

How did this happen?

Chances are that somewhere in your code you are computing the x, y coordinates of a frame that will contain text by dividing one value by another. This makes sense if you are trying to center one element within another, but it can leave you with coordinates like 1.358490566037, 23.789473684210 instead of 1,24. One solution is to check all of your frame-coordinate computing math and manually adjust it, but there is a much simpler solution.

How do I fix it?

Naturally you want crisp, clear, beautiful type throughout your app’s UI. No problem! The secret is to simply pass your CGRect frame through CGRectIntegral to convert any decimal values to their integer equivalents. Like so:

frame = CGRectIntegral(frame);

– or –

myTextView.frame = CGRectIntegral(myTextView.frame);

That’s it! The only thing you need to remember is that if you are frequently changing the size and position of your elements on the fly, and some of those elements contain text, you may need to keep up with cleaning your frames as you go by including this code at the point where you are making the change. Of course, during an animation sequence the blurry anti-aliasing will not be noticeable and may even be desirable. You just need to make sure that you always end up back at integer coordinates.

Like this post? Share it!