Line Height ilova ishlab chiqishda — bu nima va tipografiyaga ta'siri

Tipografiyada Line Height nima

Line Height (qator balandligi) — bu ketma-ket qatorlarning asosiy chiziqlari (baseline) orasidagi masofani belgilaydigan fundamental tipografiya parametri. Veb va mobil ishlab chiqishda line height matnning vertikal ritmini belgilaydi: har bir qator ma'lum bir balandlikni egallaydi va bu parametr keyingi qatorga o'tishda yig'iladi. Line height nafaqat gliflarning haqiqiy balandligini (ascender + descender), balki o'qishlilikni yaxshilaydigan qo'shimcha bo'shliqni ham o'z ichiga oladi.

Matematik jihatdan line height quyidagicha ifodalanadi: line-height = font-size × multiplier. Agar font-size = 16 px va multiplier = 1.5 bo'lsa, u holda line-height = 24 px. Bu holda qatorlar orasidagi bo'shliq (leading) 24 - (ascender + descender) pikselni tashkil qiladi. Ko'pgina dizayn tizimlari va platformalar aynan ko'paytiruvchidan foydalanadi, chunki u shrift o'lchami o'zgarganda avtomatik ravishda masshtablanadi.

Material Design Type Scale (2025) ma'lumotlariga ko'ra, line height — font-size va font-weight bilan bir qatorda ilovaning tipografik tizimining uchta asosiy parametrlaridan biridir. Tipografik ierarxiyaning barcha darajalari uchun muvofiqlashtirilgan line height qiymatlari interfeysni vizual jihatdan yaxlit qiladigan vertikal ritm yaratadi. Line-height ning optimal qiymatdan 10% ga og'ishi yalang'och ko'z bilan seziladi va interfeysning idrok qilinadigan sifatini pasaytiradi.

Line Height vs Leading: farqi nimada

Leading (talaffuzi „lending") — bu gliflarning balandligi chiqarilgan holda baseline dan baseline gacha bo'lgan qatorlar orasidagi masofani bildiruvchi tarixiy tipografik atamadir. Metall terimda leading — qatorlar orasiga masofani oshirish uchun qo'yiladigan qo'rg'oshin chiziqlaridir. Line height — bu shrift balandligi hamda leading ni o'z ichiga olgan zamonaviyroq tushunchadir.

Amalda farq Figma yoki Sketch dan maketlarni kodga o'tkazishda muhimdir. Dizayn vositalari odatda line-height (yoki oddiygina qator balandligi) ko'rsatadi. Mobil platformalarda API turlicha nomlanishi mumkin: iOS lineSpacing atamasidan (leading ga yaqinroq) minimumLineHeight/maximumLineHeight bilan birga foydalanadi, Android — LineHeightStyle alignment va trim bilan, Flutter — height (unitless multiplier).

// iOS: line height va line spacing o'rtasidagi farq
let paragraphStyle = NSMutableParagraphStyle()

// 1. To'g'ridan-to'g'ri line height sozlash
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Qatorlar oralig'i (qatorlar orasidagi qo'shimcha joy)
paragraphStyle.lineSpacing = 4.0  // shriftning tabiiy line height iga qo'shilgan

Asosiy farq: agar siz minimumLineHeight ni o'rnatsangiz, barcha qatorlar bir xil balandlikka ega bo'ladi, bu ritmik panjara uchun yaxshi. Agar faqat lineSpacing ni o'rnatsangiz, qator balandligi shrift o'lchamiga qarab o'zgaradi — bu moslashuvchanroq, ammo kamroq bashorat qilinadigan yondashuv. Dizayn tizimlari uchun minimumLineHeight dan foydalanish tavsiya etiladi, chunki u qat'iy nazorat qilinadigan natija beradi.

IBM Carbon Design System — Typography Guidelines (2025) ma'lumotlariga ko'ra, line height va leading o'rtasidagi farq, ayniqsa, maxsus shriftlardan foydalanganda seziladi. Agar shrift katta ichki leading ga ega bo'lsa (masalan, SF Pro), lineSpacing = 0 maqbul natija beradi. Agar shriftning leading i kichik bo'lsa (ba'zi open-source shriftlar), qo'shimcha lineSpacing siz qatorlar yopishib qolgandek ko'rinadi.

Mobil interfeyslar uchun optimal Line Height

Optimal line height bir necha omillarga bog'liq: shrift o'lchami, qator uzunligi, shrift va maqsadli auditoriya. Mobil qurilmalarda asosiy matn uchun (qator uzunligi 35–55 belgi) tavsiya etilgan diapazon font-size ning 1.4–1.6 qismidir. Bu qiymat matnning vizual bog'liqligini yo'qotmasdan qatorlar o'rtasida qulay nigoh o'tishi uchun yetarli vertikal intervalni ta'minlaydi.

