Mobil geliştirmede tracking — karakterler arası mesafenin özü ve yapılandırılması

Tipografide tracking nedir

Tracking, bir metin bloğunun tüm karakterlerine tek tip uygulanan karakterler arası mesafe ayarıdır. Her karakter çiftinin yazı tipinin kerning tablosuna göre bireysel ayar aldığı kerning'in aksine, tracking tüm aralık için tek bir sayısal değer olarak ayarlanır. Pozitif tracking aralığı artırır (genişletilmiş boşluk), negatif tracking azaltır (sıkıştırılmış boşluk).

Terim, karakterler arası boşluğun hurufat parçaları arasındaki fiziksel mesafeyle düzenlendiği metal tipografiden gelir. Dijital tipografide tracking, kerning tablosunun üzerine uygulanır: önce yazı tipi yerleşik kerning çiftlerini uygular, ardından sistem tüm karakterlere tek tip tracking ekler. Sonuç aralığı = kerning + tracking. Metni agresif bir şekilde sıkıştırırken bu dikkate alınmalıdır.

Ölçü birimleri: tracking, mutlak birimler (punto, piksel, milimetre) ve göreceli birimler (em, yazı tipi boyutunun yüzdesi) cinsinden belirtilebilir. Mobil geliştirmede tracking tipik olarak mutlak değerler olarak punto (iOS) veya sp (Android) cinsinden, web'de ise göreceli değerler olarak em cinsinden belirtilir. Göreceli birimler, kullanıcı yazı tipi boyutunu değiştirdiğinde ölçeklendikleri için erişilebilirlik açısından tercih edilir.

Tracking ve kerning: temel farklar

Tracking ve kerning arasındaki karışıklık, acemi tasarımcılar ve geliştiriciler arasında en yaygın hatalardan biridir. Kerning mikro düzeyde çalışır — belirli karakter çiftleri (AV, Te, To) arasındaki aralığı geometrilerine göre ayarlar. Tracking makro düzeyde çalışır — bir parçanın tüm karakterlerini şekillerini dikkate almadan tek tip kaydırır.

Görsel etki: kerning ile farklı karakter çiftleri arasındaki mesafeler değişir — A ve V arası, A ve I arasından daha küçüktür, çünkü harf şekilleri birbirini telafi eder. Tracking ile tüm mesafeler aynıdır — A ve V, A ve I, T ve o arası — her yerde aynı kaydırma. Bu, tracking'i küresel ayar aracı ve kerning'i ince ayar aracı yapar.

Birlikte kullanım: arayüz tipografisinde tracking ve kerning birlikte kullanılır. Yazı tipi, temel optimizasyon için bir kerning tablosu içerir ve geliştirici, stil veya erişilebilirlik için tracking ekler. Kerning tablosu önce uygulanır, ardından üzerine tracking eklenir. Negatif tracking (sıkıştırma) ile kerning çiftleri istenmeyen örtüşmeler oluşturabilir — sorunlu kombinasyonları kontrol edin.

Pozitif ve negatif tracking: ne zaman kullanılmalı

Pozitif tracking karakterler arasındaki mesafeyi artırır. Standart boşlukta karakterlerin görsel olarak birbirine karıştığı küçük metnin (10–13pt) okunabilirliğini artırmak için kullanılır. Ayrıca disleksili kullanıcılar için erişilebilirlikte de kullanılır — artırılmış karakterler arası boşluk harf tanımayı kolaylaştırır. Tipik değerler: iOS için 0.3–1pt, web için 0.02–0.05em.

