Adobe Creative Cloud

October 3, 2016 /UX/UI Design /

XD Essentials: Typography in Mobile Apps

Communication plays a vital role in design — in order to be successful your products have to clearly communicate their intent and purpose. When we talk about communication, we usually mean text, because the purpose of text in your app is to establish a clear connection between the app and user, and to help your users accomplish their goals. Typography plays a vital role in this process; good typography makes the act of reading effortless, while poor typography turns users off.

How do you make typography work for you and your users, and not against you and them? Unfortunately, there are a lot of conflicting opinions out there about best practices for typography on 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 typography is honoring the content and improve readability on mobile devices.

Font Size, Line Length, and Space

Three of the most important considerations when designing type for mobile devices are font size, line length, and space.  Type must be large enough to easily read, and there should be sufficient space between lines.

Font Size

The size of your text has a huge impact on the experience of reading something on screen. It takes the user much longer to process smaller text. Text that is too small can cause the reader to strain, because it’s usually hard to find the beginning and end of lines of text when there are too many letters to digest at one time. As result, users will skip most of the information presented. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

However, text that is too large can also cause problems. If a line is too short the eye will have to travel back too often, breaking a reader’s rhythm. This makes the message more difficult to comprehend.

In order to make your text legible you need to find the right balance between  font size and line length.

Practical tip: There is no simple formula for selecting a font size, but a good starting point is Apples and Googles guidelines:

  • For iOS you should use text size that’s at least 11 points so it’s legible at a typical viewing distance without zooming.
  • Minimal readable font size for Android is 12 sp, but it is highly recommended to use at least 14 sp for main text.

Line Length

The generally accepted, optimal length of a line of text for comfortable reading is around 50-60 characters, including spaces (“Typographie”, E. Ruder). This measure is good for desktop apps, since it’s rare that 60 characters will extend to the edge of a desktop screen, but on most mobile devices 60 characters extends beyond the boundaries of the screen. Also lines with 60 characters on mobile screens usually require fonts that are too small to be easily readable.

There’s no commonly accepted standard for measure on a mobile screen, however a good rule of thumb for line length is to use 30–40 characters per line for mobile (source).

Left: Lines that have too many characters can be difficult for the eye to follow. Image credit: usertesting

Left: Lines that have too many characters can be difficult for the eye to follow. Image credit: usertesting

 

Practical tip: Font-size is generally more important than line length so you should always go for a good font-size first. If it can be combined with an optimal line length, then that’s obviously the ideal solution.

Spacing

When it comes to mobile screens, space is a key consideration:  the smaller the screen size, the more important it is that you give letters room to breathe. By adding a little space to text — by increasing line height or letter spacing — you are helping users better interact with the words.

Practical tip: Smaller type is easier to read with additional spacing. Thus, add extra space – maybe as much as 10 or 20 percent – between lines of type.

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

Left: Almost overlapped text. Right: Good spacing aids readability. Image credit: Apple

“Consider using paragraph spacing as well since paragraphs may look longer on smaller screens. This additional space gives readers the perception that text is not too dense and will feel easier to read.”
– Carrie Cousins

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

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

Color Contrast

Contrast is particularly important when designing for mobile because of the potential for distracting glare when using a device outside. The two most common misconceptions about color contrast are:

  • The first misconception is too much contrast is harder on the eyes. Thus, shade of grey is more accessible. As a result we get grey text on a grey or white background. However, a text color that is too similar to the background color is hard to read.
The neutral grey of this page is pleasant to look indoors, but outdoors it looks not so good, because low contrast on the screen together with screen glare makes copy hard to read. Image credit: usertesting

The neutral grey of this page is pleasant to look indoors, but outdoors it does not look good, because the low contrast on the screen together with screen glare makes the copy hard to read. Image credit: usertesting

  • The second misconception is higher contrast is better. Provide below is a black on white combination as a proof of this statement. In practice, text with too much contrast can also be hard to read. This is especially true of light-colored text against dark backgrounds. For example, forcing users to read white text on a black background for a long time can strain the user’s eyes.
    image10

Even people with perfect vision experience eye fatigue from staring at white text on a black background for too long.

It’s worth saying it again: the most important property of the text in your app is readability. Designers often like to use low contrast techniques, because low contrast makes things look beautiful and harmonious, but beautiful isn’t always the best for readability. When the text is hard to read the experience will be far from good, and the design simply won’t work.

Practical tip: The right amount of contrast is a tricky thing. Because of the variation between screens, a color contrast that seems good enough on a designer’s monitor could appear much different on a user’s screen. However, the situation is not hopeless — there is a good place to start and it’s a WC3’s Web Content Accessibility Guidelines.

The WC3 sets minimum standards for contrast ratios, which represent how different a color is from another color (commonly written as 1:1 or 21:1, the higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors). 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. A ratio of 7:1 is preferred.
  • Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
    image05

    These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors.

    These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

    These lines of text follow the color contrast ratio recommendations and are legible against their background colors.

Ensure sufficient color contrast for your text for best readability. You can use a contrast ratio tool to quickly find out if you’re within the optimal range.

One App, One Typeface

You should try to 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.

Left: Negative effect of mixing several different fonts. Right: Using one font and just a few styles and sizes. Image credit: Apple

Left: Negative effect of mixing several different fonts. Right: Using one font and just a few styles and sizes. Image credit: Apple

Practical tip: 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. Roboto & Noto fonts are the standard typefaces on Google Android and Chrome.

iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets. Image credit: Apple

iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets. Image credit: Apple

Roboto font. Image credit: Material Design

Roboto font. Image credit: Material Design

 

  • If your design requires not standard typeface, consider to choose a typeface that is legible (not tough to read). It’s very important to check typeface works well in multiple sizes and weights to maintain readability and usability in every size. A good place to start is Adobe Typekit where you can find a large collection of legible fonts.
Image credit: Adobe Typekit

Image credit: Adobe Typekit

Importance of Testing

Don’t forget about testing. Once you’ve made your typography choices, it’s absolutely necessary to test them out with real users, on the most popular device screen widths. The more devices you try text styles on, the better you’ll understand how it looks and works for users. If any of the test participants have trouble reading your copy, then you can bet your regular users will have exactly the same problem.

Practical Tip: You should use A/B testing to find out how your typography choices reflected in your conversion.

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 it encapsulates the importance of readability. Typography is the backbone of a design. By optimizing your typography you’re also improving your UI.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD

Join the discussion

  • By Stefan - 10:55 AM on October 16, 2016  

    Thank you for the article, Nick. It would have been even more helpful if the examples had values for line hight and font size.