Tap Swipe Pinch

The embossed text effect is a subtle, but key detail in creating the ‘iPhone look’ for your app’s UI.  In fact, you will see this effect in every single one of Apple’s apps that ships with the iPhone.

If you’re not familiar with the term ‘embossed text’ open the Clock app and tap the Alarm button.  Notice how the word ‘Alarm’ appears to be embedded in the Navigation Bar so that if you could somehow reach inside the screen and run your finger over this word, your fingers would feel the outline of the letters.  If you have an alarm set, you can also see the same effect on the outline of the alarm time.  The effect is the same in each case, but the execution is different.  Where the effect on the word ‘Alarm’ is a dark shadow positioned slightly above the letters, the effect on the numbers is produced by a glare outline on the lower edges of the outline of each number.

This effect can be simple to achieve in Photoshop or your favorite image editor when designing your app UI.  But creating it in Interface Builder gives you several advantages:  flexibility to easily change this part of the app design without having to involve a designer, a smaller app package (in some cases), the ability for the code to change the text anytime during runtime, and you get the added benefit of high-res rendering on Retina displays without having to worry about @2x versions of textual images.

The effect is also easy to apply in Interface Builder.  Fire up IB and add a dark text label to a non-white background. 



Select the label and change the shadow to a white color.  Then change the V. Offset setting to positive 1.  This will position a white “shadow” one pixel below the text making it appear as though light is glaring off the lower edges of the text border and creating the illusion that the text is embedded into the background. 

You can take the illusion one step further by reducing the opacity of the text.  This will produce a subtle black shadow at the top of the characters due to the white “shadow” behind the text brightening the opaque letters everywhere except top 1 pixel.



And there you have it.  The effect can similarly be produced with white or light-colored letters.  To do this, instead of using a white shadow with a vertical offset of +1, you would use a black shadow with a vertical offset of -1.  Is this effect subtle?  Yes. Very.  But attention to a subtle detail like this is extremely important in crafting the perfect UI for your app.