Make specific parts of text bold in SwiftUI

In this tutorial, we will see how to make a specific part of text bold in SwiftUI.

Suppose, we have the text “Welcome to CodeSpeedy” and we want a specific word of the text to be bold and the rest will remain the same. We can do that in various methods like using markdown, concatenating text views together, etc.

Now, have a look at the methods below to achieve this task.

Using markdown

Markdown is a way to format and display text using Markdown syntax within a Text view. This is a lightweight markup language that we can use to make text bold, italic, links, etc.

So, we can easily make a specific part of the string bold by wrapping it within the double asterisks (**).

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        Text("Welcome to **CodeSpeedy**")
            .font(.largeTitle)
        
    }
}

In the above program, I have applied the .font(.largeTitle) modifier on the Text view to make the entire text large to improve readability. This is not required.

Output:

We can also use double underscores (__) instead of double asterisks to make the text bold.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
       
        Text("Welcome to __CodeSpeedy__")
            .font(.largeTitle)
        
    }
}

Output:

Using + to concatenate Text views

We can concatenate different Text views with multiple styles together using the + operator.

So, I will create two Text views and apply the .bold() modifier to the targeted view, and concatenate them with the + operator.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Welcome to")
            .font(.largeTitle) +
        
        Text("CodeSpeedy")
            .bold()
            .font(.largeTitle)
    }
}

In the above program, I have created two Text views and concatenated them with the + operator.

Then, I have applied the .bold() modifier on the second text view to make the text “CodeSpeedy” bold.

The .font(.largeTitle) modifier is used to make the text large, this is not required.

Output:

As you can see in the above output, there is no space between the first and second Text views. We can simply fix this issue by using a single space in the second text view before the text “CodeSpeedy“.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Welcome to")
            .font(.largeTitle) +
        
        Text(" CodeSpeedy")
            .bold()
            .font(.largeTitle)
    }
}

Output:

We can also add space in the first Text view after the text “to” to fix the issue.

Using Text with localizedStringKey

We can use string interpolation (\( )) to combine multiple Text views into a single Text view.

Inside the string interpolation, we can wrap the part of the text that needs to be bold with the .bold() modifier.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        Text("\(Text("Welcome to").bold()) \(Text("CodeSpeedy"))")
            .font(.largeTitle)
        
    }
}

In the above program, I have created a Text view, and inside the Text view,  I have used string interpolation (\( )) to concatenate two Text views.

Then, I have wrapped the first Text view with the .bold() modifier to make it bold.

Output:

Using multiple Text views with HStack

Inside the HStack, we can create multiple Text views and apply various modifiers to each Text view to customize the appearance of each part of the text.

The HStack is used to arrange these Text views horizontally.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("This")
                .bold() // To make the text bold
            Text("is")
                .foregroundColor(.mint) // To make the text color mint
            Text("a")
                .underline() // To give a underline below the text
            Text("Text")
                .italic()  // To make text style italic
            Text("View")
        }
        .font(.largeTitle)
    }
}

In the above code, I have created five Text views within a Hstack to align all the views horizontally.

Then, on each Text view, I have applied different modifiers such as bold(), foregroundColor(), underline(), italic() to customize the appearance of each text string.

Output:

We can also do the same thing using the + operator by concatenating the Text views.