Uygulama Geliştirmede Line Height — nedir ve tipografi üzerindeki etkisi

Tipografide Line Height Nedir

Line Height (satır yüksekliği), ardışık satırların taban çizgileri (baseline) arasındaki mesafeyi belirleyen temel bir tipografik parametredir. Web ve mobil geliştirmede, line height metnin dikey ritmini belirler: her satır belirli bir yükseklik kaplar ve bu parametre bir sonraki satıra geçerken birikir. Line height, yalnızca gliflerin gerçek yüksekliğini (ascender + descender) değil, aynı zamanda okunabilirliği artıran ek alanı da içerir.

Matematiksel olarak, line height şu şekilde ifade edilir: line-height = font-size × multiplier. font-size = 16 px ve multiplier = 1,5 ise, line-height = 24 px olur. Bu durumda satır aralığı (leading) 24 - (ascender + descender) piksel olacaktır. Çoğu tasarım sistemi ve platformu çarpanı kullanır çünkü yazı tipi boyutu değiştiğinde otomatik olarak ölçeklenir.

Material Design Type Scale (2025)'e göre, line height, font-size ve font-weight ile birlikte bir uygulamanın tipografik sisteminin üç temel parametresinden biridir. Tipografik hiyerarşinin tüm seviyeleri için tutarlı line height değerleri, arayüzü görsel olarak bütünleşik kılan dikey bir ritim oluşturur. Optimum değerden %10'luk bir line-height sapması çıplak gözle fark edilir ve arayüzün algılanan kalitesini düşürür.

Line Height ve Leading: Fark Nedir

Leading (okunuşu «leding»), glif yüksekliği çıkarıldıktan sonra taban çizgisinden taban çizgisine kadar olan satırlar arası mesafeyi ifade eden tarihi bir tipografik terimdir. Metal dizgide leading, satırlar arasına boşluğu artırmak için yerleştirilen kurşun şeritlerdi. Line height, hem yazı tipi yüksekliğini hem de leading'i içeren daha modern bir kavramdır.

Pratikte, Figma veya Sketch'ten koda tasarım aktarırken bu fark önemlidir. Tasarım araçları genellikle line-height'i (veya basitçe satır yüksekliğini) belirtir. Mobil platform API'leri farklı terimler kullanabilir: iOS, minimumLineHeight/maximumLineHeight ile birlikte lineSpacing'i (leading'e daha yakın) kullanır, Android alignment ve trim ile LineHeightStyle kullanır, Flutter height (birimsiz çarpan) kullanır.

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

Temel fark: minimumLineHeight ayarlarsanız, tüm satırlar aynı yüksekliği kullanır, bu ritmik bir ızgara için iyidir. Yalnızca lineSpacing ayarlarsanız, satır yüksekliği yazı tipi boyutuna göre değişir — bu daha esnek ancak daha az öngörülebilir bir yaklaşımdır. Tasarım sistemleri için minimumLineHeight önerilir çünkü sıkı bir şekilde kontrol edilen bir sonuç verir.

IBM Carbon Design System — Typography Guidelines (2025)'e göre, line height ve leading arasındaki fark, özel yazı tipleri kullanıldığında özellikle belirgindir. Yazı tipinin büyük bir dahili leading'i varsa (örneğin, SF Pro), lineSpacing = 0 kabul edilebilir bir sonuç verir. Yazı tipinin leading'i küçükse (bazı açık kaynak yazı tipleri), ek lineSpacing olmadan satırlar bitişik görünecektir.

Mobil Arayüzler için Optimum Line Height

Optimum line height, yazı tipi boyutu, satır uzunluğu, yazı tipi ve hedef kitle gibi çeşitli faktörlere bağlıdır. Mobil cihazlarda ana metin için (satır uzunluğu 35–55 karakter), önerilen aralık font-size'ın 1,4–1,6 katıdır. Bu değer, metnin görsel bütünlüğünü kaybetmeden satırlar arasında rahat göz hareketi için yeterli dikey boşluk sağlar.

Satır uzunluğunun genellikle daha kısa olduğu başlıklar için (2–6 kelime), line height daha küçük olabilir — font-size'ın 1,1–1,25 katı. Başlıklar, ana işlevleri uzun süreli okuma değil dikkat çekmek olduğu için büyük satır aralığı gerektirmez. Ayrıca, büyük başlık yazı tipi boyutları (24–32 pt) line-height 1,5 ile sayfanın dikey ritmini bozan aşırı boşluklar oluşturur.

• Ana Metin (16–18 pt) — line-height 1,4–1,6. Satır uzunluğunun ekran genişliğiyle sınırlı olduğu mobil cihazlarda rahat okuma için minimum.
• Küçük Metin (11–13 pt) — line-height 1,3–1,5. Küçük yazı tipi boyutları, satırlar daha kısa olduğu ve göz bir sonraki satırı daha hızlı bulduğu için daha küçük bir çarpan gerektirir.
• Büyük Metin (20–32 pt) — line-height 1,1–1,25. Yazı tipi büyüdükçe, okunabilirlik için daha az bağıl satır aralığı gerekir.
• Sabit Aralıklı Metin — line-height 1,3–1,5. Sabit aralıklı yazı tipleri (kod için) genellikle daha büyük metrik değerlere sahiptir, bu nedenle line-height 1,3'e düşürülebilir.

// Flutter: line height in design system
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)'e göre, ana metin için 1,2'nin altındaki line height bir erişilebilirlik engeli olarak kabul edilir: disleksi ve görme bozukluğu olan kullanıcılar yoğun metni okumada önemli zorluklar yaşar. WCAG 2.2, ana içerik için en az 1,5 line-height önerir, ancak mobil arayüzlerde sınırlı ekran genişliği dikkate alınarak bu değer 1,4'e düşürülebilir.

