Both iOS and Android offer system tools that allow users to scale the text on their device up or down for readability. Supporting scaling text is an easy way to make your app usable for more people. Although developers handle much of the work, decisions we make in design can greatly impact the readability of your app.

The differences between iOS and Android

Although the effect is similar on both platforms, Android and iOS handle scaling text styles differently. Android uses a basic scaling tool that will increase or decrease your font sizes by a certain percentage. This makes it pretty easy to implement, but it also means that you are responsible for optimizing your text styles to scale up and down appropriately.

iOS is more nuanced and it is recommended that you follow Apple’s Dynamic Type styles. The benefit of using these styles is that Apple will handle optimizing font scaling for readability at any size (including adjusting kerning and font weight). Although it is possible to use custom fonts with Apple’s Dynamic Type, it does require additional development work.

Although the goal of supporting text at different sizes is similar, the implementation and ruleset for both platforms are very different. Try out the text scaling systems on each platform and work with your developers to understand special considerations for your unique apps.

What can you do, as a designer, to anticipate problems with text scaling?

While designing, consider the extremes of your content and how it may behave at taller, longer, and generally larger sizes. Make sure your UI can accommodate scrolling and consider how to handle long strings of text at a large font size to minimize truncation. Creating wireframes, visual comps, or testing layouts in coded prototypes are all helpful for understanding how text may behave when it scales.

Be sure to validate both iOS and Android layouts once they get into code. There can be big differences in how each platform handles text, even if you are using similar styles on both platforms.

Can you use custom fonts or text styles?

iOS	Android
As of iOS 11, it is easier to use a custom font in your app and support Dynamic Type. That being said, San Francisco was designed for readability and includes many quality of life features. If your main goals are accessibility, readability, and flexibility, it’s highly recommended that you use San Francisco.	Google Font support was introduced in Android Oreo (8.0) and is backwards compatible. This means that it is easy to implement any of these fonts in your Android app. Sizing and weight will work with accessibility type scaling without much additional effort.

How should you represent text size in style guides?

iOS	Android
Use points/”pt”	Use scale-independent pixels/”sp”

What happens to screen layouts when text scales?

iOS	Android
Layouts can be adjusted as you scale up text sizing, to some degree. You can also manually limit how large your text will scale, but this can cause accessibility issues for users who need larger font.	Android uses constraint based layouts. It is important to test your layouts as text scales to ensure they do not break.

Will large custom text sizes scale?

iOS	Android
You can use text styles that are larger than what is listed in Dynamic Type, but it will not scale by default.	Be careful of using very large text in your apps. Have a plan for how large text will or won’t scale.

Getting started with Dynamic Type on iOS

The easiest way to make your text scale correctly for accessibility is to use the Dynamic Type styles defined by Apple. This will mean using the fonts, weights, and sizes in the table below. You can use these styles however you’d like to in your app. For example, you can use the “Headline” style for titles instead of the “Title1” style.

Dynamic Type base sizing

Dynamic Type Name	iOS Text Style	Size
Title1	SFUIDisplay Light	28pt
Title2	SFUIDisplay Regular	22pt
Title3	SFUIDisplay Regular	20pt
Headline	SFUIText Semibold	17pt
Subhead	SFUIText Regular	15pt
Body	SFUIText Regular	17pt
Callout	SFUIText Regular	16pt
Footnote	SFUIText Regular	13pt
Caption1	SFUIText Regular	12pt
Caption2	SFUIText Regular	11pt

How does Dynamic Type scale?

Anyone can go into their system settings on their iPhone and increase or decrease font sizes. When your app supports dynamic type, it will provide a consistent, readable experience. If you have used the Dynamic Type styles to design your app, your developers can easily enable this functionality.

You can access the text scaling settings on iOS in the Settings app by going to General > Accessibility > Larger Text. This video shows how text appears at different settings.

Dynamic type can get very big at the larger accessibility sizes (+4, +5, +6, +7, +8). The “Body” style has the largest range of sizes and can quickly cause layout issues. Although it can be a challenge to work with, the Body style will ensure the most important content in your app is legible to the most people. Carefully consider your approach when choosing which styles to use in your app.

Examples from Apple News

Example of the feed at 0, +3, and +8 accessibility text sizes. Notice how the layout changes based on the size of the text and how the tab bar text does not get larger.

Example of an article at 0, +3, and +8 accessibility text sizes. Notice the big jump in size for the text between +3 and +8. Food & Wine uses a custom font for their titles, but the text scales consistently, regardless of the font.

Using system standard components supports dynamic type without any need to manually change the font sizes or styles. This can be another way to help make your app accessible without a lot of extra work. You can also use them as a guide for designing custom components.

You can reference this chart if you want to see how text size increases with Dynamic Type. Keep in mind that iOS will automatically adjust text at certain sizes for readability, including kerning and weight, so the exact styles used by the system may vary.

Getting started with scaling text on Android

Although it is not required that you use it, Material Design does have a type scale system. This system is a good representation of the text sizes you will get with standard Android components. This system does not serve the same function as Apple’s Dynamic Type, but they can be a great baseline to help you get started with Android.

When you are designing apps for Android, it is important to know that iOS and Android use different size units. iOS represents text size in points/”pt”, Android uses scale-independent pixels/”sp”. Regardless of how you set up your designs, developers will implement any text size you give them in “sp”. Luckily, even though popular design tools like Sketch use “pt” for their sizing, developers can use the same text sizes between “pt” and “sp”. Using “sp” on Android is what allows your designs to look consistent across various devices and take advantage of type scaling accessibility features.

How does Android scale text?

Easier font customization comes with a price on Android. It is up to your team to ensure that things display appropriately as they scale. Android uses a constraint layout system that can adapt as content grows. Mock up your screens at different text sizes and work with your developers to make sure your layouts don’t break.

Where you go to increase the text size on your Android device will vary by. This video shows how text appears at different settings on a Samsung Galaxy S7.

The biggest challenges with text scaling on Android are layout and readability. Using Roboto, referencing the Material Design type scale system, and using standard components whenever possible will reduce development effort while maximizing accessibility.

Examples from the Google Play Store

Example of the Editors Choice feed in the Play Store with the text size set to “small”, “Extra Large”, and “Extra Huge 4” on a Samsung Galaxy 7. Notice how the layout stays the same even though the text scales. The two different tab bars handle the text strings differently.

Even though the Play Store is a native Google app, it struggles to display content at larger sizes. When using components that are small by design (like tabs), think about how labels will fit into that space. Even though the larger text size may be easier for someone to read, layout issues can diminish some of the accessibility benefit.

Snack sized summary

Scaling text is a simple accessibility feature to implement and offers tremendous value to your users. If someone cannot read the content, they will not be able to use your app.
On iOS, start with Dynamic Type and San Francisco. Dynamic Type is designed to smartly adjust at different sizes. You may lose some readability with a custom font.
Android is much easier to customize, but requires more upfront work to make sure layouts don’t break as text scales. Use Roboto and standard components whenever you can to reduce development effort and rework.
Test your apps on devices to ensure the text scaling works as expected. Layout bugs are more likely as the text size increases.
Use “pt” for text size on iOS and “sp” for Android.

Designing Apps with Accessible Fonts