SwiftUI – Text Line Height

In SwiftUI, you can adjust the spacing between lines of text using the .lineSpacing() modifier or by customizing the line height through the .lineHeight() property of a custom font. Line height customization is useful for enhancing readability, aligning text with your app’s design, or creating visually appealing typography.

In this SwiftUI tutorial, we will learn how to control text line height using .lineSpacing() and custom font styles in SwiftUI.


Adjusting Line Height in SwiftUI

SwiftUI provides two primary methods for adjusting line height:

  • Using .lineSpacing(): This modifier adds space between lines of text in a multi-line Text view.
  • Using custom fonts: You can define custom line height by applying a font with specific line height attributes.

Examples

Let’s explore how to adjust line height in SwiftUI with practical examples.

Example 1: Using .lineSpacing()

The .lineSpacing() modifier adjusts the spacing between lines of text in a multi-line Text view:

Code Example:

</>
Copy
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("SwiftUI makes building interfaces easy.\nThis is an example of custom line spacing.")
            .lineSpacing(10) // Adds 10 points of space between lines
            .padding()
    }
}
SwiftUI - Text Line Height - Example Using .ineSpacing

Explanation:

  • The .lineSpacing(10) modifier adds 10 points of space between each line of text.
  • This works for any multi-line Text view.

Result: The text appears with increased spacing between lines for better readability.


Example 2: Using Custom Fonts with Line Height

You can use custom fonts to control line height more precisely. Here’s how to apply a custom font with a specific line height:

Code Example:

</>
Copy
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("SwiftUI allows precise control over text attributes.\nYou can customize line height with custom fonts.")
            .font(.system(size: 16, weight: .regular, design: .default)
                .leading(.loose)) // Adjusts line height to a looser spacing
            .padding()
    }
}

Explanation:

  • The .font(.system(...).leading(.loose)) applies a system font with loose line height.
  • Other options for .leading() include .tight (smaller line height) and .standard (default line height).

Result: The text appears with a looser line height for a spacious, elegant look.


Example 3: Combining Line Spacing and Fonts

You can combine .lineSpacing() and custom fonts for even more control over line height:

Code Example:

</>
Copy
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("SwiftUI offers advanced styling options.\nThis example combines line spacing with custom fonts.")
            .font(.system(size: 18, weight: .medium, design: .default)
                .leading(.standard)) // Standard line height
            .lineSpacing(18) // Adds 8 points between lines
            .padding()
    }
}
SwiftUI - Text Line Height - Example Combining Line Spacing and Fonts

Explanation:

  • The custom font defines the base line height using .leading(.standard).
  • The .lineSpacing(18) modifier adds 18 points of extra space between lines.

Result: The text is displayed with a balanced line height, combining both standard leading and additional spacing.


Conclusion

Adjusting text line height in SwiftUI is straightforward with the .lineSpacing() modifier and custom font attributes like .leading(). By combining these tools, you can create text layouts that improve readability and align with your app’s design requirements.