Line Height in app-ontwikkeling — wat het is en invloed op typografie

Wat is Line Height in typografie

Line Height (regelhoogte) — is een fundamentele typografische parameter die de afstand tussen de basislijnen (baseline) van opeenvolgende regels bepaalt. In web- en mobiele ontwikkeling stelt line height het verticale ritme van tekst in: elke regel neemt een bepaalde hoogte in beslag en deze parameter wordt opgeteld bij de overgang naar de volgende regel. Line height omvat niet alleen de werkelijke hoogte van glyphs (ascender + descender), maar ook extra ruimte die de leesbaarheid verbetert.

Wiskundig wordt line height uitgedrukt als: line-height = font-size × multiplier. Als font-size = 16 px en multiplier = 1.5, dan is line-height = 24 px. De interlinie (leading) is in dit geval 24 - (ascender + descender) pixels. De meeste designsystemen en platforms gebruiken de multiplier, omdat deze automatisch schaalt bij het wijzigen van de lettergrootte.

Volgens Material Design Type Scale (2025) is line height — een van de drie belangrijkste parameters van het typografische systeem van een app, naast font-size en font-weight. Afgestemde line height-waarden voor alle niveaus van de typografische hiërarchie creëren een verticaal ritme dat de interface visueel samenhangend maakt. Een afwijking van line-height met 10% van de optimale waarde is al met het blote oog zichtbaar en vermindert de waargenomen kwaliteit van de interface.

Line Height vs Leading: wat is het verschil

Leading (uitgesproken als „leding") — is een historische typografische term die de afstand tussen regels van baseline tot baseline minus de glyphhoogte aangeeft. In metalen zetsel zijn leads loden stroken die tussen regels werden geplaatst om de afstand te vergroten. Line height — is een moderner begrip dat zowel de letterhoogte als leading omvat.

In de praktijk is het verschil belangrijk bij het overzetten van ontwerpen uit Figma of Sketch naar code. Ontwerptools geven meestal line-height (of gewoon regelhoogte) aan. In mobiele platforms kan de API anders heten: iOS gebruikt de term lineSpacing (dichter bij leading) samen met minimumLineHeight/maximumLineHeight, Android — LineHeightStyle met alignment en trim, Flutter — height (unitless multiplier).

// iOS: verschil tussen line height en line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Directe line height-instelling
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Interlinie (extra ruimte tussen regels)
paragraphStyle.lineSpacing = 4.0  // toegevoegd aan natuurlijke line height van lettertype

Het belangrijkste verschil: als je minimumLineHeight instelt, hebben alle regels dezelfde hoogte, wat goed is voor een ritmisch raster. Als je alleen lineSpacing instelt, verandert de regelhoogte afhankelijk van de lettergrootte — een flexibelere maar minder voorspelbare benadering. Voor designsystemen wordt aangeraden minimumLineHeight te gebruiken, omdat dit een strikt gecontroleerd resultaat geeft.

Volgens IBM Carbon Design System — Typography Guidelines (2025) is het verschil tussen line height en leading vooral merkbaar bij het gebruik van aangepaste lettertypen. Als een lettertype een grote ingebouwde leading heeft (bijv. SF Pro), geeft lineSpacing = 0 een acceptabel resultaat. Als de leading van het lettertype klein is (sommige open-source fonts), zien regels er zonder extra lineSpacing aan elkaar geplakt uit.

Optimale Line Height voor mobiele interfaces

Optimale line height hangt af van verschillende factoren: lettergrootte, regellengte, lettertype en doelgroep. Voor hoofdtekst op mobiele apparaten (regellengte 35–55 tekens) is het aanbevolen bereik 1.4–1.6 van font-size. Deze waarde zorgt voor voldoende verticale interval voor comfortabele oogbeweging tussen regels zonder verlies van visuele samenhang.

Voor koppen, waar de regellengte meestal korter is (2–6 woorden), kan line height kleiner zijn — 1.1–1.25 van font-size. Koppen hebben geen grote interlinie nodig, omdat hun hoofdfunctie aandacht trekken is, niet langdurig lezen. Bovendien zouden grote kopformaten (24–32 pt) met line-height 1.5 buitensporige witruimte creëren die het verticale ritme van de pagina verstoort.

• Hoofdtekst (16–18 pt) — line-height 1.4–1.6. Minimum voor comfortabel lezen op mobiele apparaten, waar de regellengte wordt beperkt door de schermbreedte.
• Kleine tekst (11–13 pt) — line-height 1.3–1.5. Klein formaat vereist een kleinere multiplier, omdat regels korter zijn en het oog sneller de volgende regel vindt.
• Grote tekst (20–32 pt) — line-height 1.1–1.25. Hoe groter het lettertype, hoe minder relatieve interlinie nodig is voor leesbaarheid.
• Monospace tekst — line-height 1.3–1.5. Monospace lettertypen (voor code) hebben meestal grotere metrics, dus line-height kan worden verlaagd tot 1.3.

// Flutter: line height in designsysteem
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
    );
}

Volgens W3C — Accessibility Requirements for Typography (2025) wordt line height onder 1.2 voor hoofdtekst beschouwd als een toegankelijkheidsbarrière: gebruikers met dyslexie en visuele beperkingen ervaren aanzienlijke moeilijkheden bij het lezen van dichte tekst. WCAG 2.2 beveelt line-height van ten minste 1.5 aan voor hoofdinhoud, maar in mobiele interfaces kan deze waarde worden verlaagd tot 1.4 gezien de beperkte schermbreedte.

Line Height in iOS: UIKit en SwiftUI