iOS'ta Line Height: UIKit ve SwiftUI

iOS'ta line height, NSMutableParagraphStyle veya SwiftUI'nin yerleşik değiştiricileri aracılığıyla kontrol edilir. UIKit üç temel özellik sunar: minimumLineHeight ve maximumLineHeight (kesin satır yüksekliğini ayarlar) ve lineSpacing (satırlar arasında ek boşluk). TextKit (NSTextStorage, NSLayoutManager) kullanılırken, line height lineFragmentRect'te dikkate alınır ve metin bloğu geometrisi hesaplamasını etkiler.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed 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'de line height, satırlar arasına ekstra boşluk ekleyen .lineSpacing(value) değiştiricisi veya line height içeren özel bir TextStyle ile .font aracılığıyla ayarlanır. SwiftUI ayrıca Dinamik Türü (Dynamic Type) destekler: belirtilen line height, kullanıcı ayarlarda yazı tipi boyutunu değiştirdiğinde ölçeklenir.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Apple HIG — Typography Implementation (2025)'e göre, minimumLineHeight aracılığıyla sabit line-height kullanılırken, değerin yazı tipinin doğal line-height'inden küçük olmadığından emin olunmalıdır. minimumLineHeight, ascender + descender'dan küçükse, UIKit ayarı yok sayar ve doğal yüksekliği kullanır. Bu, yazı tipi veya boyut değiştirilirken beklenmeyen sonuçlara yol açabilir.

Android'de Line Height: View Sistemi ve Compose

Android geliştirmede, line height klasik View sistemi ve Jetpack Compose'da farklı şekilde yönetilir. View sisteminde TextView.setLineSpacing(extra, multiplier) yöntemi kullanılır. extra parametresi piksel cinsinden ek alan, multiplier doğal satır yüksekliğinin bir çarpanıdır. Sonuç yüksekliği = doğal line-height × multiplier + extra.

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

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

Jetpack Compose'ta, line height yönetimi için LineHeightStyle sınıfı kullanılır ve satır arası boşluğun Hizalama (Alignment) ve Kırpma (Trim) ayarlarına izin verir. Bu, basit bir çarpandan daha ince bir kontrol sağlar. Örneğin, ek satır arası boşluğun satırın üstüne ve altına eşit olarak dağıtılmasını (align.Center) veya tamamen üste eklenmesini (align.Top) belirtebilirsiniz.

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Android Developers — Compose Text Styling (2025)'e göre, LineHeightStyle.Trim.None (varsayılan) ilk ve son satırda boşluğu korur ve bu Card veya Column'da hizalamayı bozabilir. Sabit yükseklikli kaplar için Trim.Both ve alt kenarın önemli olduğu metin blokları için Trim.LastLine önerilir.

Flutter'da Line Height: TextStyle ve StrutStyle

Flutter'da line height, TextStyle sınıfının height özelliği aracılığıyla ayarlanır. font-size'ın birimsiz bir çarpanıdır: fontSize: 16 ile height: 1,5, line-height 24,0 verir. height değeri örtük olarak fontSize ile çarpılır, bu nedenle yazı tipi boyutu değiştiğinde line-height orantılı olarak ölçeklenir. Flutter ayrıca StrutStyle sunar — satırdaki gerçek gliflerden bağımsız olarak sabit line-height zorlamak için bir mekanizma.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle, farklı yazı tipi boyutlarına sahip listeler (örneğin, sohbetler, haber akışları) için özellikle kullanışlıdır ve içerikten bağımsız olarak tüm satırların aynı yüksekliğe sahip olması gerekir. StrutStyle olmadan, yalnızca descender'sız harfler içeren bir satır, «p» ve «y» gibi harfler içeren bir satırdan daha küçük gerçek yüksekliğe sahip olur ve kaydırma sırasında metin titremesine neden olur.

Flutter Documentation — Text Layout (2025)'e göre, forceStrutHeight: true ile StrutStyle, her satırın yüksekliğinin belirtilen değere eşit olmasını garanti eder ve gerçek glifler bu alan içinde taban çizgisine göre hizalanır. Bu, dikey ritmin görsel algı için kritik olduğu metin listeleri için standart yaklaşımdır.

Farklı Ekranlar için Uyarlanabilir Line Height

Mobil uygulamalar, farklı ekran boyutları, piksel yoğunlukları ve erişilebilirlik ayarlarına sahip cihazlarda çalışır. Line height, okunabilirliği korurken bu değişikliklere uyum sağlamalıdır. Ana kural: line-height'in font-size ile birlikte ölçeklenmesi için px veya pt cinsinden sabit değerler yerine birimsiz çarpanlar (unitless) kullanın.

Dynamic Type (iOS) veya fontScale (Android) kullanılırken, yazı tipi boyutu taban çizgisine göre %20–50 oranında artabilir. Bir çarpan aracılığıyla belirtilen line-height otomatik olarak ölçeklenir. line-height sabit bir değer olarak ayarlanmışsa (örneğin, font-size 16 pt'de 24 px), yazı tipi 22 pt'ye yükseldiğinde bağıl line-height 1,09'a düşer — bu zaten okunabilirlik eşiğinin altındadır.

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

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

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

Material Design — Responsive Typography (2025)'e göre, tabletler ve büyük ekranlar (600 dp'den geniş) için, satır uzunluğu daha büyük olduğundan, ana metin line-height'inin telefonlara göre 0,1–0,2 artırılması önerilir. Ekran genişliğinin dinamik olarak değiştiği katlanabilir cihazlar için, her yapılandırma değişikliğinde line-height yeniden hesaplanmalıdır.