Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/newellcr/public_html/ on line 183
Use Legible Font Sizes | Mobile Design Tips

This rule triggers when SiteGrasp detects that text in the page is too small to be legible.


Web font size can be specified via four common units: pixels (px), points (pt), EMs (em), and percent (%).

  • Pixels are “CSS pixels” and vary based on device size and density.
  • Points are defined in relation to pixels. A single pixel is 0.75 points*.
  • EMs and percent are “relative” units: they are relative to the inherited size and properties of the font being used. 1 EM is equivalent to 100%.

* See additional notes.

Additionally, the viewport impacts how fonts are scaled on mobile devices. A page without a properly configured viewport is scaled down on mobile devices, often resulting in the text on the page being illegible due to its small size.


First, configure a viewport to make sure fonts will be scaled as expected across various devices. Once you've configured a viewport, implement the additional recommendations below.

  1. Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
  2. Use sizes relative to the base size to define the typographic scale.
  3. Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
  4. Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.

For example, the following CSS snippet defines a baseline font size of 16 CSS pixels, with CSS class 'small' that has a font size of 75% the baseline font (12 CSS pixels), and CSS class 'large' that has a font size of 125% the baseline font (20 CSS pixels):

body {
  font-size: 16px;

.small {
  font-size: 12px; /* 75% of the baseline */

.large {
  font-size: 20px; /* 125% of the baseline */

For additional font recommendations applicable for mobile devices, consult the Android typography guidelines.

Additional information

The CSS 2.1 specification requires careful reading to understand how length units are defined. It contains further units not mentioned here: inches, centimeters, millimeters, and picas. What is easy to miss is that a CSS inch is not always equal to a physical inch.

All absolute units are defined in relation to each other. 1 pixel is .75 points; 1 point is 1/72nd of an inch; 1 inch is 2.54 centimeters; etc. However, it is up to the device to decide how to "anchor" these units. For instance, when printing on paper, 1 inch is anchored at 1 physical inch, and all other units should be relative to the physical inch. When displayed on a mobile phone, however, devices anchor with what is known as the "reference pixel". 1 CSS pixel is defined according to this reference pixel, and all other units - inches, centimeters, etc - are adjusted relative to the CSS pixel. Therefore, on a mobile phone, 1 CSS inch is typically displayed at a size smaller than 1 real, physical inch.

We recommend defining your font sizes using pixels for this reason. Some designers and developers may be misled when seeing inches or points used — they are physical dimensions but do not necessarily correspond to their real-world sizes. A pixel can always be thought to change size according to the device it is being displayed on.

Finally, each font also has its own characteristics: size, spacing, and so on. By default, the browser will display each font at 16px (CSS pixels). This is a good default for most cases, but may need to be adjusted for a specific font - i.e. the default size can be set lower or higher to accommodate for the different properties of the font. Then, once the default size is set, larger and smaller fonts should be defined relative to the default size using pixels. These can then be used to adjust size of the text for primary, secondary, and other type of content on the page.

Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices. SiteGrasp displays the text on your page without browser-specific font scaling applied.

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.