Add spacing between letters in text in SwiftUI

In this tutorial, we will see how to add spacing between letters in text in SwiftUI.

In SwiftUI there are two modifiers that allows us to adjust the spacing between letters. The kerning() modifier sets the spacing or kerning between letters and the tracking() modifier sets the tracking for the text. By using these modifiers we can make the letters apart farther or closer together based on our preferences.

Using the kerning() modifier

We can adjust the letter spacing by using this kerning() modifier. This modifier takes both positive and negative values as its parameter. The positive values to increase the spacing, and the negative values to reduce it.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("CODESPEEDY").kerning(4)
            Text("CODESPEEDY")
            Text("CODESPEEDY").tracking(-4)
        }
        .font(.title)
    }
}

Output:

Using the tracking() modifier

The tracking() modifier in SwiftUI also helps us to control the space between characters in the text. It is like adjusting the gaps between letters to make text easier to read, particularly in longer text passages.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("CODESPEEDY").tracking(4)
            Text("CODESPEEDY")
            Text("CODESPEEDY").tracking(-4)
        }
        .font(.title)
    }
}

Output: