Adding spacing between letters in text

SwiftUI gives us two different modifiers to modify the spacing between letters in a text. Depending on our need we can either space the letters more tightly or further apart depending on what you want.

The two modifiers tracking() and kerning() are used for adding space between the letters, but tracking will pull apart ligatures whereas kerning will not.

Below code will add 20 points of tracking to “Titanic”, which will place letters out a fair amount:

             Text("Titanic")
                 .tracking(20)

If you want to really see how kerning and tracking are different, try this:

         VStack {
             Text("dyfi")
                 .font(.custom("AmericanTypewriter", size: 60))
                 .kerning(amount)
             Text("dyfi")
                 .font(.custom("AmericanTypewriter", size: 60))
                 .tracking(amount)
             
             Slider(value: $amount, in: 0...100) {
                 Text("Adjust the spacing")
             }
         }

That uses the text string “ffi” in American Typewriter, which has a ligature making the letter combination look better. Because tracking pulls ligatures apart and kerning does not, as you adjust the slider upwards the first text will look more like “f fi” and the second will look more like “f f i”.