Standard-Schriftstile in Swift

Statt Punktgrößen fest zu codieren, geben Ihnen Apples Plattformen einen Satz semantischer Schriftstile: body, headline, caption und die verwandten Stile. Sie beschreiben die Rolle des Textes, und das System wählt Größe, Gewicht und Zeilenabstand, skaliert alles mit der Textgrößen-Einstellung des Nutzers und passt die Metriken an die jeweilige Plattform an. Das ist der Unterschied zwischen „Systemschrift mit 17 Punkt“ und „das ist Fließtext“ — und die zweite Variante altert deutlich besser.

Es gibt elf dieser Stile, von largeTitle bis caption2. Einen davon zu verwenden, ist ein Einzeiler:

// SwiftUI — scales with Dynamic Type automatically
Text("The quick brown fox").font(.largeTitle)
Text("The quick brown fox").font(.body)

// UIKit — opt in to Dynamic Type scaling
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

(UIKit benennt zwei davon etwas anders — .title1 und .caption1, wo SwiftUI .title und .caption verwendet — aber sie bilden auf dieselben Stile ab.)

Warum der Aufwand statt einer festen Größe? Drei Gründe: Der Text skaliert auf iOS und iPadOS mit der Dynamic-Type-Einstellung des Nutzers (ein Barrierefreiheitsgewinn, den Sie praktisch kostenlos bekommen), er bleibt in der gesamten App visuell konsistent, und derselbe Stil wird mit plattformgerechten Metriken gerendert. Genau das zeigen die beiden Screenshots unten.

Auf dem Mac ↴

Auf dem Mac fallen die Stile etwas kompakter aus — ein body hat hier nicht dieselbe Punktgröße wie ein body auf dem iPhone. macOS bietet keinen Dynamic-Type-Regler wie iOS, aber mit semantischen Stilen bekommen Sie trotzdem Mac-gerechte Größen und halten eine gemeinsame SwiftUI-Codebasis auf beiden Plattformen visuell konsistent.

Auf iOS ↴

Auf iPhone und iPad sind das die Größen, die Sie überall in der System-UI sehen. Sie wachsen und schrumpfen mit der bevorzugten Textgröße des Nutzers. Wenn Sie diese Stile verwenden, respektiert Ihr Layout diese Einstellung ohne zusätzliche Arbeit.

Das Quell-Repository habe ich verwendet, um die Fenster in den Bildern oben zu erzeugen.