{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "Remember that we navigate mobile sites using our fingers |Digital.gov",
    "description": "Remember that we navigate mobile sites using our fingers",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/tap-targets/index.json","item" : [
    {"title" :"Remember that we navigate mobile sites using our fingers","summary" : "Week three of our series covers how to size fonts and other tap targets, like links.","date" : "2018-11-26T10:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","primary_image" : { "uid" : "guide-mobile-principles", "alt" :
  "Vector illustration of a mobile phone", "width" :
  "1200", "height" :
  "630", "credit" :
  "Irina_Strelnikova/iStock via Getty Images", "caption" :
  "", "format" :
  "png" },"branch" : "bc-archive-content-3",
      "filename" :"principles-tap-targets.md",
      
      "filepath" :"guides/mobile-principles/principles-tap-targets.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/mobile-principles/principles-tap-targets.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/mobile-principles/principles-tap-targets.md","slug" : "tap-targets","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/mobile-principles/tap-targets/","aliases" : {"0" : "/resources/mobile/principles/tap-targets"},"content" :"\u003cp\u003eThis week we will focus on font sizes and tap targets that are too small to be used on a mobile device. The following are two solutions to help prevent incorrect sizing and placement of objects on a site that may lead to mobile unfriendliness.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eUse Legible Font Sizes\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSize Your Tap Targets Appropriately\u003c/strong\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eSmall font sizes and inappropriately sized tap targets may negatively impact the usability of your site and can be detected using Google\u0026rsquo;s \u003ca href=\"https://search.google.com/test/mobile-friendly\"\u003eMobile Friendly Test\u003c/a\u003e tool, \u003ca href=\"https://www.digitaldashboard.gov/\"\u003eDigitalDashboard.gov\u003c/a\u003e, and the \u003ca href=\"https://itif.org/publications/2017/03/08/benchmarking-us-government-websites\"\u003eInformation Technology \u0026amp; Innovation Foundation (ITIF) Benchmarking Report\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThe rest of this article details these two preventable usability issues related to sizing and placement of objects.\u003c/p\u003e\n\u003ch2 id=\"use-legible-font-sizes\"\u003eUse Legible Font Sizes\u003c/h2\u003e\n\u003ch3 id=\"issue-when-viewed-on-a-mobile-device-the-font-size-is-too-small-to-read\"\u003eIssue: When viewed on a mobile device, the font size is too small to read.\u003c/h3\u003e\n\u003cp\u003eWhen reading text on a mobile device, a font size smaller than 12 points may be challenging to read, and often forces the reader to zoom by pinching and stretching the screen to comfortably read the text. To add to the complexity, web font size may be specified in \u003ca href=\"https://www.youtube.com/watch?v=qrduUUdxBSY\u0026amp;t=21\"\u003ea variety of units\u003c/a\u003e, including:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ePixels (px) – vary depending on the device size. CSS spec allows 2 interpretations of CSS px unit:\n\u003col\u003e\n\u003cli\u003eA pixel is 1/96 of a inch (0.2645 mm) (for web designers, think of this as designing for 96 DPI desktop monitor).\u003c/li\u003e\n\u003cli\u003eA CSS Pixel is a “reference pixel”. A “reference pixel” has a visual angle of 0.0213 degrees.\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/li\u003e\n\u003cli\u003ePoints (pt) — .75 points is equal to 1 pixel\u003c/li\u003e\n\u003cli\u003eEMs (em) – Percentage of the font size being used. For example, if the \u003ccode\u003efont-size\u003c/code\u003e property of the document is set to 12pt, 1em is equal to 12pt. Ems are scalable in nature, so, 2em would equal \u003cstrong\u003e24pt\u003c/strong\u003e, .5em would equal \u003cstrong\u003e6pt\u003c/strong\u003e, and so on.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eAdditionally, the viewport affects how font is scaled. A page without a properly configured viewport is scaled down on mobile devices, which often results in the text being illegible because of the small size.\u003c/p\u003e\n\u003ch3 id=\"solution-select-an-appropriate-font-size\"\u003eSolution: Select an appropriate font size!\u003c/h3\u003e\n\u003cp\u003eThere is much more to fonts than meets the eye. The following are five things to remember when selecting and sizing your fonts.\u003c/p\u003e\n\u003ch4 id=\"1-use-a-standard-font-family\"\u003e1. Use a Standard Font Family\u003c/h4\u003e\n\u003cp\u003eStandard font families, such as Arial or Times New Roman, are likely already installed on your user\u0026rsquo;s computer or mobile device. To better ensure that the page looks as intended, list the specific font that you want the browser to check for first, then one or two more fonts that are similar to the first one, just in case it is unavailable. You should end the list with a generic font in case none of your selections are available to your user. There are \u003ca href=\"https://www.w3.org/Style/Examples/007/fonts.en.html\"\u003efive generic fonts\u003c/a\u003e: \u003cbr /\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://en.wikipedia.org/wiki/Serif\"\u003eserif\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://en.wikipedia.org/wiki/Sans-serif\"\u003esans-serif\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://en.wikipedia.org/wiki/Monospaced_font\"\u003emonospace\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003ecursive (fonts that look like handwriting)\u003c/li\u003e\n\u003cli\u003efantasy (decorative fonts, often used for titles)\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eIn this first CSS example, the browser will try to display paragraphs in Times New Roman, a serif font. If that is not available, it will look for Georgia; another serif font. If neither are available, the browser will know to use whichever is the user\u0026rsquo;s default serif font.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ep {font-family: \u0026quot;Times New Roman\u0026quot;, Georgia, serif;}\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThis next CSS example follows the same process, but uses \u003cem\u003esans-serif\u003c/em\u003e fonts:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ep {font-family: Arial, Verdana, Tahoma, sans-serif;}\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThis third CSS example uses \u003cem\u003emonospace\u003c/em\u003e fonts:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ep {font-family: \u0026quot;Courier New\u0026quot;, Courier, monospace;}\u003c/code\u003e\u003c/p\u003e\n\u003ch4 id=\"2-use-a-base-font-size-of-16-css-pixelshttpxahleeinfojsweb_design_screen_densityhtml\"\u003e2. Use a Base Font Size of 16 \u003ca href=\"http://xahlee.info/js/web_design_screen_density.html\"\u003eCSS pixels\u003c/a\u003e\u003c/h4\u003e\n\u003cp\u003eIn the body, explicitly declare a font size for your page as 16px as a page-wide instruction. This also tells the page to adjust to the fonts we are using when rendering. \u003cbr /\u003eIn the CSS, use:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ebody {font-size:16px;}\u003c/code\u003e\u003c/p\u003e\n\u003ch4 id=\"3-use-font-sizes-relative-to-the-base-size-to-define-the-typographic-scale\"\u003e3. Use Font Sizes Relative to the Base Size to Define the Typographic Scale\u003c/h4\u003e\n\u003cp\u003eWith the font size set for the entire page above, make relative or percentage calls to adjust that font size so html tags such as H1s and H2s are appropriately sized and rendered as shown below.\u003c/p\u003e\n\u003cp\u003eIn the CSS, use:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ebody {font-size: 16px;} {font-size: 120%;} h1 {font-size: 250%;}\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThis ensures that all the font size relationships will always stay the same no matter the screen size.\u003c/p\u003e\n\u003ch4 id=\"4-restrict-the-number-of-fonts-used-and-the-typographic-scale\"\u003e4. Restrict the Number of Fonts Used and the Typographic Scale\u003c/h4\u003e\n\u003cp\u003eToo many fonts and font sizes lead to messy and overly complex page layouts. While complex page layouts may be acceptable and readable on a desktop monitor, they may not be as readable on the smaller mobile device screen.\u003c/p\u003e\n\u003ch4 id=\"5-use-the-browser-default-line-height-of-12em\"\u003e5. Use the Browser Default Line Height of 1.2em\u003c/h4\u003e\n\u003cp\u003eThe amount of space between lines of text, which can be set using the CSS property, \u003ccode\u003eline-height\u003c/code\u003e, may affect the readability of a page. On a desktop monitor, small spacing or tight text may be acceptable, but on smaller mobile devices, reading such text is more difficult without zooming. Google recommends using at least the browser default line height of 1.2. This means that the space between the lines of text is at least 1.2 times the size of the text.\u003c/p\u003e\n\u003cp\u003eIn this CSS example, the paragraph selector has the \u003ccode\u003efont-size\u003c/code\u003e property set to a value of 120 percent, and the \u003ccode\u003eline-height\u003c/code\u003e property set to a value of 1.2.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003ep {font-size: 120%; line-height: 1.2;}\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003eThe amount of space between lines of link text can be even more problematic as the link needs to be pressed by a fingertip and is related to the next section. To ensure room to tap the link, increasing the line height may be necessary.\u003c/p\u003e\n\u003cp\u003eIn this CSS example, the unordered list selector has the \u003ccode\u003eline-height\u003c/code\u003e property set to a value of 200 percent.\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eul {line-height: 200%;}\u003c/code\u003e\u003c/p\u003e\n\u003ch3 id=\"references\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eCSS: What’s a CSS Pixel? What’s a Reference Pixel | \u003ca href=\"http://xahlee.info/js/web_design_screen_density.html\"\u003ehttp://xahlee.info/js/web_design_screen_density.html\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eDocument Doesn't Use Legible Font Sizes | \u003ca href=\"https://developers.google.com/web/tools/lighthouse/audits/font-sizes\"\u003ehttps://developers.google.com/web/tools/lighthouse/audits/font-sizes\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eSEO Do’s and Don’ts with Font Sizes and Colors | \u003ca href=\"https://www.seoblog.com/2014/06/seo-dos-donts-font-sizes-colors/\"\u003ehttps://www.seoblog.com/2014/06/seo-dos-donts-font-sizes-colors/\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eLegible Font Size | \u003ca href=\"https://varvy.com/mobile/legible-font-size.html\"\u003ehttps://varvy.com/mobile/legible-font-size.html\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eUse Legible Font Sizes | \u003ca href=\"http://sitegrasp.com/mobile-design-tips/use-legible-font-sizes.html\"\u003ehttp://sitegrasp.com/mobile-design-tips/use-legible-font-sizes.html\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eWebfont options and speed | \u003ca href=\"https://varvy.com/pagespeed/web-font-options.html\"\u003ehttps://varvy.com/pagespeed/web-font-options.html\u003c/a\u003e \u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"size-your-tap-targets-appropriately\"\u003eSize Your Tap Targets Appropriately\u003c/h2\u003e\n\u003ch3 id=\"issue-objects-on-the-mobile-device-are-too-small-to-be-accurately-touched-to-elicit-correct-application-behavior\"\u003eIssue: Objects on the mobile device are too small to be accurately touched to elicit correct application behavior.\u003c/h3\u003e\n\u003cp\u003eTap targets are objects on a page that you interact with, including links, buttons, form fields, etc. On the desktop, we usually use the small and accurate mouse pointer, but on smaller, mobile devices, we use our much bigger and less accurate finger. Not only do the tap targets need to be “big enough,” they need to be placed far enough from other tap targets that the user is able to tap only the desired target.\u003c/p\u003e\n\u003ch3 id=\"solution-ensure-tap-targets-are-at-least-48-css-pixels-wide-or-tall-are-spaced-about-8-pixels-apart-and-that-there-are-at-least-32-css-pixels-wide-and-tall\"\u003eSolution: Ensure tap targets are at least 48 CSS pixels wide or tall, are spaced about 8 pixels apart, and that there are at least 32 CSS pixels wide and tall.\u003c/h3\u003e\n\u003cp\u003eThe average size of the pad of an adult finger pad 10 millimeters wide. Android recommends a tap target size of about 7 mm for any element, and to ensure the tap targets are at least 48 CSS pixels wide or tall and at least be 32 CSS pixels between any tap targets, so that a user\u0026rsquo;s finger pressing on one tap target does not inadvertently touch another tap target.\u003c/p\u003e\n\u003cp\u003eFor example, if you want to ensure a link list has enough room between lines to click, use the following line of CSS code to use a larger line height if the screen is small, or use a more normal line height for larger screens.\u003c/p\u003e\n\u003cp\u003eIn the CSS use:\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eli a {line-height: 1.8; } @media (min-width:60em) {li a {line-height: 1.2; }}\u003c/code\u003e\u003c/p\u003e\n\u003ch3 id=\"references-1\"\u003eReferences\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAccessible Styles | \u003ca href=\"https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design\"\u003ehttps://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003ePageSpeed Insights Size Tap Targets Appropriately | \u003ca href=\"https://stallion-theme.co.uk/google-pagespeed-insights-size-tap-targets/\"\u003ehttps://stallion-theme.co.uk/google-pagespeed-insights-size-tap-targets/\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eSize Tap Targets | \u003ca href=\"https://growthrobotics.com/size-tap-targets/\"\u003ehttps://growthrobotics.com/size-tap-targets/\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eSize Tap Targets Appropriately | \u003ca href=\"https://varvy.com/mobile/tap-target-size.html\"\u003ehttps://varvy.com/mobile/tap-target-size.html\u003c/a\u003e \u003c/li\u003e\n\u003cli\u003eThe Four Fixes To Avoid The Google Mobile-Apocalypse | \u003ca href=\"https://authoritylabs.com/blog/four-fixes-avoid-google-mobile-apocalypse-update/\"\u003ehttps://authoritylabs.com/blog/four-fixes-avoid-google-mobile-apocalypse-update/\u003c/a\u003e \u003c/li\u003e\n\u003c/ul\u003e\n"}
  ]
}