Leading en regelafstand: wat is het en configuratie in iOS en Android

Wat is leading en regelafstand

Leading (uitgesproken als „lending”) — is de verticale afstand tussen basislijnen van aangrenzende regels in typografie. De basislijn — de onzichtbare lijn waarop teksttekens worden geplaatst. Hoe groter de leading, hoe vrijer de regels ten opzichte van elkaar staan. In digitale typografie wordt leading vaak regelafstand of regelhoogte genoemd.

Historisch gezien verscheen de term in het tijdperk van metalen typografie: zetters plaatsten dunne loden strips tussen regels om de afstand te vergroten. In moderne lettertypen wordt leading bepaald als verhouding tot het lettertypeformaat. De standaard systeemwaarde is 1.2 (120% van het lettertypeformaat), maar voor lange teksten en mobiele interfaces wordt een hogere waarde aanbevolen. Volgens de Material Design Typography-richtlijnen is de optimale regelhoogte voor web- en mobiele interfaces 1.4-1.5 voor hoofdtekst.

Verschil tussen leading en line spacing: leading — de volledige afstand van basislijn tot basislijn, line spacing — de afstand tussen de ondergrens van de ene regel en de bovengrens van de volgende. In de meeste mobiele API’s (iOS NSParagraphStyle, Android TextView) wordt precies line spacing gebruikt als extra ruimte bovenop de natuurlijke regelhoogte. Dit is belangrijk om rekening mee te houden bij het berekenen van de totale regelafstand.

Optimale leading-waarden voor mobiele interfaces

Het kiezen van optimale leading hangt af van verschillende factoren: lettertypegrootte, regellengte, gebruikerscontext en doelgroep. Voor mobiele interfaces met een typische regellengte van 40-60 tekens wordt een leading van 1.4 tot 1.6 van het lettertypeformaat aanbevolen. Korte regels (labels, knoppen) kunnen een kleinere leading gebruiken — 1.0-1.2. Lange teksten (artikelen, beschrijvingen) — grotere leading, tot 1.8 voor maximale leesbaarheid.

Experimentele gegevens: onderzoek van het Wichita State University Software Usability Laboratory toonde aan dat leading 1.5 de leessnelheid met 7,5% verhoogt in vergelijking met leading 1.0 bij dezelfde regellengte. Voor gebruikers met dyslexie is de optimale leading nog hoger — tot 1,8. Deze gegevens worden bevestigd door de WCAG 2.2-richtlijnen, die de mogelijkheid vereisen om de regelafstand te vergroten tot 1,5 zonder verlies van inhoud.

Invloed van het lettertype: lettertypen met een hoge x-height (relatieve hoogte van kleine letters) vereisen een grotere leading dan lettertypen met een lage x-height. Bijvoorbeeld, Helvetica (hoge x-height) beveelt leading 1,5 aan voor body text, terwijl Didot (lage x-height) — 1,3. Dit komt doordat bij een hoge x-height regels visueel sneller samensmelten bij dezelfde regelafstand.

Implementatie van leading op iOS via NSParagraphStyle

Op iOS wordt de regelafstand beheerd via de klasse NSMutableParagraphStyle, die twee belangrijke eigenschappen bevat: lineSpacing (extra ruimte tussen regels in punten) en lineHeightMultiple (vermenigvuldiger van de regelhoogte). Deze eigenschappen werken samen: de totale regelhoogte wordt berekend als de natuurlijke lettertypehoogte vermenigvuldigd met lineHeightMultiple plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Methode 1: regelhoogtevermenigvuldiger
paragraphStyle.lineHeightMultiple = 1.5

// Methode 2: extra ruimte tussen regels
paragraphStyle.lineSpacing = 4.0

// Toepassen via NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — de voorkeursmethode, omdat deze automatisch schaalt bij wijziging van het lettertypeformaat. lineSpacing wordt ingesteld in absolute punten en schaalt niet, wat kan leiden tot inconsistenties bij gebruik van Dynamic Type. Volgens de Apple Text Programming Guide, gebruik lineHeightMultiple in combinatie met UIFontMetrics voor accessibility-compatibele interfaces.

