Text in SwiftUI

In SwiftUI, Text is a view that displays and renders String on the screen. It allows you to create and format text elements within your app's user interface. Text can show static text or bind it to dynamic data using variables or constants.

Introduction 

For example:

struct TextView: View {
    var body: some View {
        Text("Text in SwiftUI")
    }
}

Result:

Text supports various modifiers to adjust its appearance, such as font, foreground color, alignment, and more. Let's learn all the common and foundation of it in this article.

Font

We can change the font of a Text view using the .font() modifier. There are various ways to set the font:

System Fonts:

System fonts with different styles and sizes using the .font() modifier with predefined styles like .title, .headline, .body, etc.

Text("Text in SwiftUI")
    .font(.title)

Result:

These will behave differently on multiple platforms and fit them the best. For example, the title font will be bigger in iPadOS than in iOS.

Or we can specify a system font to use, along with the style, weight, and any design parameters:

Text("Text in SwiftUI")
    .font(.system(size: 54, weight: .bold))

Result:

We can adjust the size, weight, and other attributes of the font using modifiers like .fontWeight(), .italic(), etc., along with the .font() modifier.

VStack {
    Text("Text in SwiftUI")
        .font(.title)
        .fontWeight(.regular)
    
    Text("Text in SwiftUI")
        .font(.title)
        .fontWeight(.semibold)
    
    Text("Text in SwiftUI")
        .font(.title)
        .italic()
}

Result:

Custom Fonts:

For custom fonts added to the project, use the .font() modifier with the Font.custom() method to specify the custom font's name and size.

struct TextView: View {
    var body: some View {
        VStack {
            Text("Text in SwiftUI")
                .font(.system(size: 54, weight: .bold))
            Text("Text in SwiftUI")
                .font(Font.custom("Ephesis-Regular", size: 54))
        }
    }
}

Result:

We now have a different more fancy font style. To learn how to set up a custom font, take a look at Apple Documentation.

To find more interesting fonts: Google Fonts.

Color

With the new update this year,  modifier will soon be depreciated:

So to change text color, we use .foregroundStyle() modifier:

VStack {
    Text("Text in SwiftUI")
        .font(.title)
        .foregroundStyle(.green)
    
    Text("Text in SwiftUI")
        .font(.title)
        .foregroundStyle(.yellow)
    
    Text("Text in SwiftUI")
        .font(.title)
        .foregroundStyle(.primary)
    
    Text("Text in SwiftUI")
        .font(.title)
        .foregroundStyle(.secondary)
        
    Text("Text in SwiftUI")
    	 .font(.title)
    	 .foregroundStyle(Color("CustomColor"))
}

We can use it with built-in colors or load a custom color as well:

An important thing to point out here is that colors like primary or secondary will automatically adapt to both light mode and dark mode. We get it out of the box.

Alignment

By default, the Text will only require enough space for its inside String content. So with short String then alignment won't matter because left or right is not different.

But for long String is when we need it with the help of multilineTextAlignment(_:) modifier:

VStack {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sapien ac odio vulputate pharetra.")
        .font(.title)
        .foregroundStyle(.red)
    
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sapien ac odio vulputate pharetra.")
        .font(.title)
        .foregroundStyle(.green)
        .multilineTextAlignment(.center)
}

Result:

Use this modifier to set an alignment for a multiline block of text.

Dealing with long text

It's a very common UI problem when we have to display a long String. Application UI may break, or stretch. In SwiftUI, there are some very neat modifiers to help you with this problem.

The lineLimit(_:) will set the maximum number of lines that text can occupy in this view.

 Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sapien ac odio vulputate pharetra.")
        .font(.title)
        .multilineTextAlignment(.center)
        .lineLimit(2)

Result:

With this, we can guarantee our UI will look the same and not breaking change the application layout. But we can do it better using 2 other modifiers allowsTightening(_:) and minimumScaleFactor(_:):

    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sapien ac odio vulputate pharetra.")
        .font(.title)
        .multilineTextAlignment(.center)
        .lineLimit(2)
        .allowsTightening(true)
        .minimumScaleFactor(0.5)

Result:

allowsTightening(_:) allow text in the view to be able to compress the space between characters when necessary to fit text in a line. minimumScaleFactor(_:) will set the minimum amount that text in this view scales down to fit in the available space.

Here we allow space to be reduced and font size can scale down to 50%. And now our long text is fit and displayed fully.

Another commonly used modifier is lineSpacing(_:) which sets the amount of space between lines of text in this view.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sapien ac odio vulputate pharetra.")
        .font(.title)
        .multilineTextAlignment(.center)
        .lineLimit(2)
        .allowsTightening(true)
        .minimumScaleFactor(0.5)
        .lineSpacing(15)

Conclusion

In SwiftUI, the Text view is a fundamental component for displaying text within your app's user interface.

In this article, we have learned:

1. Change font from system to custom font.
2. Change text color.
3. Alignment guide and how to fix common problems for long text.