When choosing a font for Text, for example, we can change the font size using:
Text("Hello world").font(.system(.body))
In this case, body is a Font.TextStyle with the following options:
case largeTitle
case title
case headline
case subheadline
case body
case callout
case footnote
case caption
When deciding which font to choose for a component, I’d like to get an idea of what the font looks like. I found this Apple page which details the specs for some fonts:
However, these don’t match up 1:1 with Font.TextStyle, and they don’t include a preview. Is there anywhere with a preview of these sizes for some of the more common dynamic type sizes (e.g. xSmall, xxxLarge)?
The only image I’ve found is this:
Alternatively, you can also preview this easily in SwiftUI:
struct Font_Previews: PreviewProvider {
static var previews: some View {
let allTextStyles: [(Font.TextStyle, String)] = [
(.largeTitle, "largeTitle"),
(.title, "title"),
(.headline, "headline"),
(.subheadline, "subheadline"),
(.body, "body"),
(.callout, "callout"),
(.footnote, "footnote"),
(.caption, "caption"),
]
assert(Set(Font.TextStyle.allCases) == Set(allTextStyles.map { $0.0 }), "Is one of the styles missing?")
return
ScrollView {
VStack {
VStack {
Text("Extra small")
ForEach(Array(allTextStyles.enumerated()), id: .offset) { index, textStyle in
Text(textStyle.1).font(.system(textStyle.0))
}
}.environment(.sizeCategory, .extraSmall)
Divider()
VStack {
Text("Default")
ForEach(Array(allTextStyles.enumerated()), id: .offset) { index, textStyle in
Text(textStyle.1).font(.system(textStyle.0))
}
}
Divider()
VStack {
Text("Extra extra extra large")
ForEach(Array(allTextStyles.enumerated()), id: .offset) { index, textStyle in
Text(textStyle.1).font(.system(textStyle.0))
}
}.environment(.sizeCategory, .accessibilityExtraExtraExtraLarge)
}
}
}
}
