Leading och radavstånd: vad är det och konfiguration i iOS och Android

Vad är leading och radavstånd

Leading (uttalas „lending”) — är det vertikala avståndet mellan baslinjerna för angränsande rader inom typografi. Baslinjen — den osynliga linjen där texttecken placeras. Ju större leading, desto friare placeras raderna i förhållande till varandra. Inom digital typografi kallas leading ofta radavstånd eller radhöjd.

Historiskt sett uppstod termen under den metalliska typografins tidevarv: sättare placerade tunna blyremsor mellan rader för att öka avståndet. I moderna teckensnitt bestäms leading som ett förhållande till teckenstorleken. Systemets standardvärde är 1.2 (120 % av teckenstorleken), men för långa texter och mobila gränssnitt rekommenderas ett större värde. Enligt Material Design Typography Guidelines är den optimala radhöjden för webb- och mobilgränssnitt 1.4–1.5 för huvudtext.

Skillnad mellan leading och line spacing: leading — fullständigt avstånd från baslinje till baslinje, line spacing — avståndet mellan den nedre kanten av en rad och den övre kanten av nästa rad. I de flesta mobila API:er (iOS NSParagraphStyle, Android TextView) används just line spacing som extra utrymme ovanpå den naturliga radhöjden. Detta är viktigt att beakta vid beräkning av det totala radavståndet.

Optimala leading-värden för mobila gränssnitt

Valet av optimalt leading beror på flera faktorer: teckenstorlek, radlängd, användningskontext och målgrupp. För mobila gränssnitt med en typisk radlängd på 40–60 tecken rekommenderas leading från 1.4 till 1.6 av teckenstorleken. Korta rader (etiketter, knappar) kan använda mindre leading — 1.0–1.2. Långa texter (artiklar, beskrivningar) — större leading, upp till 1.8 för maximal läsbarhet.

Experimentella data: forskning vid Wichita State University Software Usability Laboratory visade att leading 1.5 ökar läshastigheten med 7.5 % jämfört med leading 1.0 vid samma radbredd. För användare med dyslexi är det optimala leading ännu högre — upp till 1.8. Dessa data bekräftas av WCAG 2.2-rekommendationerna, som kräver möjligheten att öka radavståndet till 1.5 utan förlust av innehåll.

Teckensnittets påverkan: teckensnitt med hög x-height (relativ höjd på små bokstäver) kräver större leading än teckensnitt med låg x-height. Till exempel rekommenderar Helvetica (hög x-height) leading 1.5 för brödtext, medan Didot (låg x-height) — 1.3. Detta beror på att vid hög x-height smälter raderna visuellt samman snabbare vid samma radavstånd.

Implementering av leading på iOS via NSParagraphStyle

På iOS hanteras radavståndet via klassen NSMutableParagraphStyle, som innehåller två viktiga egenskaper: lineSpacing (extra utrymme mellan rader i punkter) och lineHeightMultiple (multiplikator för radhöjd). Dessa egenskaper fungerar tillsammans: den totala radhöjden beräknas som teckensnittets naturliga höjd multiplicerad med lineHeightMultiple plus lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Metod 1: radhöjdsmultiplikator
paragraphStyle.lineHeightMultiple = 1.5

// Metod 2: extra utrymme mellan rader
paragraphStyle.lineSpacing = 4.0

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

lineHeightMultiple — den föredragna metoden, eftersom den automatiskt skalas när teckenstorleken ändras. lineSpacing ställs in i absoluta punkter och skalas inte, vilket kan leda till inkonsekvenser vid användning av Dynamic Type. Enligt Apples Text Programming Guide, för gränssnitt som är kompatibla med accessibility, använd lineHeightMultiple i kombination med UIFontMetrics.

SwiftUI tillhandahåller modifieraren .lineSpacing() för Text och VStack. Till skillnad från UIKit ställs radavståndet i SwiftUI in i punkter och har ingen inbyggd multiplikator. För att implementera multiplikatorn måste utvecklaren manuellt beräkna radavståndet baserat på teckenstorleken. Begränsning: SwiftUI stöder inte lineHeightMultiple direkt — använd .lineSpacing(CGFloat) med ett beräknat värde.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50 % av teckenstorleken
    }

    var body: some View {
        Text("Radavstånd")
        Text("Multiplikator 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Konfiguration av radavstånd på Android

På Android ställs radavståndet in via två TextView-attribut: lineSpacingExtra (extra utrymme i px) och lineSpacingMultiplier (multiplikator för radhöjd, standard 1.0). Liksom iOS skalas multiplikatorn när teckenstorleken ändras, medan extra är ett absolut värde. För gränssnitt som är kompatibla med accessibility är användning av multiplikator att föredra.

// I 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" />

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

Compose — det moderna Android UI-ramverket — använder parametern lineHeight i TextStyle-modifieraren. Till skillnad från XML-metoden ställs lineHeight i Compose in som full radhöjd i sp (standard = fontSize * 1.2). För att ställa in multiplikatorn anger utvecklaren lineHeight som en procentandel av fontSize: Exempel: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) ger multiplikatorn 1.5.

Begränsning: på Android före API 28 fungerar lineSpacingExtra och lineSpacingMultiplier inte korrekt med vissa teckensnitt, särskilt anpassade (TTF/OTF). Det rekommenderas att testa på verkliga enheter och beakta att systemTextView som standard använder lineSpacingMultiplier 1.0 — utan extra utrymme. För långa texter i ScrollView, ställ in radavståndet explicit.

Radavstånd i webbutveckling via CSS line-height

På webben ställs radavståndet in med CSS-egenskapen line-height, som kan vara ett tal (multiplikator), ett procentvärde, längdenheter (px, em) eller nyckelordet normal. Den numeriska multiplikatorn — den föredragna metoden, eftersom den ärvs och skalas i förhållande till teckenstorleken för underordnade element. Värdet normal motsvarar ungefär 1.2 för de flesta teckensnitt.

/* 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;
}

Numerisk multiplikator vs em: line-height: 1.5 och line-height: 1.5em är olika saker. Den numeriska multiplikatorn ärvs som ett beräknat värde och beräknas om för varje underordnat element baserat på dess font-size. Em ärvs som ett fast beräknat värde baserat på font-size för föräldern. Detta är en kritisk skillnad: när font-size: 20px finns inuti font-size: 16px ger line-height: 1.5 30px, medan line-height: 1.5em — 24px (från föräldern). Rekommendation: använd alltid numerisk multiplikator.

Jämförelse av leading-inställningar på iOS, Android och webben

Trots olika API:er är principen för konfiguration av radavstånd densamma på alla plattformar. Multiplikatorn (multiplier) skalas när teckenstorleken ändras och är accessibility-vänlig. Det absoluta värdet (spacing) skalas inte och kan orsaka problem vid användning av Dynamic Type eller inställningar för stor text.

Cross-platform strategi: ställ in lineHeight i designsystemet som en multiplikator av fontSize. Till exempel i designtokens: line-height-body = 1.5, line-height-heading = 1.1. Varje plattform implementerar denna multiplikator med sitt eget API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Detta garanterar samma visuella resultat på alla plattformar.

Viktig nyans: på iOS tillämpas lineHeightMultiple på den fulla radhöjden (inklusive teckensnittets ascender + descender), medan på Android tillämpas lineSpacingMultiplier — på radhöjden beräknad av renderingsmotorn Minikin. I praktiken leder detta till små skillnader i visuellt leading vid samma multiplikatorvärde. För pixel-perfect överensstämmelse, använd absoluta värden med plattformsjustering.