Why legibility is a design priority
Most of what people do in an app involves reading: labels, instructions, messages, prices, warnings. If the text is hard to read, everything else suffers. People make mistakes, give up, or squint and tire quickly.
Phones are used in difficult conditions. Glare in sunlight, a dim bedroom, a moving train and small screens held at different distances all work against the text. Add the fact that eyesight varies widely, and often declines gradually with age, and it becomes clear that “readable on the designer’s monitor” is not enough.
Type size
Start from comfortable defaults
Both major phone platforms have default body text sizes that are designed to be readable, typically somewhere around 16 to 17 units depending on the system. Using the system’s standard text styles is a reliable starting point, because they are tuned for the device and scale with user settings. Check the current platform guidelines for exact values.
Very small text is the most common error. Fine print, timestamps, captions and button labels are often shrunk to fit, and these are exactly the items people need to read. As a rule of thumb, do not make anything that matters smaller than the body size, and be cautious about going far below it for any text.
Support the user’s text size setting
Many people increase their system text size, and some choose very large sizes. If your app uses fixed sizes, it ignores that choice. Use scalable units and relative text styles, then test your layouts at the largest settings. Look for clipped words, overlapping elements, buttons that no longer fit their labels, and horizontal scrolling that was not intended.
Layouts that grow gracefully are better than layouts that cap the size. If a very large setting breaks the design, change the design.
Color contrast
Contrast is the difference in brightness between text and its background. Higher contrast is easier to read. Pale gray on white, or dark gray on black, can look elegant in a design file and be nearly invisible outdoors.
Known thresholds
The Web Content Accessibility Guidelines, widely used as a reference for apps as well as websites, set minimum contrast ratios. For normal text, the common target is at least 4.5 to 1. For large text, meaning roughly 18 point regular or 14 point bold and above, the target is at least 3 to 1. Meaningful interface parts, such as the outline of an input field or an important icon, are generally expected to reach 3 to 1. These are minimums, not ideals, and more contrast is usually welcome for body text.
Free contrast checkers let you enter two colors and see the ratio. Use one on every combination of text and background in your design, including hint text, disabled states, links and text placed over images.
Common trouble spots
- Hint and prompt text in input fields, often a faint gray.
- Secondary text such as timestamps and captions.
- Text over photos or gradients. Contrast changes across the image. A subtle darkening layer or a solid panel behind text helps.
- Colored buttons. White text on a mid-tone color can fail. Check it.
- Disabled elements. They may be dimmed on purpose, but they should still be recognizable.
Do not rely on color alone
Some people have trouble distinguishing certain colors. Red and green are the best-known problem pair. If an error appears only as red text or a status is shown only by a colored dot, those people may miss it. Add a second cue, such as an icon, a text label or a pattern. Games and charts especially benefit from colorblind modes and clear shape differences.
Spacing and shape
Readable text is more than size and contrast.
- Line length. On a phone, lines are naturally short. Keep paragraphs short and avoid dense blocks.
- Line spacing. Slightly generous spacing, often around 1.4 to 1.5 times the text size for body copy, helps reading. This is a typical guideline, not a fixed rule.
- Font choice. Pick a clear typeface with distinct letter shapes. Decorative fonts are fine for logos but poor for body text. Avoid very thin weights at small sizes.
- Alignment. Left-aligned text is generally easiest to read in left-to-right languages. Avoid centering long paragraphs.
- Capitals. Long runs of all capitals slow reading. Use them sparingly.
- Touch targets. Text that acts as a link or button should be spaced and sized to tap comfortably, as noted in the discussion of thumb reach.
Dark themes and bright rooms
Contrast behaves differently in a dark theme, where pure white on pure black can feel harsh and faint gray text becomes unreadable. A dark theme needs its own check, which is described in the notes on dark mode design. Brightness settings matter too: people often turn the screen down at night or turn it up outside, so test at both ends.
For those who spend long periods reading on a phone, comfortable text can help reduce tiredness, though it is no cure for eye strain, which also depends on breaks, lighting and viewing distance.
Testing in real conditions
- View your screens on actual phones, not just on a large monitor.
- Take the phone outside and look at it in daylight.
- Turn the screen brightness down and check at night.
- Set the system text to its largest size.
- Hold the phone at arm’s length and see what is still readable.
- Ask someone older, or someone who wears glasses, to read a few screens aloud.
- Try a grayscale view to see whether anything depends on color alone.
Many accessibility features built into phones can help you check this, including magnifiers, bold text, and color filters. These same tools are used by many people every day, so they are part of ordinary use, not special cases.
A short summary of habits
Use the platform’s text styles, support larger sizes, aim for at least the recommended contrast ratios, add a second cue beside color, and test outdoors. Text that is easy to read costs little to design and benefits nearly everyone who opens the app.