Text and Typography in SwiftUI
Text is SwiftUI's view for displaying strings, and it's one of the most frequently used views in any app. Beyond simply rendering characters, Text integrates with Apple's typography system: Dynamic Type scaling for accessibility, semantic font styles like .headline and .body that automatically adapt across devices, and built-in support for localized and interpolated strings, including automatically formatting dates, numbers, and measurements passed directly into a Text initializer.
Cricket analogy: A stadium's digital scoreboard doesn't just print raw characters — it auto-formats a bowler's economy rate to two decimals and localizes player names for the home broadcast, the same way SwiftUI's Text auto-formats dates, numbers, and measurements and adapts to Dynamic Type for accessibility.
Fonts and Semantic Text Styles
Rather than hardcoding a point size like .font(.system(size: 17)), SwiftUI encourages semantic text styles — .largeTitle, .title, .title2, .headline, .body, .callout, .caption — via .font(.headline). These map to Apple's Dynamic Type system, meaning the actual rendered size automatically scales when a user increases their preferred text size in Settings for accessibility. Hardcoding fixed point sizes bypasses this system entirely, making text unreadable for users who rely on larger accessibility text sizes.
Cricket analogy: A scoreboard that hardcodes the batsman's name at a fixed tiny font size ignores fans in the back stands who need it bigger; using a semantic style like .headline instead automatically scales for every viewer's needs, the way Dynamic Type respects a user's accessibility text-size setting.
struct ArticleHeader: View {
let title: String
let publishedDate: Date
let readingMinutes: Int
var body: some View {
VStack(alignment: .leading, spacing: 6) {
Text(title)
.font(.title.bold())
.foregroundStyle(.primary)
Text("Published \(publishedDate, style: .date) \u{2022} \(readingMinutes) min read")
.font(.subheadline)
.foregroundStyle(.secondary)
}
}
}Styling, Truncation, and Multi-Style Text
Modifiers like .bold(), .italic(), .underline(), .strikethrough(), and .foregroundStyle() compose with Text, and Text values can even be concatenated with + to mix styles within a single line, such as a bold name followed by regular-weight body copy. For long content, .lineLimit() caps the number of visible lines and .truncationMode() controls where an ellipsis appears, while .multilineTextAlignment() controls alignment when text wraps across multiple lines — a distinct concept from the containing stack's own alignment.
Cricket analogy: A player profile card mixes a bold player name with regular-weight team info concatenated in one line using +, while a long bio gets .lineLimit(3) with a trailing ellipsis and .multilineTextAlignment(.leading) for how the wrapped lines align.
Text automatically formats many value types passed via string interpolation — Text("\(date, style: .relative)") renders as '2 hours ago' style relative dates, and Text(price, format: .currency(code: "USD")) renders locale-correct currency formatting, without manual DateFormatter or NumberFormatter boilerplate.
Overriding text color with .foregroundStyle(.black) instead of .primary breaks automatic light/dark mode adaptation — always prefer semantic colors like .primary and .secondary unless a fixed color is truly intentional.
Textis SwiftUI's view for rendering strings, with deep integration into Apple's typography and accessibility systems.- Semantic font styles like
.headlineand.bodyscale automatically with the user's Dynamic Type accessibility setting. - Hardcoded fixed-size fonts bypass Dynamic Type scaling and hurt accessibility.
Textvalues can be concatenated with+to mix styles (e.g. bold plus regular) within one line.Textauto-formats interpolated dates, numbers, and currency without manual formatter boilerplate.- Semantic colors like
.primary/.secondaryshould be preferred over fixed colors to support light/dark mode.
Practice what you learned
1. Why does SwiftUI encourage semantic font styles like `.headline` over fixed point sizes?
2. How can two differently styled spans of text be combined into a single line in SwiftUI?
3. What does `Text("\(date, style: .relative)")` produce?
4. Why is `.foregroundStyle(.primary)` generally preferred over `.foregroundStyle(.black)`?
5. Which modifier controls how many lines of text are shown before truncating?
Was this page helpful?
You May Also Like
Modifiers in SwiftUI
How view modifiers work under the hood, why order matters, and how chained modifiers build up new wrapped view types.
Views and the View Protocol
How the `View` protocol works, what `body` must return, and how SwiftUI composes small views into larger interfaces.
Human Interface Guidelines and Theming
How to apply Apple's Human Interface Guidelines in SwiftUI apps using semantic colors, Dynamic Type, dark mode, and adaptive layout so apps feel native.
Buttons and User Input in SwiftUI
Learn how SwiftUI captures user intent through Button, Toggle, Slider, Stepper, and TextField, and how actions drive state changes in a declarative UI.