Line Height tətbiq inkişafında — bu nədir və tipoqrafiyaya təsiri

Tipoqrafikada Line Height nədir

Line Height (sətir hündürlüyü) — ardıcıl sətirlərin baza xətləri (baseline) arasındakı məsafəni təyin edən fundamental tipoqrafiya parametridir. Veb və mobil inkişafda line height mətnin şaquli ritmini təyin edir: hər sətir müəyyən bir hündürlük tutur və bu parametr növbəti sətirə keçərkən toplanır. Line height yalnız qliflərin faktiki hündürlüyünü (ascender + descender) deyil, həm də oxunaqlılığı yaxşılaşdıran əlavə boşluğu əhatə edir.

Riyazi olaraq line height belə ifadə olunur: line-height = font-size × multiplier. font-size = 16 px, multiplier = 1.5 olarsa, line-height = 24 px. Bu halda sətirlər arası boşluq (leading) 24 - (ascender + descender) piksel təşkil edir. Əksər dizayn sistemləri və platformalar məhz çarpandan istifadə edir, çünki o, şrift ölçüsü dəyişdikdə avtomatik olaraq miqyaslanır.

Material Design Type Scale (2025) məlumatlarına görə, line height — font-size və font-weight ilə yanaşı tətbiqin tipoqrafik sisteminin üç əsas parametrindən biridir. Tipoqrafik iyerarxiyanın bütün səviyyələri üçün uyğunlaşdırılmış line height dəyərləri interfeysi vizual olaraq bütöv edən şaquli ritm yaradır. Line-height-in optimal dəyərdən 10% kənarlaşması artıq çılpaq gözlə nəzərə çarpır və interfeysin qavranılan keyfiyyətini azaldır.

Line Height vs Leading: fərq nədir

