# Dynamic Type and font scaling

> Dynamic Type is the iOS setting that lets people choose the size of text, and a design supports it by using text styles. Android has the same idea through font scale and text sizes in sp.

Page: https://www.appetiteui.com/glossary/dynamic-type. Dynamic Type and Android font scale: sizes that follow people. Also called Font scaling, Text size, Text styles.

## Why it matters

People change the text size on their phone, and a layout that fixes sizes or heights clips or overflows when they do.

Apple’s text styles give a hierarchy that keeps its shape as the size changes, so the design names styles and not points.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Dynamic Type, text styles | Type scale roles, sizes in sp | typography scale |
| Default size | 17 pt on iOS and iPadOS | Body roles, scaled by the font size setting | See below |
| Minimum size | 11 pt on iOS and iPadOS | Set by the type scale role | See below |

## In Appetite UI

The Typography page maps the ten sizes to iOS text styles and Material roles: base 16 is callout and titleMedium or bodyLarge, sm 14 is subheadline and bodyMedium, and xs 12 is footnote and the two caption styles.

Styles are bound to variables, so one change reaches every text layer.

## Example

A card title uses the title text style. At the largest accessibility size it wraps to three lines and the card grows with it, because its height is not fixed.

## Common mistakes

- Fixing the height of a text container, so larger text clips.
- Hard-coding sizes in points. Use text styles.
- Designing and testing at the default size only.
- Truncating essential text, such as a price.

## Questions

### What are the default and minimum text sizes on iOS?

Apple lists 17 pt as the default and 11 pt as the minimum for iOS and iPadOS.

### Do custom fonts support Dynamic Type?

Only if you implement it. Apple says system fonts support Dynamic Type automatically, and a custom font must implement the same behaviors.

## Sources

1. [Apple Human Interface Guidelines: Typography](https://developer.apple.com/design/human-interface-guidelines/typography)
2. [Material Design 3: Typography](https://m3.material.io/styles/typography/overview)

## Related

- Docs: [Typography](https://www.appetiteui.com/docs/typography)
- Article: [iOS vs Android values: what a screen changes when it moves platforms](https://www.appetiteui.com/blog/ios-vs-android-values)
- Glossary: [Type scale](https://www.appetiteui.com/glossary/type-scale)
- Glossary: [Points and dp](https://www.appetiteui.com/glossary/points-and-dp)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)