How to set line height for a single line text in SwiftUI?

Question

Currently, I have been using .lineSpacing(...), but this only works for multi-line text.

/// Sets the amount of space between lines of text in this view.
///
/// - Parameter lineSpacing: The amount of space between the bottom of one
///   line and the top of the next line.
@inlinable public func lineSpacing(_ lineSpacing: CGFloat) -> some View

What this means is that it's harder for me to translate fonts exactly from sketch/figma, and I need to play around with the padding to get it right. Here is an example that shows this:

VStack {
    // Line spacing is ignored.
    Text("Hello, World!")
        .background(Color.green)
        .lineSpacing(50)

    Spacer()

    // Line spacing is correct.
    Text("Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.")
        .background(Color.green)
        .lineSpacing(50)
}

Solution 1

Based on the answer by Dan Hassan I made myself a ViewModifier to do this, and it looks like it works as intended

import SwiftUI

struct FontWithLineHeight: ViewModifier {
    let font: UIFont
    let lineHeight: CGFloat

    func body(content: Content) -> some View {
        content
            .font(Font(font))
            .lineSpacing(lineHeight - font.lineHeight)
            .padding(.vertical, (lineHeight - font.lineHeight) / 2)
    }
}

extension View {
    func fontWithLineHeight(font: UIFont, lineHeight: CGFloat) -> some View {
        ModifiedContent(content: self, modifier: FontWithLineHeight(font: font, lineHeight: lineHeight))
    }
}

Solution 2

For getting your text to match figma here's what finally worked for me. If for example your figma designs had a particular font of 16 pt with a line height of 32 pt:

let font = UIFont(name: "SomeFont", size: 16)!
return Text("Some Text")
    .font(.custom("SomeFont", size: 16))
    .lineSpacing(32 - font.lineHeight)
    .padding(.vertical, (32 - font.lineHeight) / 2)

In order to get the exact line spacing value we have to subtract our desired line height by the font's inherent line height but as you noted this will only take effect on multiline text and only between lines. We still need to account for the top and bottom padding of the text to match the desired line height so once again add the total line height minus the font's line height.

Solution 3

Xcode 12

Use the .leading() modifier to adjust line spacing.

Text("Hello\nworld").font(Font.body.leading(.tight))

Currently supported values: .tight, .standard and .loose.

Source: Apple Documentation

Solution 4

You can just use .frame modifier and set the height.

Solution 5

I have been successfully using the following combination:

• .frame(minHeight: lineHeight)
• .lineSpacing(abs(designSystemFont.lineHeight - uiKitFont.lineHeight))

The abs may not be needed (assuming the system's line height is taller than the default one, but you never know if that may change, so...)

This allows me to handle for handling single-line text while respecting the design system requirements.

View more solutions