Line Height у развоју апликација — шта је то и утицај на типографију

Шта је Line Height у типографици

Line Height (висина реда) — је фундаментални параметар типографике који одређује растојање између базних линија (baseline) узастопних редова. У веб и мобилном развоју, line height поставља вертикални ритам текста: сваки ред заузима одређену висину, и овај параметар се сумира при преласку на следећи ред. Line height укључује не само стварну висину глифова (ascender + descender), већ и додатни простор који побољшава читљивост.

Математички, line height се изражава као: line-height = font-size × multiplier. Ако је font-size = 16 px, а multiplier = 1.5, онда је line-height = 24 px. Размак између редова (leading) у овом случају износи 24 - (ascender + descender) пиксела. Већина дизајн-система и платформи користи управо множилац, јер се он аутоматски скалира при промени величине фонта.

Према подацима Material Design Type Scale (2025), line height — један од три кључна параметра типографског система апликације поред font-size и font-weight. Усклађене вредности line height за све нивое типографске хијерархије стварају вертикални ритам који чини интерфејс визуелно целовитим. Одступање line-height за 10% од оптималне вредности је већ приметно голим оком и смањује перципирани квалитет интерфејса.

Line Height vs Leading: у чему је разлика

Leading (изговара се „лединг") — је историјски типографски термин који означава растојање између редова од baseline до baseline умањено за висину глифова. У металном слогу, leading — оловне траке које су уметане између редова ради повећања размака. Line height — савременији појам који укључује и висину фонта и leading.

У пракси, разлика је важна при превођењу макета из Figma или Sketch у код. Дизајн алати обично наводе line-height (или једноставно висину реда). У мобилним платформама API се може различито називати: iOS користи термин lineSpacing (ближи leading-у) заједно са minimumLineHeight/maximumLineHeight, Android — LineHeightStyle са alignment и trim, Flutter — height (unitless multiplier).

// iOS: разлика између line height и line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Директно подешавање line height
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Проред (додатни простор између редова)
paragraphStyle.lineSpacing = 4.0  // додато природном line height-у фонта

Кључна разлика: ако поставите minimumLineHeight, сви редови ће имати исту висину, што је добро за ритмичку мрежу. Ако поставите само lineSpacing, висина реда ће се мењати у зависности од величине фонта — ово је флексибилнији, али мање предвидив приступ. За дизајн-системе препоручује се коришћење minimumLineHeight, јер даје строго контролисан резултат.

Према подацима IBM Carbon Design System — Typography Guidelines (2025), разлика између line height и leading је посебно приметна при коришћењу прилагођених фонтова. Ако фонт има велики уграђени leading (нпр. SF Pro), lineSpacing = 0 даје прихватљив резултат. Ако је leading фонта мали (неки open-source фонтови), без додатног lineSpacing редови ће изгледати слепљено.

Оптимални Line Height за мобилне интерфејсе

Оптимални line height зависи од неколико фактора: величине фонта, дужине реда, фонта и циљне публике. За основни текст на мобилним уређајима (дужина реда 35–55 знакова) препоручени опсег је 1.4–1.6 од font-size. Ова вредност обезбеђује довољан вертикални интервал за удобан прелаз погледа између редова без губитка визуелне повезаности текста.

За наслове, где је дужина реда обично краћа (2–6 речи), line height може бити мањи — 1.1–1.25 од font-size. Наслови не захтевају велики проред, јер је њихова главна функција привлачење пажње, а не дуготрајно читање. Поред тога, велике величине наслова (24–32 pt) са line-height 1.5 створиле би прекомерне размаке који нарушавају вертикални ритам странице.

• Основни текст (16–18 pt) — line-height 1.4–1.6. Минималан за удобно читање на мобилним уређајима, где је дужина реда ограничена ширином екрана.
• Мали текст (11–13 pt) — line-height 1.3–1.5. Мала величина захтева мањи множилац, јер су редови краћи и око брже проналази следећи ред.
• Велики текст (20–32 pt) — line-height 1.1–1.25. Што је већи фонт, то је потребан мањи релативни проред за читљивост.
• Моноширични текст — line-height 1.3–1.5. Моноширични фонтови (за код) обично имају веће метрике, па се line-height може смањити на 1.3.

// Flutter: line height у дизајн систему
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
    );
}

Према подацима W3C — Accessibility Requirements for Typography (2025), line height мањи од 1.2 за основни текст сматра се баријером приступачности: корисници са дислексијом и оштећењима вида имају значајне потешкоће при читању густог текста. WCAG 2.2 препоручује line-height од најмање 1.5 за основни садржај, међутим у мобилним интерфејсима ова вредност може бити смањена на 1.4 с обзиром на ограничену ширину екрана.

Line Height у iOS: UIKit и SwiftUI

У iOS-у, line height се управља кроз NSMutableParagraphStyle или уграђене модификаторе SwiftUI. У UIKit-у су доступна три кључна својства: minimumLineHeight и maximumLineHeight (постављају тачну висину реда) и lineSpacing (додатни размак између редова). При коришћењу TextKit-а (NSTextStorage, NSLayoutManager), line height се узима у обзир у lineFragmentRect и утиче на израчунавање геометрије текстуалног блока.

