But just how big is big enough when it comes to iPhone tap targets? Well, what's the size of a fingertip? Apple pegs it precisely at 44 pixels and this measure appears reliably throughout the standard iPhone controls. In portrait orientation, 44 pixels is the height of buttons in the Calculator app, of the keys of the iPhone's virtual keyboard, of items in a standard list display, of the screen-topping navigation bar, and the list goes on. (With the iPhone's 163 ppi screen resolution, 44 pixels is about 7mm, or just a hair over ¼ inch.)
The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable. Put another way, it's the spread of a fingertip pressed to the screen. By building its standard controls in proportion to that measure, Apple created a device that's not only built for the hand, but of the hand—measured out in finger-sized units. (In fact, it's wise to craft your overall design to a 44-pixel rhythm, a topic you'll explore in Design to a 44-Pixel Rhythm.)
Ideally, any button or other tap target should be at least 44 × 44 pixels. That doesn't necessarily mean that what you see—the outline of the button itself—has to spread over that entire area. Buttons inside the standard navigation bar, for example, are only 29 pixels high, but their tap area extends to the full 44-pixel height of the navigation bar. Even if you tap just above or below the button, it still catches the tap as long as you're still inside the navigation bar. Likewise, taps immediately to the left or right are treated as taps on the button itself. Even though the button is visually smaller, its tappable footprint honors the 44-pixel minimum, making the button effectively larger than its outline suggests.
Figure 3-8. Buttons in screen-topping navigation bars (left) have tap areas much larger than their visual footprint. The active tap areas are outlined in red here and span the entire height of the navigation bar, reaching horizontally to the title text. Similarly, icons in screen-bottom tab bars (right) have tap areas that extend several pixels above the tab bar's visible outline.
Apple helps you get this right by providing a whole stable of standard controls that stick to this standard height (you'll explore these built-in views and controls in the next two chapters). When you use Apple's prefab navigation bar, toolbar, or keyboard in your app, its controls automatically use these finger-friendly dimensions. It's only when you start working with custom button sizes and other home-brew controls that you'll need to start counting pixels to make sure you hit the 44-pixel threshold.
As in most things, compromise is sometimes necessary. Even the iPhone's standard controls fudge the 44-pixel rule from time to time. In the keyboard, for example, keys are 44 pixels tall but only 30 pixels wide—similarly, in landscape view, the buttons are 44 pixels wide but 38 pixels high. Apple doesn't have much choice here; it's crucial to include the full QWERTY keyboard in this view, but all the keys just won't fit as 44 × 44 buttons. Something's gotta give. When limited space puts the squeeze on tap targets, here's the rule I've found works best: as long as a tap target is at least 44 pixels high or wide, you can squeeze the other dimension as small as 30 pixels if you really must (these are the same dimensions as a keyboard key). That means, the practical minimum size for any tap target is 44 × 30.