Line Height i apputveckling — vad det är och påverkan på typografi

Vad är Line Height i typografi

Line Height (radhöjd) — är en grundläggande typografisk parameter som bestämmer avståndet mellan baslinjerna (baseline) för på varandra följande rader. Inom webb- och mobilutveckling sätter line height den vertikala rytmen för texten: varje rad upptar en viss höjd och denna parameter ackumuleras vid övergång till nästa rad. Line height omfattar inte bara den faktiska höjden av glyfer (ascender + descender), utan även extra utrymme som förbättrar läsbarheten.

Matematiskt uttrycks line height som: line-height = font-size × multiplier. Om font-size = 16 px och multiplier = 1.5, då är line-height = 24 px. Radavståndet (leading) i detta fall är 24 - (ascender + descender) pixlar. De flesta designsystem och plattformar använder just multiplikatorn, eftersom den automatiskt skalar när teckenstorleken ändras.

Enligt Material Design Type Scale (2025) är line height — en av tre nyckelparametrar i applikationens typografiska system tillsammans med font-size och font-weight. Konsekventa line height-värden för alla nivåer av den typografiska hierarkin skapar en vertikal rytm som gör gränssnittet visuellt sammanhängande. En avvikelse på 10% från det optimala line-height-värdet är redan synlig för blotta ögat och minskar den upplevda kvaliteten på gränssnittet.

Line Height vs Leading: vad är skillnaden

Leading (uttalas „lending") — är en historisk typografisk term som betecknar avståndet mellan rader från baseline till baseline minus glyfernas höjd. I metallsättning är leading — blyremsor som sattes mellan raderna för att öka avståndet. Line height — ett mer modernt begrepp som omfattar både teckensnittshöjd och leading.

I praktiken är skillnaden viktig vid överföring av mockups från Figma eller Sketch till kod. Designverktyg anger vanligtvis line-height (eller helt enkelt radhöjd). På mobila plattformar kan API:et kallas olika: iOS använder termen lineSpacing (närmare leading) tillsammans med minimumLineHeight/maximumLineHeight, Android — LineHeightStyle med alignment och trim, Flutter — height (unitless multiplier).

// iOS: skillnad mellan line height och line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direkt inställning av line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Radavstånd (extra utrymme mellan rader)
paragraphStyle.lineSpacing = 4.0  // lagt till teckensnittets naturliga line height

Den viktigaste skillnaden: om du ställer in minimumLineHeight kommer alla rader att ha samma höjd, vilket är bra för ett rytmiskt rutnät. Om du bara ställer in lineSpacing kommer radhöjden att ändras beroende på teckenstorleken — ett mer flexibelt men mindre förutsägbart tillvägagångssätt. För designsystem rekommenderas att använda minimumLineHeight eftersom det ger ett strikt kontrollerat resultat.

Enligt IBM Carbon Design System — Typography Guidelines (2025) är skillnaden mellan line height och leading särskilt märkbar vid användning av anpassade teckensnitt. Om teckensnittet har stor inbyggd leading (t.ex. SF Pro), ger lineSpacing = 0 ett acceptabelt resultat. Om teckensnittets leading är liten (vissa open-source-teckensnitt), kommer raderna utan extra lineSpacing att se hopklistrade ut.

Optimal Line Height för mobila gränssnitt

Optimal line height beror på flera faktorer: teckenstorlek, radlängd, teckensnitt och målgrupp. För huvudtext på mobila enheter (radlängd 35–55 tecken) är det rekommenderade intervallet 1.4–1.6 av font-size. Detta värde ger tillräckligt vertikalt intervall för bekväm blickförflyttning mellan rader utan förlust av textens visuella sammanhang.

För rubriker, där radlängden vanligtvis är kortare (2–6 ord), kan line height vara mindre — 1.1–1.25 av font-size. Rubriker kräver inte stort radavstånd, eftersom deras huvudsakliga funktion är att fånga uppmärksamhet, inte långvarig läsning. Dessutom skulle stora rubrikstorlekar (24–32 pt) med line-height 1.5 skapa överdrivna mellanrum som stör sidans vertikala rytm.

• Huvudtext (16–18 pt) — line-height 1.4–1.6. Minimum för bekväm läsning på mobila enheter, där radlängden begränsas av skärmbredden.
• Liten text (11–13 pt) — line-height 1.3–1.5. Liten storlek kräver mindre multiplikator, eftersom raderna är kortare och ögat hittar nästa rad snabbare.
• Stor text (20–32 pt) — line-height 1.1–1.25. Ju större teckensnitt, desto mindre relativt radavstånd krävs för läsbarhet.
• Monospace-text — line-height 1.3–1.5. Monospace-teckensnitt (för kod) har vanligtvis större metriker, så line-height kan minskas till 1.3.

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

Enligt W3C — Accessibility Requirements for Typography (2025) anses line height under 1.2 för huvudtext vara ett tillgänglighetshinder: användare med dyslexi och synnedsättning upplever betydande svårigheter vid läsning av tät text. WCAG 2.2 rekommenderar line-height på minst 1.5 för huvudinnehåll, men i mobila gränssnitt kan detta värde sänkas till 1.4 med hänsyn till begränsad skärmbredd.

Line Height i iOS: UIKit och SwiftUI

I iOS hanteras line height via NSMutableParagraphStyle eller inbyggda SwiftUI-modifierare. I UIKit finns tre viktiga egenskaper: minimumLineHeight och maximumLineHeight (anger exakt radhöjd) och lineSpacing (extra mellanrum mellan rader). Vid användning av TextKit (NSTextStorage, NSLayoutManager) beaktas line height i lineFragmentRect och påverkar beräkningen av textblockets geometri.

// iOS UIKit: inställning av line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Viktigt: minimum + maximum = fast 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
)

