Change Spacing Between Text Letters

#15 - There is three different modifiers to use

Greetings SwiftUI enthusiasts!

Welcome back to a new issue of Learning SwiftUI. I hope you had a great week so far, I know I have. The weather has been great in Sweden the whole week, and for someone who doesn't get to see the sun for that many months during the year, I must admit that I love it. 

For this post, we will go through three different modifiers that you can use to change spacing between your letters in a text view.

Let’s start with setting up a regular text view:

struct LetterSpacingTextView: View {
    var body: some View {
        VStack {
            VStack(alignment: .leading) {
                Text("Regular text view:")
                    .foregroundColor(.secondary)
                    .font(.title)

                Text("Hello SwiftUI World!")
                    .font(.largeTitle)
            }
        }
        .padding(.horizontal)
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

This is the regular text view as we know it. But let’s say you want to add some spacing to the letters, how would you go about that? There are probably 100 different ways to do this, but we will go the easy way in this post. Here you can see the difference with the monoSpaced modifier.

struct LetterSpacingTextView: View {
    var body: some View {
        VStack(spacing: 20) {
            VStack(alignment: .leading) {
                Text("Regular text view:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With monoSpaced:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .monospaced()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(.horizontal)
    }
}

Pretty neat right? I know I like it. Another modifier you can use is the kerning modifier. It will allow you to decide the spacing yourself, here is an example when it is set to 20.

---

Want to learn more about SwiftUI animations?

I created a book for anyone new to SwiftUI that wants to develop their SwiftUI animation skills. The book cover the basics and more advance techniques to animating objects and views in SwiftUI. Start learning today and get a 30% discount by clicking the link below:

Book Deal! 30% Discount for Learning SwiftUI Animations - The Beginner Roadtrip

---

struct LetterSpacingTextView: View {
    var body: some View {
        VStack(spacing: 20) {
            VStack(alignment: .leading) {
                Text("Regular text view:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With monoSpaced:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .monospaced()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With kerning:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .kerning(20)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(.horizontal)
    }
}

You can achieve the same thing with the tracking modifier as well.

struct LetterSpacingTextView: View {
    var body: some View {
        VStack(spacing: 20) {
            VStack(alignment: .leading) {
                Text("Regular text view:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With monoSpaced:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .monospaced()
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With kerning:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .kerning(20)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack(alignment: .leading) {
                Text("With tracking:")
                    .foregroundColor(.secondary)
                    .font(.title)
                Text("Hello SwiftUI World!")
                    .font(.title)
                    .tracking(10)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(.horizontal)
    }
}

There you have it, three different ways to change the letter spacing on a text view. One challenge for this code, if you like to have one, is to adjust the code so you only need to use the leading alignment once instead of using it for each VStack view.

Hope you have a great Sunday and keep on coding friends!

/Mr SwiftUI