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

user_577878 0
Viewed 18814

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)
}
swiftui swift xcode iphone ios
6 Answers

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))
    }
}
user_16093980

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.

user_138352230

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

user_39176620

Actually what worked for me was (based on the answer by Ole-Kristian)

import SwiftUI

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

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

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

...very similar to the other answers with values for padding and lineSpacing reversed.

This was the only way I could get the bottom 'padding' to be the same as Figma.

user_67279630

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

user_131809240

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.

user_34958570
Related