Леадинг и размак између редова: шта је то и подешавање у iOS и Android

Шта је леадинг и размак између редова

Леадинг (Leading) (изговара се „лединг”) — је вертикално растојање између базних линија суседних редова у типографији. Базна линија — невидљива линија на којој се налазе знаци текста. Што је леадинг већи, редови су слободније распоређени један у односу на други. У дигиталној типографији, леадинг се често назива размаком између редова или висином реда.

Историјски, термин се појавио у ери металне типографије: словослагачи су уметали танке оловне траке између редова ради повећања размака. У савременим фонтовима, леадинг се задаје као однос према величини фонта. Подразумевана системска вредност је 1.2 (120% величине фонта), али се за дугачке текстове и мобилне интерфејсе препоручује већа вредност. Према смерницама за типографију Material Design-а, оптимална висина реда за веб и мобилне интерфејсе износи 1.4-1.5 за главни текст.

Разлика између леадинга и line spacing-а: леадинг — пуно растојање од базне линије до базне линије, line spacing — растојање између доње границе једног реда и горње границе следећег. У већини мобилних API-ја (iOS NSParagraphStyle, Android TextView) користи се управо line spacing као додатни размак изнад природне висине реда. Ово је важно узети у обзир при израчунавању укупног размака између редова.

Оптималне вредности леадинга за мобилне интерфејсе

Избор оптималног леадинга зависи од неколико фактора: величине фонта, дужине реда, контекста употребе и публике. За мобилне интерфејсе са типичном дужином реда од 40-60 карактера препоручује се леадинг од 1.4 до 1.6 величине фонта. Кратки редови (налепнице, дугмад) могу користити мањи леадинг — 1.0-1.2. Дугачки текстови (чланци, описи) — већи леадинг, до 1.8 за максималну читљивост.

Експериментални подаци: истраживање Лабораторије за употребљивост софтвера Државног универзитета Вичита показало је да леадинг 1.5 повећава брзину читања за 7.5% у поређењу са леадингом 1.0 при истој ширини реда. За кориснике са дислексијом, оптимални леадинг је још већи — до 1.8. Ови подаци су потврђени препорукама WCAG 2.2, које захтевају могућност повећања размака између редова до 1.5 без губитка садржаја.

Утицај гарнитуре: фонтови са високом x-height (релативна висина малих слова) захтевају већи леадинг од фонтова са ниском x-height. На пример, Helvetica (висока x-height) препоручује леадинг 1.5 за body text, а Didot (ниска x-height) — 1.3. То је зато што се при високој x-height редови визуелно брже спајају при истом размаку између редова.

Имплементација леадинга на iOS-у кроз NSParagraphStyle

На iOS-у, размак између редова се управља кроз класу NSMutableParagraphStyle, која садржи два кључна својства: lineSpacing (додатни размак између редова у тачкама) и lineHeightMultiple (множилац висине реда). Ова својства раде заједно: укупна висина реда се израчунава као природна висина фонта помножена са lineHeightMultiple плус lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Метода 1: множилац висине реда
paragraphStyle.lineHeightMultiple = 1.5

// Метода 2: додатни размак између редова
paragraphStyle.lineSpacing = 4.0

// Примените путем NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple — пожељна метода, јер се аутоматски скалира при промени величине фонта. lineSpacing се задаје у апсолутним тачкама и не скалира се, што може довести до неслагања при коришћењу Dynamic Type. Према Apple Text Programming Guide-у, за интерфејсе компатибилне са accessibility-јем користите lineHeightMultiple у комбинацији са UIFontMetrics.

SwiftUI пружа модификатор .lineSpacing() за Text и VStack. За разлику од UIKit-а, у SwiftUI-ју се размак између редова задаје у тачкама и нема уграђени множилац. За имплементацију множиоца, програмер треба ручно да израчуна размак између редова на основу величине фонта. Ограничење: SwiftUI директно не подржава lineHeightMultiple — користите .lineSpacing(CGFloat) са израчунатом вредношћу.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% величине фонта
    }

    var body: some View {
        Text("Размак редова")
        Text("Множилац 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Подешавање размака између редова на Android-у

На Android-у, размак између редова се задаје кроз два атрибута TextView-а: lineSpacingExtra (додатни размак у px) и lineSpacingMultiplier (множилац висине реда, подразумевано 1.0). Слично iOS-у, множилац се скалира при промени величине фонта, а extra је апсолутна вредност. За интерфејсе компатибилне са accessibility-јем, пожељније је користити множилац.

// У XML распореду
<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" />

// Програмски у Kotlin-у
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — савремени Android UI оквир — користи параметар lineHeight у модификатору TextStyle. За разлику од XML приступа, у Compose-у lineHeight се задаје као пуна висина реда у sp (подразумевано = fontSize * 1.2). За постављање множиоца, програмер наводи lineHeight у процентима од fontSize: Пример: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) даје множилац 1.5.

Ограничење: на Android-у пре API 28, lineSpacingExtra и lineSpacingMultiplier не раде исправно са неким фонтовима, посебно са прилагођеним (TTF/OTF). Препоручује се тестирање на стварним уређајима и узимање у обзир да systemTextView подразумевано користи lineSpacingMultiplier 1.0 — без додатног размака. За дугачке текстове у ScrollView-у обавезно експлицитно подесите размак између редова.

Размак између редова у веб развоју кроз CSS line-height

На вебу, размак између редова се задаје CSS својством line-height, које може бити број (множилац), процентуална вредност, јединице дужине (px, em) или кључна реч normal. Бројчани множилац — пожељна метода, јер се наслеђује и скалира у односу на величину фонта подређених елемената. Вредност normal одговара приближно 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;
}

Бројчани множилац vs em: line-height: 1.5 и line-height: 1.5em су различите ствари. Бројчани множилац се наслеђује као израчуната вредност и поново се израчунава за сваки подређени елемент на основу његовог font-size-а. em се наслеђује као фиксна израчуната вредност на основу font-size-а родитеља. Ово је критична разлика: при угнежђењу font-size: 20px унутар font-size: 16px, line-height: 1.5 даје 30px, а line-height: 1.5em — 24px (од родитеља). Препорука: увек користите бројчани множилац.

Поређење подешавања леадинга на iOS, Android и вебу

Упркос различитим API-јима, принцип подешавања размака између редова је исти на свим платформама. Множилац (multiplier) се скалира при промени величине фонта и пријатељски је настројен према accessibility-ју. Апсолутна вредност (spacing) се не скалира и може довести до проблема при коришћењу Dynamic Type-а или подешавања великог текста.

Вишеплатформска стратегија: подесите lineHeight у дизајн систему као множилац од fontSize. На пример, у дизајн токенима: line-height-body = 1.5, line-height-heading = 1.1. Свака платформа имплементира овај множилац својим API-јем: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Ово гарантује исти визуелни резултат на свим платформама.

Важна нијанса: на iOS-у, lineHeightMultiple се примењује на пуну висину реда (укључујуći ascender + descender фонта), а на Android-у, lineSpacingMultiplier — на висину реда израчунату рендер-енџином Minikin. У пракси, то доводи до малих разлика у визуелном леадингу при истој вредности множиоца. За pixel-perfect подударање користите апсолутне вредности са прилагођавањем платформи.