Gavin Wiggins

Text

Written on November 13, 2022

A Text view displays one or more lines of read-only text.

text

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Basic text view
            Text("Hello there")

            // Text with inline image
            Text("Empty trash \(Image(systemName: "trash"))")
                .padding()
        }
        .frame(width: 400, height: 300)
    }
}

Font

Use the font instance method to apply a specific font to an individual Text view.

text font

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {

            Group {
                // Large title font
                Text("Large Title").font(.largeTitle)

                // Title font
                Text("Title").font(.title)

                // Title 2 font
                Text("Title 2").font(.title2)

                // Title 3 font
                Text("Title 3").font(.title3)

                // Headline font
                Text("Headline").font(.headline)

                // Subheadline font
                Text("Subheadline").font(.subheadline)
            }

            Group {
                // Body font
                Text("Body").font(.body)

                // Callout font
                Text("Callout").font(.callout)

                // Caption font
                Text("Caption").font(.caption)

                // Caption 2 font
                Text("Caption 2").font(.caption2)

                // Footnote font
                Text("Footnote").font(.footnote)
            }
        }.frame(width: 400, height: 400)
    }
}

Styles

The Text view in SwiftUI provides several modifiers to customize the appearance and style of the text.

text styles

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            Group {
                Text("Bold text").bold()
                Text("Italic text").italic()
                Text("Ultralight text").fontWeight(.ultraLight)
                Text("Strikethrough text").strikethrough()
                Text("Strikethrough blue").strikethrough(color: .blue)
                Text("Underline text").underline()
                Text("Underline green").underline(color: .green)
            }
            Group {
                Text("Upper case").textCase(.uppercase)
                Text("Lower case").textCase(.lowercase)
                Text("Color red text").foregroundColor(.red)
                Text("Purple and ").foregroundColor(.purple) + Text("Blue").foregroundColor(.blue)
            }
        }
        .frame(width:400, height: 400)
    }
}

Vertical text

Vertical text can be accomplished by rotating a text view 90 degrees. To rotate the frame of the text view, the fixed size modifier must be implemented along with defining the frame size.

vertical text

import SwiftUI

struct ContentView: View {

    var body: some View {
        HStack {
            Text("Vertical text")
                .rotationEffect(.degrees(-90))
                .fixedSize()
                .frame(width: 20, height: 180)
            Circle()
                .frame(width: 200)
        }
        .frame(width: 400, height: 300)
    }
}