Readable text on small screens: font size, contrast, sunlight and dark mode

A phone app is read at arm's length, in bright sun, in a dim stockroom, through scratched glass and by people who have turned their font size up. Readable mobile typography is less about picking a pretty font and more about size, contrast, hierarchy and letting the system scale your text.

Design for a glance, not a read

People rarely read a phone screen top to bottom while working. They glance: for one or two seconds, often while doing something else. A glanceable UI answers the user's main question in that glance.

• Decide what the single most important value on each screen is: a count, a status, a next step.
• Make it the largest, boldest element on the screen.
• Put labels and secondary details in smaller, quieter text around it.
• Cut anything that does not help the glance. Small screens punish clutter.

In the Thumb Inventory example, each item card shows the count in large bold digits with a coloured stock bar underneath, so you can scan a shelf's worth of items without reading a single label.

Mobile font sizes and sp units

On Android, define text sizes in sp (scale-independent pixels) and layout sizes in dp. Both adapt to screen density, but sp also follows the user's font size setting. Using dp for text silently ignores that setting, which is exactly the opposite of what people who enlarged their text need.

Start from the Material 3 type scale in MaterialTheme.typography instead of hard-coding sizes everywhere. One change to the theme then updates the whole app consistently.

Text(
    text = item.quantity.toString(),
    style = MaterialTheme.typography.displaySmall,
    fontWeight = FontWeight.Bold
)
Text(
    text = item.name,
    style = MaterialTheme.typography.bodyLarge,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

Support Android font scaling up to 200%

Many people raise the system font size, and not only older users: anyone in a moving vehicle or working without their glasses benefits. Since Android 14, users can scale fonts up to 200%, and Android applies nonlinear scaling so that already-large text grows less than small text.

Layouts that look perfect at 100% often break at 200%. Common failures and fixes:

Contrast ratios that pass accessibility and real life

The Web Content Accessibility Guidelines set the contrast floors that most design systems, including Material, build on:

Treat those numbers as the minimum for a screen in a comfortable office. Field devices are used in conditions that steal contrast: glare, dirty screens, low brightness to save battery, and tinted glasses. Aim higher for anything people need to read in a hurry.

Readable in sunlight and in the dark

Outdoors and in bright light

• Use medium or bold weights for important text; thin strokes vanish in glare.
• Prefer strong, simple colour coding (green, amber, red) backed by text or icons.
• Avoid large areas of mid-grey; they wash out to nothing.
• Do not override the system brightness. Let auto-brightness do its job.

Indoors, in dim stockrooms and at night

• Offer a dark theme so the screen does not dazzle the user or the people around them.
• Avoid pure white on pure black for long text; a slightly softened white is easier on the eyes.
• Keep accent colours a little lighter and less saturated in dark mode so they do not glow.

Dark mode done properly

Good dark mode design is a second palette, not an inverted first one. In Compose, follow the system setting with isSystemInDarkTheme() and pass a tuned colour scheme to MaterialTheme. On Android 12 and newer, dynamic colour can derive both palettes from the user's wallpaper.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colors = if (isSystemInDarkTheme()) DarkFieldColors else LightFieldColors
    MaterialTheme(colorScheme = colors, typography = FieldTypography, content = content)
}

Check contrast separately for both palettes. A brand colour that passes on white often fails on near-black, and vice versa.

A quick readability checklist

1. Glance test: show the screen for two seconds. Can someone say the key value?
2. Arm's length test: hold the phone at your side, at arm's length. Is body text still legible?
3. Font scale test: set system font size to the maximum. Does anything clip or overlap?
4. Sunlight test: take the phone outside at midday. Does anything disappear?
5. Dark test: switch to dark theme in a dark room. Is anything too bright or too dim?

These checks take minutes with live reload running on a real phone. Combine them with the thumb zone and haptics guides, or go back to the overview in designing for small screens.

Frequently asked questions