SwiftUI biedt de .lineSpacing()-modifier voor Text en VStack. In tegenstelling tot UIKit wordt in SwiftUI de regelafstand ingesteld in punten en heeft geen ingebouwde vermenigvuldiger. Om de vermenigvuldiger te implementeren, moet de ontwikkelaar de regelafstand handmatig berekenen op basis van het lettertypeformaat. Beperking: SwiftUI ondersteunt lineHeightMultiple niet direct — gebruik .lineSpacing(CGFloat) met een berekende waarde.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% van lettertypeformaat
    }

    var body: some View {
        Text("Regelafstand")
        Text("Vermenigvuldiger 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configuratie van regelafstand op Android

Op Android wordt de regelafstand ingesteld via twee TextView-attributen: lineSpacingExtra (extra ruimte in px) en lineSpacingMultiplier (vermenigvuldiger van de regelhoogte, standaard 1.0). Net als bij iOS schaalt de vermenigvuldiger bij wijziging van het lettertypeformaat, terwijl extra een absolute waarde is. Voor accessibility-compatibele interfaces heeft het gebruik van de vermenigvuldiger de voorkeur.

// In XML-layout
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Programmatisch in Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — het moderne Android UI-framework — gebruikt de parameter lineHeight in de TextStyle-modifier. In tegenstelling tot de XML-benadering wordt lineHeight in Compose ingesteld als volledige regelhoogte in sp (standaard = fontSize * 1.2). Om de vermenigvuldiger in te stellen, specificeert de ontwikkelaar lineHeight als percentage van fontSize: Voorbeeld: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) geeft vermenigvuldiger 1.5.

Beperking: op Android vóór API 28 werken lineSpacingExtra en lineSpacingMultiplier niet correct met sommige lettertypen, vooral met aangepaste (TTF/OTF) lettertypen. Het wordt aanbevolen om te testen op echte apparaten en er rekening mee te houden dat systemTextView standaard lineSpacingMultiplier 1.0 gebruikt — zonder extra ruimte. Voor lange teksten in ScrollView moet u de regelafstand expliciet instellen.

Regelafstand in webontwikkeling via CSS line-height

Op het web wordt de regelafstand ingesteld via de CSS-eigenschap line-height, die een getal (vermenigvuldiger), een percentage, lengte-eenheden (px, em) of het trefwoord normal kan zijn. De numerieke vermenigvuldiger — de voorkeursmethode, omdat deze wordt overgeërfd en schaalt ten opzichte van het lettertypeformaat van onderliggende elementen. De waarde normal komt voor de meeste lettertypen overeen met ongeveer 1.2.

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

Numerieke vermenigvuldiger vs em: line-height: 1.5 en line-height: 1.5em zijn verschillende dingen. De numerieke vermenigvuldiger wordt overgeërfd als berekende waarde en wordt voor elk onderliggend element opnieuw berekend op basis van zijn font-size. Em wordt overgeërfd als een vaste berekende waarde op basis van de font-size van het bovenliggende element. Dit is een kritisch verschil: bij nesting font-size: 20px binnen font-size: 16px geeft line-height: 1.5 30px, en line-height: 1.5em — 24px (van de ouder). Aanbeveling: gebruik altijd de numerieke vermenigvuldiger.

Vergelijking van leading-instellingen op iOS, Android en het web

Ondanks verschillende API’s is het principe van het configureren van regelafstand hetzelfde op alle platforms. De vermenigvuldiger (multiplier) schaalt bij wijziging van het lettertypeformaat en is accessibility-vriendelijk. De absolute waarde (spacing) schaalt niet en kan problemen veroorzaken bij gebruik van Dynamic Type of grote tekstinstellingen.

Cross-platform strategie: stel lineHeight in het ontwerpsysteem in als vermenigvuldiger van fontSize. Bijvoorbeeld in designtokens: line-height-body = 1.5, line-height-heading = 1.1. Elk platform implementeert deze vermenigvuldiger met zijn eigen API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Dit garandeert hetzelfde visuele resultaat op alle platforms.

Belangrijke nuance: op iOS wordt lineHeightMultiple toegepast op de volledige regelhoogte (inclusief ascender + descender van het lettertype), terwijl op Android lineSpacingMultiplier wordt toegepast op de regelhoogte berekend door de Minikin-renderengine. In de praktijk leidt dit tot kleine verschillen in visuele leading bij dezelfde vermenigvuldigerwaarde. Gebruik voor pixel-perfecte overeenstemming absolute waarden met platformaanpassing.