Typography Tips for Mobile Design

With 80% of people using their phones to browse websites, it’s more important than ever to design websites for the mobile experience. A key feature of great mobile design is its use of typography.  Outlined here are some tips on how to design better typography for mobile interfaces.

Yes, White Space

Since mobile has a smaller amount of screen real estate, it’s important to use space wisely. Since space is limited, it also requires that the content not appear cramped. Experts agree that in order to make content readable on mobile it’s best to include enough white space, and not too little. So designs for mobile require more space not less in order to make content more readable. It’s better that the user scrolls than that the type is restricted within a small screen area.

Contrast the Color

A way to enhance the readability of small text on mobile is to use color contrast.  Black or dark gray text on white is a good choice and so is pastel blue on navy blue, for instance. Think bright and light and dark and dull when thinking about using contrast with type.

Use Pixels not Points

Typography on mobile is not measured using the traditional point system but instead uses pixels or ems or rems. Designers prefer this because it relies on percentages and makes scaling the design for widely different screen resolutions easier.

Scale Type Similarly

Unlike with type color, where contrast is key, type scaling should be kept within a limited range. The reason for this is that since mobile phones are small and there isn’t a lot of screen real estate it’s not possible to read very small type and very large type would go off the screen or double to new lines. So, keep the type as large as possible for mobile, with only subtle graduated differences in size. If you want to create more difference between type elements use styles like bold, italics and drop caps, or use color instead.

Bolder is Better

Type on mobile is also easier to read if the fonts are not hairline styles with one-pixel widths, again this is because the screen is so small. Fonts with a lot of small details and flourishes aren’t the best choice. Clean, semi-bolded fonts work well on mobile.