# Large title

> A large title is the oversized screen heading in an iOS navigation bar that shrinks to a standard title as the content scrolls. Material 3 has a similar pattern in the Medium and Large top app bars.

Page: https://www.appetiteui.com/glossary/large-title. Large title and top app bar sizes on iOS and Android. Also called Large navigation title, Collapsing toolbar.

## Why it matters

On a screen that scrolls, a large title tells people where they are and gives the screen its start. As they scroll, it hands the space back to the content.

Apple recommends it to keep people oriented as they navigate and scroll, and it returns to large when they scroll to the top.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Large title in a navigation bar | Medium and Large top app bar | Top Bar, lg |
| Large title text size | 34 pt (largeTitle) | No large title; Medium and Large bars have their own title styles | See below |
| Top bar height | 44 pt | 64 dp | `platform/bar/top-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Top bar | iOS / Toolbar on a 44 high top bar | M3 / Top app bar, Small 64 high, Medium 112, Large 152 | Material has four bar types: Small, Center-aligned, Medium and Large |

## In Appetite UI

Appetite UI has Top Bar in sm, md and lg, where sm and md are 64 and lg is 132 and the layout is the same on both platforms. The type behind a large title is the largeTitle style of the Platform bridge, 36 in the kit against 34 on iOS.

## Example

A settings screen opens on the large title Settings. As the list scrolls the title shrinks into the bar, and scrolling back to the top restores it.

## Common mistakes

- Using a large title on every level of a hierarchy. Keep it for the top screens of a section.
- Writing a custom Back label. Prefer the standard Back button.
- Ignoring text-size settings. A large title must still wrap and truncate cleanly.
- Putting dense actions in the bar next to a large title.

## Questions

### What is a large title on iOS?

The big title at the top of a navigation bar, which collapses to a standard title when the content scrolls and returns when it is scrolled to the top.

### What is the Android equivalent of a large title?

A Medium or Large top app bar in Material 3, which also collapses on scroll. Appetite UI draws them at 112 and 152 on the Material page of the file.

## Sources

1. [Apple Human Interface Guidelines: Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars)
2. [Material Design 3: Top app bar](https://m3.material.io/components/top-app-bar/overview)

## Related

- Docs: [Top Bars](https://www.appetiteui.com/docs/top-bars)
- 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: [Top app bar](https://www.appetiteui.com/glossary/top-app-bar)
- Glossary: [Type scale](https://www.appetiteui.com/glossary/type-scale)
- Glossary: [Status bar](https://www.appetiteui.com/glossary/status-bar)