Line Height in App Development — What It Is and Its Impact on Typography

What Is Line Height in Typography

Line Height is a fundamental typographic parameter that determines the distance between the baselines of consecutive lines of text. In web and mobile development, line height sets the vertical rhythm of text: each line occupies a specific height, and this parameter adds up when moving to the next line. Line height includes not only the actual glyph height (ascender + descender) but also additional space that improves readability.

Mathematically, line height is expressed as: line-height = font-size × multiplier. If font-size = 16 px and multiplier = 1.5, then line-height = 24 px. The leading in this case would be 24 - (ascender + descender) pixels. Most design systems and platforms use the multiplier precisely because it automatically scales when the font size changes.

According to Material Design Type Scale (2025), line height is one of the three key parameters of an application's typographic system, alongside font-size and font-weight. Consistent line height values for all levels of the typographic hierarchy create a vertical rhythm that makes the interface visually cohesive. A 10% deviation in line-height from the optimal value is already noticeable to the naked eye and reduces the perceived quality of the interface.

Line Height vs Leading: What's the Difference

Leading is a historical typographic term that denotes the distance between lines from baseline to baseline minus the glyph height. In metal type, leading refers to the lead strips inserted between lines to increase spacing. Line height is a more modern concept that includes both the font height and leading.

In practice, the difference matters when translating designs from Figma or Sketch into code. Design tools typically specify line-height (or simply line height). Mobile platform APIs may use different terms: iOS uses lineSpacing (which is closer to leading) along with minimumLineHeight/maximumLineHeight, Android uses LineHeightStyle with alignment and trim, Flutter uses height (unitless multiplier).

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

The key difference: if you set minimumLineHeight, all lines will use the same height, which is good for a rhythmic grid. If you set only lineSpacing, the line height will vary depending on the font size — this is a more flexible but less predictable approach. For design systems, minimumLineHeight is recommended because it gives a strictly controlled result.

According to IBM Carbon Design System — Typography Guidelines (2025), the difference between line height and leading is especially noticeable when using custom fonts. If the font has a large built-in leading (e.g., SF Pro), lineSpacing = 0 gives an acceptable result. If the font's leading is small (some open-source typefaces), lines will appear clumped together without additional lineSpacing.

Optimal Line Height for Mobile Interfaces

Optimal line height depends on several factors: font size, line length, typeface, and target audience. For body text on mobile devices (line length 35–55 characters), the recommended range is 1.4–1.6 times the font size. This value provides sufficient vertical spacing for comfortable eye movement between lines without losing visual text cohesion.

For headings, where line length is usually shorter (2–6 words), line height can be smaller — 1.1–1.25 times the font size. Headings do not require large interline spacing since their primary function is to attract attention, not for extended reading. Additionally, large heading font sizes (24–32 pt) with line-height 1.5 would create excessive spacing that breaks the vertical rhythm of the page.

• Body Text (16–18 pt) — line-height 1.4–1.6. Minimum for comfortable reading on mobile devices where line length is limited by screen width.
• Small Text (11–13 pt) — line-height 1.3–1.5. Small font sizes require a smaller multiplier since lines are shorter and the eye finds the next line faster.
• Large Text (20–32 pt) — line-height 1.1–1.25. The larger the font, the less relative interline spacing is needed for readability.
• Monospace Text — line-height 1.3–1.5. Monospace fonts (for code) usually have larger metrics, so line-height can be reduced to 1.3.

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

According to W3C — Accessibility Requirements for Typography (2025), line height below 1.2 for body text is considered an accessibility barrier: users with dyslexia and visual impairments experience significant difficulty reading dense text. WCAG 2.2 recommends line-height of at least 1.5 for main content, though in mobile interfaces this value can be lowered to 1.4 considering the limited screen width.

Line Height in iOS: UIKit and SwiftUI

In iOS, line height is controlled via NSMutableParagraphStyle or built-in SwiftUI modifiers. UIKit provides three key properties: minimumLineHeight and maximumLineHeight (set exact line height) and lineSpacing (additional spacing between lines). When using TextKit (NSTextStorage, NSLayoutManager), line height is accounted for in lineFragmentRect and affects text block geometry calculation.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

In SwiftUI, line height is set via the .lineSpacing(value) modifier, which adds extra space between lines, or via .font with a custom TextStyle that includes line height. SwiftUI also supports Dynamic Type: the specified line height scales when the user changes the font size in settings.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

According to Apple HIG — Typography Implementation (2025), when using fixed line-height via minimumLineHeight, you must ensure the value is not less than the font's natural line-height. If minimumLineHeight is smaller than ascender + descender, UIKit ignores the setting and uses the natural height. This can lead to unexpected results when changing the font or size.

Line Height in Android: View System and Compose

In Android development, line height is managed differently in the classic View system and Jetpack Compose. In the View system, the method TextView.setLineSpacing(extra, multiplier) is used. The extra parameter is additional space in pixels, multiplier is a factor of the natural line height. The resulting height = natural line-height × multiplier + extra.

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

In Jetpack Compose, the LineHeightStyle class is used to manage line height, allowing you to set Alignment and Trim of interline space. This provides finer control than a simple multiplier. For example, you can specify that the additional interline space should be distributed equally above and below the line (align.Center) or added entirely above (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

According to Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (default) preserves spacing on the first and last lines, which can break alignment in Card or Column. Trim.Both is recommended for containers with fixed height, and Trim.LastLine for text blocks where the bottom edge matters.

Line Height in Flutter: TextStyle and StrutStyle

In Flutter, line height is set via the height property of the TextStyle class. It is a unitless multiplier of font-size: height: 1.5 with fontSize: 16 gives line-height 24.0. The height value implicitly multiplies fontSize, so line-height scales proportionally when the font size changes. Flutter also offers StrutStyle — a mechanism for enforcing a fixed line-height regardless of the actual glyphs in the line.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle is especially useful for lists with different font sizes (e.g., chats, news feeds) where all lines need to have the same height regardless of content. Without StrutStyle, a line containing only letters without descenders will have a smaller actual height than a line with letters like "p" and "y", causing text jitter during scrolling.

According to Flutter Documentation — Text Layout (2025), StrutStyle with forceStrutHeight: true guarantees that each line's height equals the specified value, and actual glyphs are aligned by baseline within this space. This is the standard approach for text lists where vertical rhythm is critical for visual perception.

Adaptive Line Height for Different Screens

Mobile applications run on devices with different screen sizes, pixel densities, and accessibility settings. Line height must adapt to these changes while maintaining readability. The main rule: use unitless multipliers rather than fixed values in px or pt, so that line-height scales along with font-size.

When using Dynamic Type (iOS) or fontScale (Android), the font size can increase by 20–50% relative to baseline. Line-height specified via a multiplier automatically scales. If line-height is set as a fixed value (e.g., 24 px at font-size 16 pt), when the font increases to 22 pt the relative line-height drops to 1.09 — already below the readability threshold.

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

According to Material Design — Responsive Typography (2025), for tablets and large screens (over 600 dp width), body text line-height should be increased by 0.1–0.2 compared to phones, since the line length becomes larger. For foldable devices where screen width changes dynamically, line-height should be recalculated on every configuration change.