SwiftUI: Text Customization

5 min readJan 1, 2023

In this chapter, We will learn how to work with Text to present information, also learn how to customize the text.

Change font type and text color

fontWeight : bold, heavy, medium, light etc. It actually returns to you a new view that has the bolded text.

The font modifier lets you change the font properties. It can be used like this.

.font(.system(.title, design: .rounded))

To use a fixed-size font, write the code like this:

.font(.system(size: 20))

The foregroundColor modifier accepts a value of Color. Here is a peace of code we write for font and color.

private var textWithFontAndColor: some View {
    Section {
        Text("I am inevitable")
            .fontWeight(.bold)
        
        Text("And I am IronMan")
            .fontWeight(.bold)
            .foregroundColor(.red)
        
    }header: {
        Text("Font Types and Color")
    }
}

This is the output of above code.

Monospced Digit

It Modifies the text view’s font to use fixed-width digits, while leaving other characters proportionally spaced.

Sample code

private var textWithMonoSpaced: some View {
    Section {
        Group
        {
            Text("Normal Date")
            Text(Date().formatted(date: .long, time: .complete))
                             .font(.system(size: 20))
        }
        
        Group
        {
            Text(Date().formatted(date: .long, time: .complete))
                             .font(.system(size: 20))
                             .monospacedDigit()
            Text("MonoSpaced Applied:")
        }
    }header: {
        Text("Monospaced Digit")
    }
}

As you can see in output, 2nd date is taking little bit more space then 1st date text.

This modifier only affects numeric characters, and leaves all other characters unchanged.

Strikethrough

It Applies a strikethrough to the text.

Here we can pass three parameters with this modifier

isActive set true if you want to apply.
Color color of stroke
Pattern enum, where we can set the type of stroke like dot, dash etc.

Example Code

private var textWithStrikeThrough: some View {
    Section {
        Text("I am inevitable")
            .strikethrough(true,color: .red)
        
        Text("I am inevitable")
            .strikethrough(true)

    }header: {
        Text("Strike Through with and without custom color")
    }
}

Output:

Underline

It Applies a underline to the text.

Parameters are the same as Strikethrough.

SampleCode:

private var textWithUnderline: some View {
    Section {
        Text("May the force be with you.")
            .underline(true, color: .blue)
        
        Text("May the force be with you.")
            .underline(true)
        
        Text("May the force be with you.")
            .underline(true, pattern: .dashDot)

    }header: {
        Text("Underline with and without custom color")
    }
}

Tracking and Kerning

SwiftUI gives us two modifiers to control the spacing of characters inside a text view.

Both Tracking and Kerning are the key to achieve this.

Main diff between Tracking and Kerning is

Tracking will pull apart ligatures whereas Kerning will not, and Kerning will leave some trailing whitespace whereas tracking will not.

Sample Code:

private var textWithKerning: some View {
    Section {
        Text("ABCDEF").kerning(-3)
        Text("ABCDEF")
        Text("ABCDEF").kerning(3)
    }header: {
        Text("Text with Kerning Example")
    }
}

private var textWithTracking: some View {
    Section {
        Text("ABCDEF").tracking(-3)
        Text("ABCDEF")
        Text("ABCDEF").tracking(3)
    }header: {
        Text("Text with Tracking Example")
    }
}

BaseLineOffSet

Sets the vertical offset for the text relative to its baseline.

Change the baseline offset to move the text in the view (in points) up or down relative to its baseline.

To give better idea how it works, I have add a border around each text view, you can see how the text moves, and how that affects the view.

private var textWithBaselineOffSet: some View {
    Section {
        HStack(alignment: .top) {
                 Text("Hello")
                     .baselineOffset(-10)
                     .border(Color.red)
                 Text("Hello")
                     .border(Color.green)
                 Text("Hello")
                     .baselineOffset(10)
                     .border(Color.blue)
             }
             .background(Color(white: 0.9))

    }header: {
        Text("Text with baselineOffSet Example")
    }
}

MarkDown Text

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

SwiftUI has built-in support for rendering Markdown.

To use Markdown for rending text, all you need to do is specify the text in Markdown. The Text view automatically renders the text for you. Here is an example:

private var textWithMarkDown: some View {
    Section {
        Text("Well, *John Wasn't Exactly The Boogeyman*. **He Was The One You Sent To Kill The Fuc*ng Boogeyman**. [Here is my Button Tutorial](https://medium.com/@sharma17krups/swiftui-button-customization-56dd71279845)")
        
    }header: {
        Text("Text with MarkDown")
    }
}

Text with Multiple lines

Text supports multiple lines by default. You’re free to replace the paragraph of text with your own text. Just make sure it’s long enough.

We can set textalightment like this

.multilineTextAlignment(.center)

In some cases, you may want to limit the number of lines to a certain number. You use the lineLimit modifier to control it.

.lineLimit(3)

Another modifier, truncationMode specifies where to truncate the text within the text view. You can truncate at the beginning, middle, or end of the text view.

Here is a example for Multiple lines.

private var textWithMultipleLines: some View {
    Section {
        Text("It's good to meet you, Dr. Banner. Your work on anti-electron collisions is unparalleled. And I'm a huge fan of the way you lose control and turn into an enormous green rage monster.")
            .lineSpacing(10)
            .multilineTextAlignment(.center)
            .foregroundColor(.green)
        
    }header: {
        Text("Text with Multiple lines")
    }
}