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.
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.
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.
- 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.
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).
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.
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.
“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
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 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.
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.
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.
Practical tip: A safe bet is to rely on the platform’s default font.
- 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.
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.
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.