Styles de police par défaut en Swift

Au lieu de coder en dur des tailles en points, les plateformes d'Apple vous offrent un ensemble de styles de police sémantiques — body, headline, caption, et consorts. Vous choisissez le rôle que joue le texte et le système choisit la taille, la graisse et l'interligne, l'adapte au réglage de taille de texte du lecteur, et le décline selon la plateforme. C'est la différence entre « police système de 17 points » et « ceci est du corps de texte » — et la seconde vieillit bien mieux.

Il y en a onze, de largeTitle jusqu'à caption2. En utiliser un tient en une ligne :

// 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 en orthographie deux légèrement différemment — .title1 et .caption1 là où SwiftUI a .title et .caption — mais ils correspondent aux mêmes styles.)

Pourquoi s'embêter, plutôt qu'une taille fixe ? Trois raisons : le texte s'adapte au réglage Dynamic Type de l'utilisateur sur iOS et iPadOS (un gain d'accessibilité offert), il reste visuellement cohérent dans toute votre app, et le même style est rendu selon des métriques adaptées à la plateforme — ce qui est exactement ce que montrent les deux captures d'écran ci-dessous.

sur Mac ↴

Sur le Mac, les styles sont un brin plus serrés — un body ici n'a pas la même taille en points qu'un body sur iPhone. macOS n'expose pas le curseur Dynamic Type à la manière d'iOS, mais recourir aux styles sémantiques vous donne tout de même un dimensionnement correct sur Mac et garde une base de code SwiftUI partagée visuellement cohérente sur les deux plateformes.

sur iOS ↴

Sur iPhone et iPad, ce sont les tailles que vous voyez partout dans l'interface du système, et elles grandissent et rétrécissent avec la taille de texte préférée de l'utilisateur. Construisez avec elles et votre mise en page respecte ce réglage sans aucun travail supplémentaire.

Dépôt source utilisé pour générer les fenêtres des images ci-dessus.