// iOS UIKit: подешавање line height преко NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Важно: minimum + maximum = фиксни 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
)

У SwiftUI-ју, line height се поставља кроз модификатор .lineSpacing(value), који додаје додатни простор између редова, или кроз .font са прилагођеним TextStyle-ом који укључује line height. SwiftUI такође подржава динамичке типове: постављени line height се скалира када корисник промени величину фонта у подешавањима.

// SwiftUI: line height преко lineSpacing
Text("Текст са прилагођеним проредом
други ред
трећи ред")
    .font(.body)
    .lineSpacing(4)     // додатни простор између редова

// SwiftUI: фиксни line height преко прилагођеног стила
Text("Наслов са line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // компензација за прецизни line-height

Према подацима Apple HIG — Typography Implementation (2025), при коришћењу фиксног line-height-а кроз minimumLineHeight потребно је осигурати да вредност није мања од природног line-height-а фонта. Ако је minimumLineHeight мањи од ascender + descender, UIKit игнорише подешавање и користи природну висину. Ово може довести до неочекиваних резултата при промени фонта или величине.

Line Height у Android: View-систем и Compose

У Android развоју, line height се различито управља у класичном View-систему и Jetpack Compose-у. У View-систему користи се метод TextView.setLineSpacing(extra, multiplier). Параметар extra — додатни простор у пикселима, multiplier — множилац природне висине реда. Коначна висина = природни line-height × multiplier + extra.

// Android View систем: проред
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Коришћење у XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

У Jetpack Compose-у, за управљање line height-ом користи се класа LineHeightStyle, која омогућава постављање поравнања (Alignment) и обрезивања (Trim) међуредног простора. Ово даје финију контролу од простог множиоца. На пример, може се навести да се додатни међуредни простор распоређује подједнако изнад и испод реда (align.Center) или у потпуности додаје изнад (align.Top).

// Jetpack Compose: пример LineHeightStyle
Text(
    text = "Пример текста
са прилагођеним LineHeightStyle
у Jetpack Compose-у",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Једноставни множилац преко TextStyle
Text(
    text = "Множилац line height",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Према подацима Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (подразумевано) задржава први и последњи ред са размацима, што може нарушити поравнање у Card или Column. Препоручује се коришћење Trim.Both за контејнере са фиксном висином и Trim.LastLine за текстуалне блокове где је доња ивица важна.

Line Height у Flutter: TextStyle и StrutStyle

У Flutter-у, line height се поставља кроз својство height класе TextStyle. Ово је unitless множилац од font-size: height: 1.5 при fontSize: 16 даје line-height 24.0. Вредност height се имплицитно множи са fontSize, па се при промени величине line-height пропорционално скалира. Flutter такође нуди StrutStyle — механизам за форсирање фиксног line-height-а независно од стварних глифова у реду.

// Flutter: line height преко TextStyle.height
Text(
    'Текст са line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle за фиксни line height
Text(
    'Текст са StrutStyle
фиксни line height
независан од глифова',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle је посебно користан за листе са различитим величинама (нпр. четови, феедови вести), где је потребно да сви редови имају исту висину без обзира на садржај. Без StrutStyle-а, ред који садржи само слова без descender-а имаће мању стварну висину од реда са словима „п" и „ј", што доводи до подрхтавања текста при скроловању.

Према подацима Flutter Documentation — Text Layout (2025), StrutStyle са forceStrutHeight: true гарантује да ће висина сваког реда бити једнака задатој вредности, а стварни глифови ће бити поравнати на baseline унутар овог простора. Ово је стандардни приступ за текстуалне листе где је вертикални ритам критичан за визуелну перцепцију.

Адаптивни Line Height за различите екране

Мобилне апликације раде на уређајима са различитим величинама екрана, густинама пиксела и подешавањима приступачности. Line height мора да се прилагоди овим променама, задржавајући читљивост. Основно правило: користите бездимензионе множиоце (unitless), а не фиксне вредности у px или pt, како би се line-height скалирао заједно са font-size.

При коришћењу Dynamic Type-а (iOS) или fontScale-а (Android), величина фонта може се повећати за 20–50% у односу на основну. Line-height постављен кроз множилац се аутоматски скалира. Ако је line-height постављен као фиксна вредност (нпр. 24 px при font-size 16 pt), при повећању фонта на 22 pt релативни line-height ће се смањити на 1.09 — што је већ испод прага читљивости.

// iOS: адаптивни line height са Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Израчунајте line-height као множилац из динамичког фонта
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Према подацима Material Design — Responsive Typography (2025), за таблете и велике екране (преко 600 dp ширине) line-height основног текста препоручује се повећање за 0.1–0.2 у односу на телефоне, јер дужина реда постаје већа. За foldable уређаје, где се ширина екрана мења динамички, line-height треба поново израчунавати при свакој промени конфигурације.