Mobile UX: Great Typography Enables Clear Communication

Communication plays a vital role in design. Whether you design sites or mobile apps, your products have to clearly communicate their intent and purpose. The purpose of text on your site or in app is to establish a clear connection between the app and user and to help your users accomplish their goals. And typography plays a vital role in this interaction.

But how do you choose the right type for a site or app? Unfortunately, there are a lot of conflicting opinions out there about typography for web and mobile, and there isn’t one strict set of rules that apply in every case. However, there are several things you can do to make sure the fonts you choose for your site or app are working with you and your users, not against you.

Font Size and Line Length

The size and layout of your text can make a huge impact on the experience of reading something on screen. It takes the user much longer to process smaller text, small leading and paddings. As result, the users are skipping most of the information. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.

Two of the most important considerations when designing type for mobile devices are size and space. Type must be large enough to read easily and there should be enough space between lines so that text does not feel cramped in the small space.

Having the right amount of characters on each line and proper font size is key to the readability of your text. If the user can’t read it, the design does not work. A good rule of thumb is to use 30–40 characters per line for mobile.

Below is an example of two sites viewed on a mobile device. The first one uses 50–75 characters per line (optimum number of characters per line for print and desktop), while the second one uses the optimal 30–40 characters.

Image credit: usertesting

##Space When it comes to small screens, space is a key consideration. *Good spacing aids readability*. By adding a little space to text — both between lines and in the margins — you are helping users better interact with the words. A good place to start is in the 10 to 20 percent range. You may also consider using paragraph spacing as well since graphs may look longer on smaller screens. This additional space gives readers the perception that text isn’t too dense and feels easier to read. ![](/content/images/2016/05/1-k2D-2L4pQnpw8KT_x0EzUA.jpeg)

Example of good spacing in Medium app for iOS. Image credit: Medium

##Color You should use color and contrast to help users see and interpret your text content. There are two schools of thought around text color and readability:

One says that higher contrast is better, and provide black on white combination as a prove for this statement.
The other says too much contrast is actually harder on the eyes, because higher contrast can cause more eye fatigue over long periods of time. Thus, shade of grey is more accessible.

In general, the right amount of contrast is a tricky thing. Because of the variation between screens, a color contrast that seems good enough on the designer’s monitor could appear much different on the user’s screen. But it’s especially important have enough contrast on mobile: users might be outdoors with low contrast on the screen because of lighting.

The neutral grey of this page is pleasant to look indoors, but outdoors it looks not so good. Image credit: usertesting

[WC3’s Web Content Accessibility Guidelines](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) are a good place to start. They set minimum standards for contrast so that users with moderately low vision can read your text. According to the WC3, the contrast ratio between a color and its background ranges from 1–21 based on its luminance, or intensity of light emitted. The W3C recommends the following contrast ratios for body text and image text:

Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Left: These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors. Image credit: Material Design

Once you’ve made your color choice, it’s absolutely necessary to test it out with real users on most devices. If any of the test show a problem with reading your copy, then you can be sure that your users’ll have exactly the same problem. ##Prioritize Content When Responding To Text-size Changes *Not all content is equally important to users.* When users choose a larger text size, they want to make the content they care about easier to read; but that doesn’t automatically mean that they want every word on the screen to be larger.

For example, when users choose a large accessibility text size, Apple Mail displays the subject and body of the message in the large size but leaves the less important text — such as the date and the recipient — in a smaller size.

Apple Mail app with larger text size. Image credit: Apple

##Make Sure All Styles of a Font Are Legible at Different Sizes One way to do this is to check how font styles look like at different text sizes and make sure that:

Text isn’t smaller than 11 points, even when the user chooses the extra-small text size.
Text always uses either regular or medium weight; it doesn’t use light or bold, because light and bold weights don’t read well at small sizes.

User shouldn’t see UI like on example below, where portions of content are overlapping or cut off.

Bad: This UI has not scaled well with magnification and large text.

##One App, One Typeface *Use a single font throughout your app.* Mixing several different fonts can make your app seem fragmented and sloppy. When designing an app think about how can you make the typography powerful by playing with weight and dimensions, not different typefaces. ![](/content/images/2016/05/1-PuctKONH65PUaGAgj_IDPQ.png)

In general, use a single font throughout your app. Image credit: Apple

*A safe bet is to rely on the platform’s default font.* Apple uses the San Francisco family of typefaces to provide consistent reading experience across all platforms (the San Francisco font for iOS 9 is called SF-UI). [Roboto](https://www.google.com/fonts/specimen/Roboto) and Noto are the standard typefaces on Google Android and Chrome.

If your design requires not standard typeface, consider following moments:

Choose a typeface that works well in multiple sizes and weights to maintain readability and usability in every size.
Choose a typeface with easily distinguishable letterforms, because many typefaces make it too easy to confuse similar letterforms. Take a look at the uppercase I and lowercase L for Lato font in example below.

Clarify things for your users by picking a typeface that makes a clear distinction between letterforms. Image credit: invisionapp

#Conclusion As Oliver Reichenstein states in his essay “Web Design is 95% Typography”:

"Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance."

This statement is relevant not only for web, but for all UIs. Because text directly related to the communication, and in order to create a proper communication structure you need a solid understanding of typography. In other words: optimizing your typography also improving your UI.

Just like with any other design elements, guidelines and tips specified above are just a place to get started. Make sure to mix and match these ideas with your own for the best results. Just remember that design isn’t just for designers — it’s for users. Your type should support user goals, honoring the content in a way that never adds to the user’s cognitive load. Great typography draws the reader to the content, not to the type itself.

Thank you!