I SwiftUI ställs line height in via modifieraren .lineSpacing(value), som lägger till extra utrymme mellan rader, eller via .font med en anpassad TextStyle som inkluderar line height. SwiftUI stöder även dynamiska typer: den inställda line height skalas när användaren ändrar teckenstorleken i inställningarna.

// SwiftUI: line height via lineSpacing
Text("Text med anpassat radavstånd
andra raden
tredje raden")
    .font(.body)
    .lineSpacing(4)     // extra utrymme mellan rader

// SwiftUI: fast line height via anpassad stil
Text("Rubrik med line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // kompensation för exakt line-height

Enligt Apple HIG — Typography Implementation (2025) måste man vid användning av fast line-height via minimumLineHeight säkerställa att värdet inte är mindre än teckensnittets naturliga line-height. Om minimumLineHeight är mindre än ascender + descender ignorerar UIKit inställningen och använder den naturliga höjden. Detta kan leda till oväntade resultat vid byte av teckensnitt eller storlek.

Line Height i Android: View-systemet och Compose

I Android-utveckling hanteras line height olika i det klassiska View-systemet och Jetpack Compose. I View-systemet används metoden TextView.setLineSpacing(extra, multiplier). Parametern extra — extra utrymme i pixlar, multiplier — multiplikator för radens naturliga höjd. Sluthöjd = naturlig line-height × multiplier + extra.

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

// Användning i XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

I Jetpack Compose används klassen LineHeightStyle för att hantera line height, vilket gör det möjligt att ställa in justering (Alignment) och trimning (Trim) av radavståndet. Detta ger finare kontroll än en enkel multiplikator. Man kan till exempel ange att det extra radavståndet ska fördelas lika ovanför och nedanför raden (align.Center) eller läggas till helt ovanför (align.Top).

// Jetpack Compose: exempel på LineHeightStyle
Text(
    text = "Exempeltext
med anpassad LineHeightStyle
i Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

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

Enligt Android Developers — Compose Text Styling (2025) behåller LineHeightStyle.Trim.None (standard) första och sista raden med mellanrum, vilket kan störa justeringen i Card eller Column. Rekommenderat är att använda Trim.Both för behållare med fast höjd och Trim.LastLine för textblock där nedre kanten är viktig.

Line Height i Flutter: TextStyle och StrutStyle

I Flutter ställs line height in via egenskapen height i klassen TextStyle. Detta är en unitless multiplikator av font-size: height: 1.5 med fontSize: 16 ger line-height 24.0. Värdet height multipliceras implicit med fontSize, så när storleken ändras skalas line-height proportionellt. Flutter erbjuder även StrutStyle — en mekanism för att tvinga fast line-height oberoende av de faktiska glyferna i en rad.

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

// Flutter: StrutStyle för fast line height
Text(
    'Text med StrutStyle
fast line height
oberoende av glyfer',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle är särskilt användbart för listor med olika storlekar (t.ex. chattar, nyhetsflöden), där alla rader måste ha samma höjd oavsett innehåll. Utan StrutStyle kommer en rad som endast innehåller bokstäver utan descender att ha mindre faktisk höjd än en rad med bokstäverna „p" och „y", vilket leder till textskakning vid scrollning.

Enligt Flutter Documentation — Text Layout (2025) garanterar StrutStyle med forceStrutHeight: true att varje rads höjd är lika med det inställda värdet, medan de faktiska glyferna justeras längs baseline inom detta utrymme. Detta är standardmetoden för textlistor där vertikal rytm är avgörande för visuell uppfattning.

Adaptiv Line Height för olika skärmar

Mobila applikationer körs på enheter med olika skärmstorlekar, pixeldensiteter och tillgänglighetsinställningar. Line height måste anpassas till dessa förändringar och bibehålla läsbarheten. Grundregeln: använd dimensionslösa multiplikatorer (unitless), inte fasta värden i px eller pt, så att line-height skalas tillsammans med font-size.

Vid användning av Dynamic Type (iOS) eller fontScale (Android) kan teckenstorleken öka med 20–50% i förhållande till basen. Line-height inställt via multiplikator skalas automatiskt. Om line-height är inställt som ett fast värde (t.ex. 24 px vid font-size 16 pt), kommer det relativa line-height vid ökning av teckensnittet till 22 pt att minska till 1.09 — vilket redan är under läsbarhetströskeln.

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

// Beräkna line-height som multiplikator från dynamiskt teckensnitt
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Enligt Material Design — Responsive Typography (2025) rekommenderas för surfplattor och stora skärmar (bredd över 600 dp) att öka line-height för huvudtext med 0.1–0.2 jämfört med telefoner, eftersom radlängden blir större. För vikbara enheter, där skärmbredden ändras dynamiskt, bör line-height beräknas om vid varje konfigurationsändring.