Leading („lending" kimi tələffüz olunur) — qliflərin hündürlüyü çıxılmaqla baseline-dan baseline-a qədər sətirlər arası məsafəni bildirən tarixi tipoqrafik termindir. Metal yığımda leading — məsafəni artırmaq üçün sətirlər arasına qoyulan qurğuşun zolaqlarıdır. Line height — həm şrift hündürlüyünü, həm də leading-i əhatə edən daha müasir anlayışdır.

Praktikada fərq Figma və ya Sketch-dən maketləri koda köçürərkən vacibdir. Dizayn alətləri adətən line-height (və ya sadəcə sətir hündürlüyü) göstərir. Mobil platformalarda API müxtəlif adlana bilər: iOS lineSpacing terminindən (leading-ə daha yaxındır) minimumLineHeight/maximumLineHeight ilə birlikdə istifadə edir, Android — LineHeightStyle alignment və trim ilə, Flutter — height (unitless multiplier).

// iOS: line height və line spacing arasındakı fərq
let paragraphStyle = NSMutableParagraphStyle()

// 1. Birbaşa line height təyini
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Sətirarası boşluq (sətirlər arasında əlavə yer)
paragraphStyle.lineSpacing = 4.0  // şriftin təbii line height-ına əlavə edildi

Əsas fərq: minimumLineHeight təyin etsəniz, bütün sətirlər eyni hündürlükdə olacaq, bu ritmik şəbəkə üçün yaxşıdır. Yalnız lineSpacing təyin etsəniz, sətir hündürlüyü şrift ölçüsündən asılı olaraq dəyişəcək — bu daha çevik, lakin daha az proqnozlaşdırıla bilən yanaşmadır. Dizayn sistemləri üçün minimumLineHeight istifadə etmək tövsiyə olunur, çünki o, ciddi nəzarət edilən nəticə verir.

IBM Carbon Design System — Typography Guidelines (2025) məlumatlarına görə, line height və leading arasındakı fərq xüsusilə xüsusi şriftlərdən istifadə edərkən nəzərə çarpır. Şriftin böyük daxili leading-i varsa (məsələn, SF Pro), lineSpacing = 0 məqbul nəticə verir. Şriftin leading-i kiçikdirsə (bəzi open-source fontlar), əlavə lineSpacing olmadan sətirlər yapışmış görünəcək.

Mobil interfeyslər üçün optimal Line Height

Optimal line height bir neçə amildən asılıdır: şrift ölçüsü, sətir uzunluğu, şrift və hədəf auditoriya. Mobil cihazlarda əsas mətn üçün (sətir uzunluğu 35–55 simvol) tövsiyə olunan diapazon font-size-in 1.4–1.6-dır. Bu dəyər mətnin vizual əlaqəsini itirmədən sətirlər arasında rahat baxış keçidi üçün kifayət qədər şaquli interval təmin edir.

Başlıqlar üçün, sətir uzunluğu adətən daha qısa olduğundan (2–6 söz), line height daha kiçik ola bilər — font-size-in 1.1–1.25-i. Başlıqlar böyük sətirarası interval tələb etmir, çünki onların əsas funksiyası diqqəti cəlb etməkdir, uzun müddətli oxuma deyil. Bundan əlavə, böyük başlıq ölçüləri (24–32 pt) line-height 1.5 ilə səhifənin şaquli ritmini pozan həddindən artıq boşluqlar yaradacaq.

• Əsas mətn (16–18 pt) — line-height 1.4–1.6. Mobil cihazlarda rahat oxumaq üçün minimal, sətir uzunluğu ekranın eni ilə məhdudlaşır.
• Kiçik mətn (11–13 pt) — line-height 1.3–1.5. Kiçik ölçü daha kiçik çarpan tələb edir, çünki sətirlər qısadır və göz növbəti sətri daha tez tapır.
• Böyük mətn (20–32 pt) — line-height 1.1–1.25. Şrift nə qədər böyükdürsə, oxunaqlılıq üçün bir o qədər az nisbi sətirarası interval tələb olunur.
• Monospaced mətn — line-height 1.3–1.5. Monospaced şriftlər (kod üçün) adətən daha böyük metrikalara malikdir, ona görə də line-height 1.3-ə qədər azaldıla bilər.

// Flutter: dizayn sistemində 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) məlumatlarına görə, əsas mətn üçün line height 1.2-dən aşağı əlçatanlıq maneəsi hesab olunur: disleksiyası və görmə pozğunluğu olan istifadəçilər sıx mətni oxumaqda əhəmiyyətli çətinlik çəkirlər. WCAG 2.2 əsas məzmun üçün line-height-in ən azı 1.5 olmasını tövsiyə edir, lakin mobil interfeyslərdə bu dəyər ekranın məhdud eni nəzərə alınmaqla 1.4-ə endirilə bilər.

iOS-da Line Height: UIKit və SwiftUI

iOS-da line height NSMutableParagraphStyle və ya SwiftUI-nin daxili modifikatorları vasitəsilə idarə olunur. UIKit-də üç əsas xüsusiyyət mövcuddur: minimumLineHeight və maximumLineHeight (dəqiq sətir hündürlüyünü təyin edir) və lineSpacing (sətirlər arasında əlavə boşluq). TextKit (NSTextStorage, NSLayoutManager) istifadə edərkən line height lineFragmentRect-də nəzərə alınır və mətn blokunun həndəsəsinin hesablanmasına təsir edir.

// iOS UIKit: NSMutableParagraphStyle vasitəsilə line height təyini
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Vacib: minimum + maximum = sabit 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-də line height .lineSpacing(value) modifikatoru vasitəsilə təyin edilir ki, bu da sətirlər arasında əlavə boşluq əlavə edir, və ya line height daxil olmaqla xüsusi TextStyle ilə .font vasitəsilə. SwiftUI həmçinin dinamik tipləri dəstəkləyir: təyin edilmiş line height istifadəçi parametrlərdə şrift ölçüsünü dəyişdikdə miqyaslanır.

// SwiftUI: lineSpacing vasitəsilə line height
Text("Xüsusi sətir aralığı olan mətn
ikinci sətir
üçüncü sətir")
    .font(.body)
    .lineSpacing(4)     // sətirlər arasında əlavə boşluq

// SwiftUI: xüsusi stil vasitəsilə sabit line height
Text("Line height 1.2 olan başlıq")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // dəqiq line-height üçün kompensasiya

Apple HIG — Typography Implementation (2025) məlumatlarına görə, minimumLineHeight vasitəsilə sabit line-height istifadə edərkən dəyərin şriftin təbii line-height-indən az olmadığına əmin olmaq lazımdır. minimumLineHeight ascender + descender-dən kiçikdirsə, UIKit parametri nəzərə almır və təbii hündürlükdən istifadə edir. Bu, şrift və ya ölçü dəyişdirilərkən gözlənilməz nəticələrə səbəb ola bilər.

Android-də Line Height: View-sistemi və Compose

Android inkişafında line height klassik View-sistemində və Jetpack Compose-da fərqli idarə olunur. View-sistemində TextView.setLineSpacing(extra, multiplier) metodundan istifadə olunur. Parametr extra — pikseldə əlavə boşluq, multiplier — sətirin təbii hündürlüyünün çarpanıdır. Nəticədə hündürlük = təbii line-height × multiplier + extra.

// Android View sistemi: sətir aralığı
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// XML-də istifadə
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Compose-da line height idarə etmək üçün LineHeightStyle sinfindən istifadə olunur ki, bu da sətirarası boşluğun düzülməsini (Alignment) və kəsilməsini (Trim) təyin etməyə imkan verir. Bu, sadə çarpandan daha incə nəzarət verir. Məsələn, əlavə sətirarası boşluğun sətirdən yuxarı və aşağı bərabər paylanması (align.Center) və ya tamamilə yuxarıdan əlavə edilməsi (align.Top) göstərilə bilər.

// Jetpack Compose: LineHeightStyle nümunəsi
Text(
    text = "Nümunə mətn
xüsusi LineHeightStyle ilə
Jetpack Compose-da",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// TextStyle vasitəsilə sadə çarpan
Text(
    text = "Line height çarpanı",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling (2025) məlumatlarına görə, LineHeightStyle.Trim.None (standart) ilk və son sətirləri boşluqlarla saxlayır ki, bu da Card və ya Column-da düzülməni poza bilər. Sabit hündürlüklü konteynerlər üçün Trim.Both, alt kənarın vacib olduğu mətn blokları üçün Trim.LastLine istifadə etmək tövsiyə olunur.

Flutter-da Line Height: TextStyle və StrutStyle

Flutter-da line height TextStyle sinfinin height xüsusiyyəti vasitəsilə təyin edilir. Bu, font-size üçün unitless çarpandır: height: 1.5, fontSize: 16 olduqda line-height 24.0 verir. height dəyəri gizli olaraq fontSize-a vurulur, buna görə də ölçü dəyişdikdə line-height mütənasib olaraq miqyaslanır. Flutter həmçinin StrutStyle təklif edir — sətirdəki faktiki qliflərdən asılı olmayaraq sabit line-height məcbur etmək mexanizmi.

// Flutter: TextStyle.height vasitəsilə line height
Text(
    'Line height 1.5 olan mətn',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: sabit line height üçün StrutStyle
Text(
    'StrutStyle ilə mətn
sabit line height
qliflərdən asılı olmayaraq',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle xüsusilə müxtəlif ölçülü siyahılar üçün faydalıdır (məsələn, söhbətlər, xəbər lentləri), burada bütün sətirlərin məzmundan asılı olmayaraq eyni hündürlükdə olması lazımdır. StrutStyle olmadan yalnız descender-siz hərflərdən ibarət sətir „p" və „y" hərfləri olan sətirdən daha kiçik faktiki hündürlüyə malik olacaq ki, bu da sürüşdürmə zamanı mətnin titrəməsinə səbəb olur.

Flutter Documentation — Text Layout (2025) məlumatlarına görə, forceStrutHeight: true ilə StrutStyle hər sətirin hündürlüyünün təyin edilmiş dəyərə bərabər olacağına zəmanət verir, faktiki qliflər isə bu boşluq daxilində baseline boyunca düzülür. Bu, şaquli ritmin vizual qavrayış üçün kritik olduğu mətn siyahıları üçün standart yanaşmadır.

Müxtəlif ekranlar üçün adaptiv Line Height

Mobil tətbiqlər müxtəlif ekran ölçüləri, piksel sıxlıqları və əlçatanlıq parametrləri olan cihazlarda işləyir. Line height bu dəyişikliklərə uyğunlaşmalı, oxunaqlılığı qorumalıdır. Əsas qayda: px və ya pt-də sabit dəyərlər deyil, ölçüsüz çarpanlardan (unitless) istifadə edin ki, line-height font-size ilə birlikdə miqyaslansın.

Dynamic Type (iOS) və ya fontScale (Android) istifadə edərkən şrift ölçüsü bazaya nisbətən 20–50% arta bilər. Çarpan vasitəsilə təyin edilmiş line-height avtomatik miqyaslanır. Əgər line-height sabit dəyərlə təyin edilibsə (məsələn, font-size 16 pt olduqda 24 px), şrift 22 pt-ə qədər artırıldıqda nisbi line-height 1.09-a qədər azalacaq — bu, artıq oxunaqlılıq həddinin altındadır.

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

// Dinamik şriftdən çarpan kimi line-height hesablayın
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Material Design — Responsive Typography (2025) məlumatlarına görə, planşetlər və böyük ekranlar (en 600 dp-dən çox) üçün əsas mətnin line-height-ni telefonlara nisbətən 0.1–0.2 artırmaq tövsiyə olunur, çünki sətir uzunluğu daha böyük olur. Ekran eninin dinamik dəyişdiyi foldable cihazlar üçün line-height hər konfiqurasiya dəyişikliyində yenidən hesablanmalıdır.