In iOS wordt line height beheerd via NSMutableParagraphStyle of ingebouwde SwiftUI-modifiers. In UIKit zijn drie belangrijke eigenschappen beschikbaar: minimumLineHeight en maximumLineHeight (bepalen exacte regelhoogte) en lineSpacing (extra ruimte tussen regels). Bij gebruik van TextKit (NSTextStorage, NSLayoutManager) wordt line height meegenomen in lineFragmentRect en beïnvloedt het de berekening van de tekstblokgeometrie.

// iOS UIKit: line height instellen via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Belangrijk: minimum + maximum = vaste 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 wordt line height ingesteld via de modifier .lineSpacing(value), die extra ruimte tussen regels toevoegt, of via .font met een aangepaste TextStyle inclusief line height. SwiftUI ondersteunt ook dynamische typen: de ingestelde line height schaalt wanneer de gebruiker de lettergrootte in instellingen wijzigt.

// SwiftUI: line height via lineSpacing
Text("Tekst met aangepaste regelafstand
tweede regel
derde regel")
    .font(.body)
    .lineSpacing(4)     // extra ruimte tussen regels

// SwiftUI: vaste line height via aangepaste stijl
Text("Kop met line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensatie voor precieze line-height

Volgens Apple HIG — Typography Implementation (2025) moet bij gebruik van vaste line-height via minimumLineHeight worden gecontroleerd of de waarde niet kleiner is dan de natuurlijke line-height van het lettertype. Als minimumLineHeight kleiner is dan ascender + descender, negeert UIKit de instelling en gebruikt de natuurlijke hoogte. Dit kan leiden tot onverwachte resultaten bij het wijzigen van lettertype of -grootte.

Line Height in Android: View-systeem en Compose

In Android-ontwikkeling wordt line height anders beheerd in het klassieke View-systeem en Jetpack Compose. In het View-systeem wordt de methode TextView.setLineSpacing(extra, multiplier) gebruikt. Parameter extra — extra ruimte in pixels, multiplier — multiplier van de natuurlijke regelhoogte. Resulterende hoogte = natuurlijke line-height × multiplier + extra.

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

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

In Jetpack Compose wordt voor het beheren van line height de klasse LineHeightStyle gebruikt, die het mogelijk maakt de uitlijning (Alignment) en trimming (Trim) van de interlinie in te stellen. Dit geeft fijnere controle dan een simpele multiplier. Men kan bijvoorbeeld specificeren dat de extra interlinie gelijkmatig boven en onder de regel wordt verdeeld (align.Center) of volledig boven wordt toegevoegd (align.Top).

// Jetpack Compose: LineHeightStyle voorbeeld
Text(
    text = "Voorbeeldtekst
met aangepaste LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

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

Volgens Android Developers — Compose Text Styling (2025) behoudt LineHeightStyle.Trim.None (standaard) de eerste en laatste regels met witruimte, wat de uitlijning in Card of Column kan verstoren. Aangeraden wordt Trim.Both te gebruiken voor containers met vaste hoogte en Trim.LastLine voor tekstblokken waar de onderrand belangrijk is.

Line Height in Flutter: TextStyle en StrutStyle

In Flutter wordt line height ingesteld via de eigenschap height van de klasse TextStyle. Dit is een unitless multiplier van font-size: height: 1.5 bij fontSize: 16 geeft line-height 24.0. De height-waarde wordt impliciet vermenigvuldigd met fontSize, dus bij wijziging van de grootte schaalt line-height proportioneel mee. Flutter biedt ook StrutStyle — een mechanisme om vaste line-height af te dwingen, onafhankelijk van de werkelijke glyphs in een regel.

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

// Flutter: StrutStyle voor vaste line height
Text(
    'Tekst met StrutStyle
vaste line height
onafhankelijk van glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle is vooral handig voor lijsten met verschillende formaten (bijv. chats, nieuwsfeeds), waar alle regels dezelfde hoogte moeten hebben ongeacht de inhoud. Zonder StrutStyle heeft een regel met alleen letters zonder descender een kleinere werkelijke hoogte dan een regel met de letters „p" en „y", wat leidt tot trillende tekst tijdens het scrollen.

Volgens Flutter Documentation — Text Layout (2025) garandeert StrutStyle met forceStrutHeight: true dat elke regel de ingestelde hoogte krijgt, terwijl de werkelijke glyphs binnen deze ruimte op baseline worden uitgelijnd. Dit is de standaardbenadering voor tekstlijsten waar verticaal ritme cruciaal is voor visuele perceptie.

Adaptieve Line Height voor verschillende schermen

Mobiele apps werken op apparaten met verschillende schermformaten, pixeldichtheden en toegankelijkheidsinstellingen. Line height moet zich aan deze veranderingen aanpassen en leesbaarheid behouden. De basisregel: gebruik dimensieloze multipliers (unitless), niet vaste waarden in px of pt, zodat line-height meeschaalt met font-size.

Bij gebruik van Dynamic Type (iOS) of fontScale (Android) kan de lettergrootte met 20–50% toenemen ten opzichte van de basis. Line-height ingesteld via een multiplier schaalt automatisch mee. Als line-height is ingesteld als vaste waarde (bijv. 24 px bij font-size 16 pt), dan daalt bij vergroting naar 22 pt de relatieve line-height naar 1.09 — wat al onder de leesbaarheidsdrempel ligt.

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

// Bereken line-height als multiplier van dynamisch lettertype
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Volgens Material Design — Responsive Typography (2025) wordt voor tablets en grote schermen (breder dan 600 dp) aangeraden de line-height van hoofdtekst met 0.1–0.2 te verhogen ten opzichte van telefoons, omdat de regellengte groter wordt. Voor vouwbare apparaten, waar de schermbreedte dynamisch verandert, moet line-height bij elke configuratiewijziging worden herberekend.