Text scaling

To support different screen sizes, screen orientations, pixel densities, and font sizes, Accessibility Scanner looks for places where text doesn’t scale.

Some users have difficulty when they read texts that are small. They can use their device's Font size Accessibility setting to make text larger on the screen. However, this setting only affects the appearance of text if its font size was specified in units of scalable pixels (sp).

When you adjust the font size to make text appear larger, the increased size may cause parts of the text to become cropped, cut, or obscured if the layout is overly constrained. "wrap_content" or "match_parent" is preferred for the dimensions of a TextView or a non-scrolling container of scalable text.

Implementation

View

Text sizes are defined in scalable pixels (sp).

Good examples:

<TextView
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:textSize="20sp"
    android:text="@string/directions"/>

Text with size in sp, and height that allows expansion.

<TextView
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:textSize="20sp"
    android:minHeight="48dp"
    android:text="@string/directions"/>

Height allows expansion, but will be at least 48dp.

Bad examples:

<TextView
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:textSize="20dp"
    android:text="@string/directions"/>

Text with a size in density-independent pixels (dp) won't scale.

<TextView
    android:layout_height="48dp"
    android:layout_width="100dp"
    android:textSize="20sp"
    android:text="@string/directions"/>

Text with a fixed width and height might not provide sufficient room for enlarged content, potentially causing text to be clipped when scaled.

Compose

Text sizes are defined in scalable pixels (sp). Typography system text styles of a Theme system are defined in scalable pixels. Learn more about Theme systems.

Good examples:

@Composable
fun TextScaler() {
    Text(
      text = stringResource(R.string.directions),
      fontSize = 20.sp,
    )
}

Text with size in sp, and no constraints on height, which allows expansion.

@Composable
fun TextScaler() {
    Text(
      text = stringResource(R.string.directions),
      textStyle = MaterialTheme.typography.bodyLarge,
      modifier = Modifier.sizeIn(minHeight=48.dp)
    )
}

Text styled from the theme's typography system, which defines its size in sp. Height allows expansion, but will be at least 48dp.

Bad examples:

@Composable
fun TextScaler() {
    Text(
      text = stringResource(R.string.directions),
      fontSize = 20.dp,
    )
}

Text with a size in density-independent pixels (dp) won't scale.

@Composable
fun TextScaler() {
    Text(
      text = stringResource(R.string.directions),
      fontSize = 20.sp,
      modifier = Modifier.size(width=100.dp, height=49.dp)
    )
}

Text with a fixed width and height might not provide sufficient room for enlarged content, which may cause text to be clipped when scaled.

Design

When you design a user interface, you should:

• Define text sizes in units of scale-independent pixels (sp), not dp, px, or others.
• Avoid using tiny text that's difficult for some users to read.
• Avoid text content with a fixed height and width. Prefer responsive layouts that can readily accommodate different screen sizes, screen orientations, pixel densities, and font sizes.

Testing

When you test your app, consider these test scenarios:

• Increase the Accessibility "Font size" to its largest setting.
• Test the app and verify that:
  • All the text is displayed correctly.
  • Texts have become larger, especially any text that was initially small.
• While the Font size is enlarged, view each screen in both Portrait and Landscape, if available.