Typeface:

Font:

Size:

Weight:

Kerning:

Tracking:

Leading:

typography for mobile

In general, the rule of thumb is that font size needs to be 16 pixels for mobile websites.Anything smaller than that could compromise readability for visually impaired readers. Anything too much larger could also make reading more difficult. You want to find that perfect Goldilocks formula and, time and time again, it comes back to 16 pixels.

The Web Content Accessibility Guidelines (WCAG) has clear recommendations regarding how to address color contrast in section 1.4.3. At a minimum, the WCAG suggests that a contrast of 4.5 to 1 (WebAIM.) should be established between the text and background for optimal readability. There are a few exceptions to the rule:

Text sized using 18-point or a bold 14-point only needs a contrast of 3 to 1. Text that doesn’t appear in an active part of the web page doesn’t need to abide by this rule. The contrast of text within a logo can be set at the designer’s discretion.

Plain and simple: tracking in mobile web design needs to be used in order to control density. The standard recommendation is that there be no more than between 30 and 40 characters to a line. Anything more or less could affect readability adversely.

WCAG’s guidelines: Spacing between lines needs to be 1.5 (or 150%, whichever ratio works for you). Spacing between paragraphs then needs to be 2.5 (or 250%).