Negatif tracking karakterler arasındaki mesafeyi azaltır. Başlıklarda (24pt'den itibaren) ve vurgulu metinde kullanılır, burada yoğun metin uyumlu ve modern görünür. Büyük boyutlar sıkıştırmayı iyi tolere eder çünkü karakterler arası mesafeler görsel olarak büyüktür. Tipik değerler: -0.3 ila -1pt. Sınırlama: -1pt'nin altındaki tracking'de, özellikle çıkıntılı öğelere sahip çiftlerde (fi, fj, TT) karakterler örtüşebilir.

Ampirik kural: her yazı tipi boyutu için kabul edilebilir bir tracking aralığı vardır. Yazı tipi ne kadar büyükse, optimum okunabilirlik için o kadar az tracking gerekir. Formül: optimum tracking ≈ font-weight × 0.01 − font-size × 0.001. 16pt'deki kalın bir yazı tipi (weight 700) için: 700 × 0.01 − 16 × 0.001 = 6.84, bu da yazı yüzüne göre ayarlandığında yaklaşık 0.5pt pozitif tracking verir.

Farklı metin türleri için tracking

Gövde metni (14–18pt): tracking gerekmez veya minimum pozitif 0.1–0.3pt. Profesyonel yazı tipleri zaten gövde metni için optimum boşluğa sahiptir. Gövde metni tracking'ine herhangi bir müdahale, tasarım veya erişilebilirlik gereksinimleriyle gerekçelendirilmelidir. Başlıklar (20–36pt): yazı yüzü ve ağırlığa bağlı olarak -0.3 ila -0.8pt arasında negatif tracking kabul edilebilir. Tüm büyük harfler (ALL CAPS): 0.5–2pt pozitif tracking önerilir, çünkü büyük harfler ek boşluk olmadan görsel olarak birbirine karışır.

Yazı yüzü özellikleri: grotesk geometriye sahip yazı tipleri (Helvetica, Inter, SF Pro), serifli yazı tiplerine (Times, Georgia, PT Serif) göre negatif tracking'i daha iyi tolere eder. Serifli yazı tiplerinde, serifler harfler arasında ek görsel bağlantılar oluşturur ve sıkıştırma metni okunamaz hale getirir. Serifli yazı tipleri için yalnızca pozitif tracking önerilir.

iOS ve Android'de tracking uygulaması

iOS'ta tracking, kerning ile aynı .kern özelliği aracılığıyla NSAttributedString'de uygulanır, tek bir farkla: tracking için nil dışında bir sayısal değer belirtilir. nil, varsayılan kerning (yazı tipi tablosundan) anlamına gelir, 0 kerning'i devre dışı bırakır, diğer herhangi bir sayı kerning tablosunun üzerinde tracking anlamına gelir. Bu, .kern = 2 ayarlandığında, tüm karakterlerin yerleşik kerning çiftlerinin üzerinde +2pt karakterler arası boşluk aldığı anlamına gelir.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Pozitif tracking +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Tracking ile UILabel
label.attributedText = attributedString

SwiftUI, Text üzerinde CGFloat kabul eden .tracking() değiştiricisini kullanır. UIKit'in aksine, SwiftUI tracking'i değiştirici içindeki tüm metne uygulanır ve birden çok Text bloğuna bölünmeden kısmi olamaz. SwiftUI, kerning ve tracking kombinasyonunu otomatik olarak işleyerek tracking'i yazı tipinin kerning tablosunun üzerine uygular.

Android, TextView'de em (yazı tipi boyutuna göre çarpan) cinsinden belirtilen letterSpacing özelliğini kullanır. 0 değeri varsayılan tracking anlamına gelir, 0.05 em'in %5 artışı, -0.02 azalma anlamına gelir. Android'de letterSpacing tracking (tüm karakterler için tek tip) olarak çalışırken, yazı tipinin kerning tablosu Minikin işleme motoru düzeyinde otomatik olarak uygulanır.

// XML düzeninde
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Kotlin'de programatik olarak
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose Android'de, TextStyle'de sp cinsinden belirtilen letterSpacing parametresini kullanır. Örneğin, TextStyle(letterSpacing = 0.5.sp) 0.5 sp tracking sağlar. XML yaklaşımının aksine, Compose, letterSpacing'i tek bir TextStyle nesnesinde diğer tipografik parametrelerle birleştirerek tasarım sistemlerinin oluşturulmasını basitleştirir.

Web geliştirmede letter-spacing yapılandırması

Web'de tracking, herhangi bir uzunluk birimini veya normal anahtar sözcüğünü kabul eden CSS özelliği letter-spacing aracılığıyla uygulanır. normal değeri 0'a (ek karakterler arası boşluk yok) karşılık gelir. Özellik miras alınır, negatif değerleri destekler ve canlandırılabilir. CSS Spesifikasyonuna göre letter-spacing, yazı tipinin kerning tablosundan sonra uygulanır.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: em cinsinden letter-spacing, font-size değiştiğinde ölçeklenir ve erişilebilirlik için tercih edilir. px ölçeklenmez ve tarayıcı metni yakınlaştırdığında tutarsızlıklara neden olabilir. Öneri: letter-spacing için her zaman em kullanın. İstisna, logolarda olduğu gibi tracking'in boyuttan bağımsız olarak sabit kalması gereken durumlardır.

letter-spacing animasyonu: özellik CSS geçişlerini ve animasyonlarını destekleyerek yumuşak metin görünme efektleri sağlar. Bir başlık yüklenirken letter-spacing: -0.05em'den letter-spacing: 0.01em'e animasyon yapmak modern arayüzlerde popüler bir tekniktir. Performans: letter-spacing animasyonu, metin genişliğini değiştirdiği için reflow'a (düzen yeniden hesaplaması) neden olur. Mümkün olduğunda yüksek performanslı animasyonlar için transform ve opacity kullanın.

Erişilebilirlik ve mobil arayüzlerde tracking

Tracking, görme engelli ve disleksili kullanıcılar için metin okunabilirliğini doğrudan etkiler. WCAG 2.2 Kılavuzu 1.4.12 (Metin Boşluğu), karakterler arası, satırlar arası ve paragraflar arası boşluk belirli değerlere yükseltildiğinde metnin içerik kaybetmemesini şart koşar. letter-spacing, içerik kırpma veya öğe örtüşmesi olmadan 0.12em'lik bir artışa dayanmalıdır.

Disleksi: British Dyslexia Association araştırması, letter-spacing'in 0.12em'e yükseltilmesinin disleksili kullanıcılarda okuma hızını %10–15 oranında artırdığını göstermektedir. Ancak bu bireyseldir — bazı kullanıcılar standart boşluğu tercih eder. iOS ve Android, uygulamanın saygı göstermesi gereken, karakterler arası boşluğu artırmak için sistem erişilebilirlik ayarları sağlar.

Geliştirici için kurallar: letter-spacing arttığında kırılabilecek sabit genişlik/yükseklikler kullanmayın. Erişilebilirlik doğrulaması olmadan metin kaplarında overflow: hidden'dan kaçının. Arayüzü tüm ekranlarda 0.12em'e yükseltilmiş letter-spacing ile test edin. Tasarım bozulursa, erişilebilirliği görmezden gelmek yerine düzeni gözden geçirin.

Platform desteği: iOS, UIFont.preferredFont kullanılıyorsa, erişilebilirlik ayarlarında Büyük Metin özelliği etkinleştirildiğinde letter-spacing'i otomatik olarak artırır. Android, FontScale aracılığıyla benzer bir seçenek sunar. Geliştirici bu ayarları devre dışı bırakmamalıdır. Test senaryosu: cihaz ayarlarında maksimum metin boyutunu etkinleştirin ve tracking'in arayüz düzenini bozmadığını doğrulayın.