Sarlavhalar uchun, qator uzunligi odatda qisqaroq bo'lgani uchun (2–6 so'z), line height kichikroq bo'lishi mumkin — font-size ning 1.1–1.25 qismi. Sarlavhalar katta qatorlararo intervalni talab qilmaydi, chunki ularning asosiy vazifasi diqqatni jalb qilish, uzoq muddatli o'qish emas. Bundan tashqari, katta sarlavha o'lchamlari (24–32 pt) line-height 1.5 bilan sahifaning vertikal ritmini buzadigan haddan tashqari bo'shliqlar yaratadi.

• Asosiy matn (16–18 pt) — line-height 1.4–1.6. Mobil qurilmalarda qulay o'qish uchun minimal, qator uzunligi ekran kengligi bilan cheklangan.
• Kichik matn (11–13 pt) — line-height 1.3–1.5. Kichik o'lcham kichikroq ko'paytiruvchini talab qiladi, chunki qatorlar qisqaroq va ko'z keyingi qatorni tezroq topadi.
• Katta matn (20–32 pt) — line-height 1.1–1.25. Shrift qanchalik katta bo'lsa, o'qishlilik uchun shunchalik kam nisbiy qatorlararo interval talab qilinadi.
• Monospaced matn — line-height 1.3–1.5. Monospaced shriftlar (kod uchun) odatda kattaroq metrikalarga ega, shuning uchun line-height 1.3 gacha kamaytirilishi mumkin.

// Flutter: dizayn tizimida 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) ma'lumotlariga ko'ra, asosiy matn uchun line height 1.2 dan past bo'lishi foydalanish imkoniyati to'sig'i hisoblanadi: disleksiyasi va ko'rish buzilishi bo'lgan foydalanuvchilar zich matnni o'qishda sezilarli qiyinchiliklarga duch kelishadi. WCAG 2.2 asosiy kontent uchun line-height ni kamida 1.5 bo'lishini tavsiya qiladi, biroq mobil interfeyslarda bu qiymat ekranning cheklangan kengligini hisobga olgan holda 1.4 gacha kamaytirilishi mumkin.

iOS da Line Height: UIKit va SwiftUI

iOS da line height NSMutableParagraphStyle yoki SwiftUI ning o'rnatilgan modifikatorlari orqali boshqariladi. UIKit da uchta asosiy xususiyat mavjud: minimumLineHeight va maximumLineHeight (qatorning aniq balandligini belgilaydi) va lineSpacing (qatorlar orasidagi qo'shimcha bo'shliq). TextKit (NSTextStorage, NSLayoutManager) dan foydalanganda line height lineFragmentRect da hisobga olinadi va matn blokining geometriyasini hisoblashga ta'sir qiladi.

// iOS UIKit: NSMutableParagraphStyle orqali line height sozlash
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Muhim: minimum + maximum = sobit 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 da line height .lineSpacing(value) modifikatori orqali o'rnatiladi, u qatorlar orasiga qo'shimcha bo'shliq qo'shadi, yoki line height ni o'z ichiga olgan maxsus TextStyle bilan .font orqali. SwiftUI, shuningdek, dinamik turlarni qo'llab-quvvatlaydi: o'rnatilgan line height foydalanuvchi sozlamalarda shrift o'lchamini o'zgartirganda masshtablanadi.

