This document is in beta. Help us by reporting issues via Github or email

Back to the overview page

Resize text

On this page:


Make sure it is possible to complete all tasks when text is resized up to 200%.

It must be possible to increase the size of text to 200%, without losing access to any content or functionality.



This ensures that partially sighted people can comfortably read content and see the interface well.

Official wording in the Web Content Accessibility Guidelines

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

See the W3C’s detailed explanation of this guideline with techniques and examples.

Guidance for Design

This section needs more content. Contribute via Github or email.

More guidance for design

Guidance for Design

This section more content. Contribute via Github or email.

Guidance for iOS

Since iOS 11, the system provides an easy way to obtain a scaled font:

// Obtaining a font for the current scale from the system
let bodyFont = UIFont(name: "YourFontName", size: 17) // The default font you'd use for your UI's body content
let scaledBodyFont = UIFontMetrics.default.scaledFont(for: bodyFont)

// Setting the font on a label that will automatically scale and reflow the layout
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.font = scaledBodyFont

Note: UIFontMetrics will scale custom and system fonts for you.

Note: UIFontMetrics can also be created with a text style for more nuanced font scaling:

// Scaling a header font from a `.headline` UIFontMetrics instance indicates to the system it doesn't need to scale it as much as it would for `.body` fonts.
UIFontMetrics(forTextStyle: .headline).scaledFont(for: headerFont)

If necessary, you can also observe changes to the user’s system setting and reflow your layout:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    if traitCollection.preferredContentSizeCategory >= .accessibilityLarge {
        stackView.axis = .vertical
    } else {
        stackView.axis = .horiztonal

More guidance for iOS

Guidance for Android

To ensure that the system will scale your font when the user changes configuration make sure that your font size is defined in sp (scale-independent pixel).

Alternatively you can respond to configuration changes by overriding onConfigurationChanged to get the new font scale

override fun onConfigurationChanged(newConfig: Configuration) {
    newConfig.fontScale // Update text size based on fontScale

If you require some texts to have a fixed size, you can use dp instead.
Use with caution and under very special circumstances, as this will prevent the user from scaling the text with their font configuration.

Guidance for Flutter

Text scaling is supported with every version of Flutter and text will scale based on the devices settings.

Additional things to consider when designing your app is to account for any height or width changes that might happen due to increase of size.

Make sure that your screen/widget is scrollable.

You can use widgets like SingleChildScrollView() to wrap your ui to make it scrollable. Widgets like ListView.builder are scrollable by default.

      child: // the rest of your ui here

Scrolling direction is also locked to a default direction but can have this toggled.

scrollDirection: Axis.enum, // defaults to Axis.vertical

Make sure text containers can increase in size when text gets bigger

Do not set a fixed height and width for a widget containing text.

// DO
    child: // wrap your screen ui with this

// DON'T
    height: 40,
    width: 40,
    child: Text('Some long text here')

More guidance for Flutter

Guidance for Web

Using relative size units to support font resizing

Ensuring the viewport meta tag is set to permit “pinch-to-zoom” scaling on touch screens


<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Failure examples

<!-- Don't do this -->
<meta name="viewport" content="user-scalable=no" />
<!-- Don't do this -->
  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"

Common mistakes

More info



This document is in beta. Help us by reporting issues via Github or email