Foundations
Typography
Typefaces
Aa
Katibeh
Font.serif(_:)The display face: titles, headings and big numerals. It carries the app's voice.
- One weight only. A weight passed to .serif() is honoured only by the system fallback.
- Bundled with the app (UIAppFonts) and resolved once by PostScript name, never by family name, which once came back empty and silently fell through to the system font.
- Titles in the top bar and dialogs are uppercase with 1.5pt tracking.
- Licensed under the SIL Open Font License.
Aa
SF Pro
Font.sans(_:weight:)The interface face: body, labels, buttons, everything that isn't a heading.
- The system font, so it ships with the OS and has the full weight range: buttons are Black.
- The design names SF Pro Display. On iOS the system font switches between its Text and Display optical sizes by itself (Text below 20pt, Display from 20pt), so specify SF Pro and let the system choose: body copy at 17 renders as Text.
- Its Text optical size opens the spacing below 20pt, which is where this app mostly lives: read at arm's length, over a live image, by someone holding a mallet.
- Never below 11pt. .sans() clamps anything smaller.
- It replaced a condensed single-weight Futura that could not honour a weight at all.
Scale
Sizes are in points in the app and pixels here, written size/line height. The text styles follow Apple's Dynamic Type sizes, which is where the design's Title 34/41 and Description 17/22 come from. The uses column counts how many call sites set each size today.
Display XL
Katibeh 64 · 400
.serif(64)
10
Big numerals: the key-count stepper.
Display L
Katibeh 44 · 400
.serif(44)
4 uses
Kotekan
Hero titles.
Large Title
Katibeh 34/41 · 400
.serif(34)
5 uses
Ubitan Nyendok
Screen headlines and card titles. The design's Title: Apple's Large Title size, 34/41.
Title
Katibeh 30 · 400 · 1.5 track
.serif(30) · TopBar
Choose your gangsa
The screen title in the top bar.
Heading
Katibeh 24 · 400 · 1.5 track
.serif(24)
7 uses
Delete this gangsa?
Dialog and card headings.
Subheading
Katibeh 22 · 400
.serif(22)
5 uses
Pemade at the sanggar
Names and compact titles.
Button
SF Pro 19 · 900 · 1.5 track
.sans(19, weight: .black)
Start practice
Pill button labels.
Body
SF Pro 17/22 · 400
.sans(17)
4 uses
Play along with the waterfall.
Body copy. The design's Description style: Apple's Body size, 17/22.
Callout
SF Pro 16/21 · 400
.sans(16)
10 uses
Back
Back links, overlay messages.
Subheadline
SF Pro 15/20 · 400
.sans(15)
22 uses
Last used 2 days ago
Card metadata; secondary button labels at black weight.
Small
SF Pro 14 · 400
.sans(14)
24 uses
Piezo sensors on the bilah feel exactly which key you hit.
Descriptions under settings. Between Apple's steps; prefer 15 or 13 for new work.
Footnote
SF Pro 13/18 · 400
.sans(13)
50 uses
10 keys · 4 hours ago
Metadata and status. The most used size in the app.
Eyebrow
SF Pro 12 · 600 · 2.5 track
SectionLabel · .eyebrow()
27 uses
Strike controller
Section labels above a group.
Caption 2
SF Pro 11/13 · 400
.sans(11)
14 uses
Caption 2 is the smallest size iOS allows.
The floor. Nothing is set smaller.
Rules
- Two styles carry most screens. Large Title (Katibeh 34/41) for the heading, Body (SF Pro 17/22) for the copy under it.
- Never below 11. Caption 2 is the smallest size iOS allows; Font.sans clamps anything smaller.
- Buttons are Black. Heavy, short and tracked 1.5, so an uppercase word doesn't set solid.
- Eyebrows are tracked 2.5. Uppercase SF at 12 semibold, above a group, never as a screen title.
- Titles are Katibeh, interface is SF. A back link or a step counter is interface, even inside the top bar.
- Symbols use symbol metrics. SF Symbols take Font.symbol, not a text size that happens to be nearby, so icons sit level with their labels.