// SwiftUI: lineSpacing orqali line height
Text("Maxsus qator oralig'i bilan matn
ikkinchi qator
uchinchi qator")
    .font(.body)
    .lineSpacing(4)     // qatorlar orasidagi qo'shimcha bo'shliq

// SwiftUI: maxsus stil orqali sobit line height
Text("Line height 1.2 bo'lgan sarlavha")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // aniq line-height uchun kompensatsiya

Apple HIG — Typography Implementation (2025) ma'lumotlariga ko'ra, minimumLineHeight orqali sobit line-height dan foydalanganda qiymat shriftning tabiiy line-height idan kichik emasligiga ishonch hosil qilish kerak. Agar minimumLineHeight ascender + descender dan kichik bo'lsa, UIKit sozlamani e'tiborsiz qoldiradi va tabiiy balandlikdan foydalanadi. Bu shrift yoki o'lchamni o'zgartirganda kutilmagan natijalarga olib kelishi mumkin.

Android da Line Height: View tizimi va Compose

Android ishlab chiqishda line height klassik View tizimi va Jetpack Compose da turlicha boshqariladi. View tizimida TextView.setLineSpacing(extra, multiplier) metodidan foydalaniladi. Parametr extra — pikselda qo'shimcha bo'shliq, multiplier — qatorning tabiiy balandligining ko'paytiruvchisi. Yakuniy balandlik = tabiiy line-height × multiplier + extra.

// Android View tizimi: qator oralig'i
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// XML da foydalanish
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

Jetpack Compose da line height ni boshqarish uchun LineHeightStyle sinfidan foydalaniladi, u qatorlararo bo'shliqning tekislanishini (Alignment) va kesilishini (Trim) belgilashga imkon beradi. Bu oddiy ko'paytiruvchidan ko'ra nozikroq nazorat beradi. Masalan, qo'shimcha qatorlararo bo'shliq qatordan yuqori va pastda teng taqsimlanishi (align.Center) yoki to'liq yuqoridan qo'shilishi (align.Top) mumkin.

// Jetpack Compose: LineHeightStyle misoli
Text(
    text = "Namuna matn
maxsus LineHeightStyle bilan
Jetpack Compose da",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// TextStyle orqali oddiy ko'paytiruvchi
Text(
    text = "Line height ko'paytiruvchisi",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling (2025) ma'lumotlariga ko'ra, LineHeightStyle.Trim.None (standart) birinchi va oxirgi qatorlarni bo'shliqlar bilan saqlaydi, bu Card yoki Column da tekislanishni buzishi mumkin. Sobit balandlikdagi konteynerlar uchun Trim.Both, pastki chekka muhim bo'lgan matn bloklari uchun Trim.LastLine dan foydalanish tavsiya etiladi.

Flutter da Line Height: TextStyle va StrutStyle

Flutter da line height TextStyle sinfining height xususiyati orqali o'rnatiladi. Bu font-size uchun unitless ko'paytiruvchidir: height: 1.5 va fontSize: 16 bo'lganda line-height 24.0 ni beradi. height qiymati bilvosita fontSize ga ko'paytiriladi, shuning uchun o'lcham o'zgarganda line-height mutanosib ravishda masshtablanadi. Flutter, shuningdek, StrutStyle ni taklif qiladi — qatordagi haqiqiy gliflardan qat'iy nazar sobit line-height ni majburlash mexanizmi.

// Flutter: TextStyle.height orqali line height
Text(
    'Line height 1.5 bo'lgan matn',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: sobit line height uchun StrutStyle
Text(
    'StrutStyle bilan matn
sobit line height
gliflardan mustaqil',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle, ayniqsa, turli o'lchamdagi ro'yxatlar uchun foydali (masalan, chatlar, yangiliklar lentalari), bu erda barcha qatorlar tarkibdan qat'iy nazar bir xil balandlikka ega bo'lishi kerak. StrutStyle siz faqat descender siz harflardan iborat qator „p" va „y" harflari bo'lgan qatordan kichikroq haqiqiy balandlikka ega bo'ladi, bu aylantirish paytida matnning titrashiga olib keladi.

Flutter Documentation — Text Layout (2025) ma'lumotlariga ko'ra, forceStrutHeight: true bilan StrutStyle har bir qatorning balandligi belgilangan qiymatga teng bo'lishini kafolatlaydi, haqiqiy gliflar esa bu bo'shliq ichida baseline bo'ylab tekislanadi. Bu vertikal ritm vizual idrok uchun muhim bo'lgan matn ro'yxatlari uchun standart yondashuvdir.

Turli ekranlar uchun adaptiv Line Height

Mobil ilovalar turli ekran o'lchamlari, piksel zichliklari va foydalanish imkoniyati sozlamalariga ega qurilmalarda ishlaydi. Line height bu o'zgarishlarga moslashishi, o'qishlilikni saqlab qolishi kerak. Asosiy qoida: px yoki pt da sobit qiymatlardan emas, balki o'lchamsiz ko'paytiruvchilardan (unitless) foydalaning, shunda line-height font-size bilan birga masshtablansin.

Dynamic Type (iOS) yoki fontScale (Android) dan foydalanganda shrift o'lchami bazaga nisbatan 20–50% gacha oshishi mumkin. Ko'paytiruvchi orqali o'rnatilgan line-height avtomatik masshtablanadi. Agar line-height sobit qiymat bilan o'rnatilgan bo'lsa (masalan, font-size 16 pt da 24 px), shrift 22 pt gacha oshirilganda nisbiy line-height 1.09 gacha kamayadi — bu allaqachon o'qishlilik chegarasidan past.

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

// Dinamik shriftdan ko'paytiruvchi sifatida line-height hisoblang
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Material Design — Responsive Typography (2025) ma'lumotlariga ko'ra, planshetlar va katta ekranlar (kengligi 600 dp dan ortiq) uchun asosiy matnning line-height ini telefonlarga nisbatan 0.1–0.2 ga oshirish tavsiya etiladi, chunki qator uzunligi kattalashadi. Ekran kengligi dinamik o'zgaradigan foldable qurilmalar uchun line-height har bir konfiguratsiya o'zgarishida qayta hisoblanishi kerak.