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 спрямо телефоните, тъй като дължината на реда става по-голяма. За сгъваеми устройства, където ширината на екрана се променя динамично, line-height трябва да се преизчислява при всяка промяна на конфигурацията.