Picchu

Hit target

Guidance

The hit/touch target refers to the size of click/touch elements (i.e. icons, buttons, images, thumbnails, menus). In general, ensure click/touch elements are 44px X 44px.

Defining the minimum hot zone makes content more accessible in all circumstances. Reasonably sized touch targets are especially important for users with motor skill challenges as well as users navigating an experience by touch screen. Since our websites are responsive and touch devices come in all sizes (from the 84" Surface Hub down to 4" smartphones), the proximity and size of clickable elements is an important factor for optimum usability.

Ensure that clickable/touchable elements are 44px X 44px and that the entire element is hot (clickable/touchable). In the case of form fields or link lists using smaller than 18px font size, a hit target of 32px is acceptible (see link list section below).

In the case of link lists that appear in body copy, footers, etc. ensure proper spacing between links for an optimum experience that works well in both click and touch scenarios. Provided that only the link words are hot, ensure a padded container of 32-44px vertical height centered around each list item. The below recommendations per font will assist you in achieving that minimum.

Font size Container height (also PSD leading)
13px 32px
15px 37px
18px 44px

Demo

See the Pen Hit Target Demo by Microsoft.com (@microsoft) on CodePen.