Leading ve satır aralığı: nedir ve iOS ile Android'de yapılandırma
Leading (satır aralığı) — bitişik metin satırlarının taban çizgileri arasındaki mesafedir ve okuma konforunu doğrudan belirler. Terim, fiziksel tipografik harflerden gelir: satırlar arasına aralığı artırmak için kurşun şeritler (lead strips) yerleştirilirdi. Modern mobil geliştirmede leading, iOS'ta NSAttributedString'de lineSpacing ve lineHeightMultiple aracılığıyla ve Android'de TextView'de lineSpacing aracılığıyla uygulanır. Apple NSMutableParagraphStyle Documentation'a göre, satır aralığı punto cinsinden belirlenir ve satır yüksekliği çarpanıyla birleştirilebilir.
Önemli Noktalar
- Leading — satırların taban çizgileri arasındaki mesafe, metnin okunabilirliğini etkiler
- iOS'ta NSParagraphStyle üzerinden yapılandırılır: lineSpacing ve lineHeightMultiple
- Android'de TextView'de lineSpacingExtra ve lineSpacingMultiplier ile kontrol edilir
- Mobil arayüzler için ideal leading: Yazı tipi boyutunun %120-150'si
- Erişilebilirliği etkiler: yetersiz satır aralığı metnin okunabilirliğini azaltır
Leading ve satır aralığı nedir
Leading (“ledin” diye okunur) — tipografide bitişik satırların taban çizgileri arasındaki dikey mesafedir. Taban çizgisi, metin karakterlerinin üzerinde konumlandığı görünmez çizgidir. Leading ne kadar büyükse, satırlar birbirine göre o kadar serbest yerleştirilir. Dijital tipografide leading genellikle satır aralığı veya satır yüksekliği olarak adlandırılır.
Tarihsel olarak terim, metal tipografi çağında ortaya çıkmıştır: dizgiciler aralığı artırmak için satırlar arasına ince kurşun şeritler yerleştirirdi. Modern yazı tiplerinde leading, yazı tipi boyutuna oran olarak tanımlanır. Varsayılan sistem değeri — 1.2 (yazı tipi boyutunun %120'si), ancak uzun metinler ve mobil arayüzler için daha büyük bir değer önerilir. Material Design Typography Guidelines'a göre, web ve mobil arayüzler için ana metin için ideal satır yüksekliği 1.4-1.5'tir.
Leading ve satır aralığı arasındaki fark: leading, taban çizgisinden taban çizgisine olan toplam mesafedir, satır aralığı ise bir satırın alt sınırı ile sonraki satırın üst sınırı arasındaki mesafedir. Çoğu mobil API'de (iOS NSParagraphStyle, Android TextView), satır aralığı, satırın doğal yüksekliğinin üzerine ek boşluk olarak kullanılır. Bu, toplam satır aralığı hesaplanırken dikkate alınmalıdır.
Mobil arayüzler için ideal leading değerleri
Ideal leading seçimi birden fazla faktöre bağlıdır: yazı tipi boyutu, satır uzunluğu, kullanım bağlamı ve hedef kitle. Tipik satır genişliği 40-60 karakter olan mobil arayüzler için, yazı tipi boyutunun 1.4 ila 1.6'sı arasında bir leading önerilir. Kısa satırlar (etiketler, düğmeler) daha küçük bir leading kullanabilir — 1.0-1.2. Uzun metinler (makaleler, açıklamalar) — maksimum okunabilirlik için 1.8'e kadar daha büyük bir leading.
Deneysel veriler: Wichita State University Software Usability Laboratory araştırması, leading 1.5'in aynı satır genişliğinde leading 1.0'a kıyasla okuma hızını %7.5 artırdığını göstermiştir. Disleksili kullanıcılar için ideal leading daha da yüksektir — 1.8'e kadar. Bu veriler, içerik kaybı olmadan satır aralığını 1.5'e kadar artırma olanağı gerektiren WCAG 2.2 önerileriyle doğrulanmıştır.
Yazı tipi etkisi: yüksek x-height (küçük harflerin göreceli yüksekliği) olan yazı tipleri, düşük x-height olanlardan daha büyük bir leading gerektirir. Örneğin, Helvetica (yüksek x-height) gövde metni için leading 1.5 önerirken, Didot (düşük x-height) 1.3 önerir. Bunun nedeni, yüksek x-height'te aynı satır aralığında satırların görsel olarak daha hızlı birleşmesidir.
| Bağlam | Önerilen leading | iOS örneği |
|---|---|---|
| Başlıklar (24-36pt) | 1.0 — 1.2 | lineHeightMultiple: 1.1 |
| Ana metin (14-18pt) | 1.4 — 1.6 | lineHeightMultiple: 1.5 |
| Küçük metin (10-13pt) | 1.3 — 1.5 | lineHeightMultiple: 1.4 |
| Makaleler ve uzun okumalar | 1.5 — 1.8 | lineHeightMultiple: 1.6 |
| Erişilebilirlik (disleksi) | 1.6 — 2.0 | lineHeightMultiple: 1.8 |
iOS'ta NSParagraphStyle ile leading uygulaması
iOS'ta satır aralığı, iki temel özellik içeren NSMutableParagraphStyle sınıfı aracılığıyla kontrol edilir: lineSpacing (satırlar arasındaki punto cinsinden ek boşluk) ve lineHeightMultiple (satır yüksekliği çarpanı). Bu özellikler birlikte çalışır: nihai satır yüksekliği, yazı tipinin doğal yüksekliğinin lineHeightMultiple ile çarpılması ve lineSpacing'in eklenmesiyle hesaplanır.
swift
let paragraphStyle = NSMutableParagraphStyle()
// Yöntem 1: satır yüksekliği çarpanı
paragraphStyle.lineHeightMultiple = 1.5
// Yöntem 2: satırlar arasında ek boşluk
paragraphStyle.lineSpacing = 4.0
// NSAttributedString ile uygula
let attributedText = NSAttributedString(
string: "Text with custom line spacing",
attributes: [
.paragraphStyle: paragraphStyle
]
)
lineHeightMultiple — tercih edilen yöntemdir, çünkü yazı tipi boyutu değiştiğinde otomatik olarak ölçeklenir. lineSpacing mutlak punto cinsinden tanımlanır ve ölçeklenmez, bu da Dynamic Type kullanırken tutarsızlıklara yol açabilir. Apple Text Programming Guide'a göre, erişilebilirlik uyumlu arayüzler için UIFontMetrics ile birlikte lineHeightMultiple kullanın.
SwiftUI, Text ve VStack için .lineSpacing() değiştiricisini sağlar. UIKit'in aksine, SwiftUI'de satır aralığı punto cinsinden tanımlanır ve yerleşik bir çarpana sahip değildir. Bir çarpan uygulamak için geliştiricinin, yazı tipi boyutuna göre satır aralığını manuel olarak hesaplaması gerekir. Sınırlama: SwiftUI, lineHeightMultiple'ı doğrudan desteklemez — hesaplanmış bir değerle .lineSpacing(CGFloat) kullanın.
swift
struct LeadingTextView: View {
let fontSize: CGFloat = 17
var lineSpacing: CGFloat {
fontSize * 0.5 // Yazı tipi boyutunun %50'si
}
var body: some View {
Text("Satır aralığı")
Text("1.5 çarpanı")
.lineSpacing(lineSpacing)
.font(.system(size: fontSize))
}
}
Android'de satır aralığı yapılandırması
Android'de satır aralığı, TextView'in iki özelliğiyle tanımlanır: lineSpacingExtra (px cinsinden ek boşluk) ve lineSpacingMultiplier (satır yüksekliği çarpanı, varsayılan 1.0). iOS'a benzer şekilde, çarpan yazı tipi boyutu değiştiğinde ölçeklenirken, extra mutlak bir değerdir. Erişilebilirlik uyumlu arayüzler için çarpan kullanmak tercih edilir.
groovy
// XML düzeninde
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text with line spacing"
android:lineSpacingExtra="4dp"
android:lineSpacingMultiplier="1.5"
android:textSize="16sp" />
// Kotlin'de programatik olarak
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
4f,
resources.displayMetrics
),
1.5f
)
Compose — modern Android UI framework'
Sınırlama: Android API 28'e kadar, lineSpacingExtra ve lineSpacingMultiplier bazı yazı tipleriyle, özellikle özel (TTF/OTF) yazı tipleriyle yanlış çalışır. Gerçek cihazlarda test edilmesi önerilir ve systemTextView'ın varsayılan olarak lineSpacingMultiplier 1.0 kullandığını unutmayın — ek boşluk yok. ScrollView içindeki uzun metinler için satır aralığının açıkça ayarlanması zorunludur.
Web geliştirmede CSS line-height ile satır aralığı
Web'de satır aralığı, bir sayı (çarpan), yüzde değeri, uzunluk birimleri (px, em) veya normal anahtar kelimesi olabilen CSS line-height özelliğiyle tanımlanır. Sayısal çarpan tercih edilen yöntemdir, çünkü devralınır ve alt öğelerin yazı tipi boyutuna göre ölçeklenir. normal değeri çoğu yazı tipi için yaklaşık 1.2'ye karşılık gelir.
css
/* Numerical multiplier (recommended) */
body {
font-size: 16px;
line-height: 1.5;
}
/* Percentage value */
.article-content {
line-height: 150%;
}
/* Fixed value (does not scale) */
.small-text {
font-size: 12px;
line-height: 18px;
}
Sayısal çarpan vs em: line-height: 1.5 ve line-height: 1.5em farklı şeylerdir. Sayısal çarpan, hesaplanmış değer olarak devralınır ve her alt öğe için kendi font-size'ine göre yeniden hesaplanır. em, üst öğenin font-size'ine dayalı sabit hesaplanmış değer olarak devralınır. Bu kritik bir farktır: font-size: 20px, font-size: 16px içindeyken, line-height: 1.5 30px verirken, line-height: 1.5em 24px (üst öğeden) verir. Öneri: her zaman sayısal çarpan kullanın.
iOS, Android ve web'de leading ayarlarının karşılaştırması
Farklı API'lere rağmen, satır aralığı yapılandırma ilkesi tüm platformlarda aynıdır. Çarpan, yazı tipi boyutu değiştiğinde ölçeklenir ve erişilebilirlik dostudur. Mutlak değer (boşluk) ölçeklenmez ve Dynamic Type veya büyük metin ayarları kullanılırken sorunlara yol açabilir.
Platformlar arası strateji: tasarım sisteminde lineHeight'ı fontSize'in çarpanı olarak tanımlayın. Örneğin, tasarım token'larında: line-height-body = 1.5, line-height-heading = 1.1. Her platform bu çarpanı kendi API'siyle uygular: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Bu, tüm platformlarda aynı görsel sonucu garanti eder.
| Platform | Çarpan API'si | Boşluk API'si |
|---|---|---|
| iOS UIKit | NSParagraphStyle.lineHeightMultiple | NSParagraphStyle.lineSpacing |
| iOS SwiftUI | .lineSpacing (manuel hesaplama) | .lineSpacing(CGFloat) |
| Android XML | android:lineSpacingMultiplier | android:lineSpacingExtra |
| Android Compose | TextStyle.lineHeight (sp cinsinden) | TextStyle.lineHeight |
| Web CSS | line-height: {sayı} | line-height: {px/em} |
Önemli nüan: iOS'ta lineHeightMultiple, satırın tam yüksekliğine (yazı tipinin ascender + descender dahil) uygulanırken, Android'de lineSpacingMultiplier, Minikin işleme motoru tarafından hesaplanan satır yüksekliğine uygulanır. Pratikte bu, aynı çarpan değerinde görsel leading'de küçük farklılıklara yol açar. Pixel-perfect uyum için platforma göre ayarlanmış mutlak değerler kullanın.
Sıkça Sorulan Sorular
Leading ile satır aralığı arasındaki fark nedir?
Leading — bir satırın taban çizgisinden sonraki satırın taban çizgisine kadar olan toplam mesafedir. Satır aralığı — satırın doğal yüksekliğine eklenen satırlar arasındaki ek boşluktur. iOS'ta lineSpacing, tam yükseklik değil, ek boşluktur.
Erişilebilirlik için hangi leading kullanılmalı?
WCAG 2.2'ye uyum için ana metin için line-height 1.5 kullanın. Disleksili ve görme bozukluğu olan kullanıcılar, 1.6 ila 1.8 arasında leading ile metinleri daha iyi okur. Kullanıcının içerik kaybı olmadan satır aralığını artırabildiğinden emin olun.
SwiftUI'de leading neden UIKit'ten farklı?
SwiftUI kendi işleme motorunu kullanır; burada lineSpacing, yerleşik çarpan olmadan punto cinsinden satırlar arasındaki boşluktur. UIKit'te lineHeightMultiple, yazı tipi boyutuyla ölçeklenir. Tekdüzelik için SwiftUI'de lineSpacing'i 1.5 çarpanı için fontSize * 0.5 olarak hesaplayın.
Leading kaydırma performansını etkiler mi?
FPS üzerinde doğrudan bir etkisi yoktur, ancak daha büyük leading, içerik yüksekliğini ve dolayısıyla UICollectionView/RecyclerView'daki hücre sayısını artırarak dolaylı olarak performansı etkiler. Binlerce öğeye sahip listeler için tasarım sisteminde leading'i optimize edin.
Standart olmayan bir yazı tipi için leading nasıl hesaplanır?
Formülü kullanın: line-height = font-size + (font-size * multiplier). Çarpan 1.5 olan 16pt yazı tipi için: 16 + (16 * 0,5) = 24pt. Gerçek metin üzerinde görsel olarak kontrol edin — farklı yazı tipleri bireysel ayarlama gerektirir.
Özet
- Leading — satırların taban çizgileri arasındaki mesafe, metnin okunabilirliğini belirler
- Mobil arayüzler için ideal satır aralığı: yazı tipi boyutunun 1.4 — 1.6'sı
- iOS'ta NSMutableParagraphStyle içinde lineHeightMultiple ile yapılandırılır
- Android'de TextView'de lineSpacingMultiplier veya Compose'da lineHeight ile kontrol edilir
- Web'de sayısal çarpanla (em veya px değil) line-height kullanılır
- Çarpan — tercih edilen yöntem: Dynamic Type ve erişilebilirlik ayarlarında ölçeklenir
- Erişilebilirlik için leading 1.5 ve üzerini kullanın, kullanıcının aralığı artırmasına izin verin
Anahtar teslim bir mobil uygulama geliştireceğiz
IT Sectr, 2017'den beri girişimler ve işletmeler için iOS ve Android uygulamaları oluşturmaktadır. Size danışmanlık yapacak ve en iyi çözümü önereceğiz.
Ayrıca okuyun