6XC

Letter Spacing Çevirici (Tracking → CSS)

Photoshop/Illustrator tracking veya Figma % harf aralığını CSS em ve px değerine çevirin.

1.150 görüntülenme

Üç Araç, Üç Birim

Adobe programları tracking'i em'in binde biri olarak ölçer: CSS em = tracking ÷ 1000; tracking 50 → letter-spacing: 0.05em. Figma'nın yüzdesi em × 100'dür: %5 = 0.05em. px değeri ayrıca yazı boyutuna bağlıdır: 16 px'te 0.05em = 0,8 px iken, 48 px'te aynı 0.05em = 2,4 px'tir. Tasarım dosyanız hangi değeri gösteriyorsa onu girin; diğerleri anında güncellenir, böylece bir Figma spesifikasyonunu geliştiriciye aktarırken elle hesap yapmanız gerekmez. Sketch ve XD de CSS ile aynı em tabanlı mantığı izler; bu yüzden karışık bir tasarım araç zincirinde standartlaşmak için genellikle en güvenli seçenek em alanıdır.

Bilinmesi Gerekenler

"Tracking" terimi, 1960-70'lerin fotoğraf-dizgi (phototypesetting) makinelerinden — Letraset transfer folyoları ve erken dönem foto-dizgi cihazları gibi — kalma bir terimdir; o dönemde harf aralığını ayarlamak, karakterlerin bir film şeridi ya da transfer folyosu üzerinde fiziksel olarak nereye "izleneceğini" (track) kaydırmak anlamına gelirdi. Sık karıştırıldığı kerning ile aynı şey değildir: tracking, seçili tüm metne eşit aralık eklerken; kerning yalnızca belirli bir harf çiftinin — örneğin çakışan şekilleriyle "AV" veya "To" ikilisinin — arasındaki boşluğu, eşit aralığın çözemediği görsel bir sorunu gidermek için düzeltir. CSS'te bilinmesi gereken pratik bir tuzak daha var: letter-spacing sonuncusu dahil her karakterden sonra boşluk ekler; bu yüzden ortalanmış veya sağa yaslı metinler, kimsenin hesaba katmadığı bu görünmez fazladan boşluk yüzünden hafif dengesiz görünebilir. Negatif tracking değerleri de pozitif değerler kadar geçerlidir ve özellikle çok büyük başlıklarda yaygındır; harfler tasarlandıkları punto boyutunun çok üzerine büyütüldüğünde varsayılan aralık gevşek görünmeye başlar.

  • Büyük vitrin başlıkları: −10 ile −30 tracking (görsel etki için sıkıştırılır)
  • Küçük BÜYÜK HARF etiketler: +50 ile +200 tracking (okunabilirlik için açılır)
  • Gövde metni: genellikle 0'da bırakılır — varsayılan aralık zaten font tasarımcısı tarafından ayarlanmıştır
  • Logotype ve marka yazıları: genellikle tek bir tracking değerinin yapabileceğinin ötesinde, harf çifti başına özel olarak ayarlanır

Sıkça Sorulan Sorular

Figma harf aralığını px gösteriyor — o zaman?

O değer zaten CSS px karşılığıdır; yazı boyutunu doğru ayarlayıp px alanına girin, farklı yazı boyutlarında düzgün ölçeklenen CSS için em karşılığını okuyun. Figma aslında dosya ayarlarına bağlı olarak hem yüzde hem de px birimini destekler; bu yüzden değerleri geliştiriciye aktarmadan önce tasarım sisteminizin hangisini kullandığını kontrol edin.

Büyük harfli metin neden artı tracking ister?

Büyük harfler, çıkıntılı ve kuyruklu küçük harflerin yanında rahatça durabilecek şekilde çizilmiştir; yalnız başlarına, dengeleyecek küçük harf olmadan sıkışık dizilince gözde dar görünürler. Tamamı büyük harf etiketlerde, gezinme öğelerinde ve üst başlık metinlerinde +%5-15 (tracking 50-150) klasik çözümdür; harf biçimlerini tek bakışta rahat okunacak kadar açar.

Tracking ile kerning arasındaki fark nedir?

Tracking, bir kelime, satır veya seçim boyunca metnin tamamına eşit aralık ekler. Kerning ise yalnızca bitişik iki harf arasındaki boşluğu düzeltir — örneğin şekilleri çakışan veya tuhaf bir görsel boşluk bırakan "AV" ya da "To" gibi ikilileri. CSS'te de bunlar ayrı ele alınır: letter-spacing tracking'i kontrol ederken, font-kerning (genellikle "normal" bırakılır) fontun kendi yerleşik kerning tablosundan gelen ikili kerning'i kontrol eder.

Ortalanmış metin letter-spacing ile neden dengesiz görünür?

CSS letter-spacing, sonuncusu dahil her karakterden sonra boşluk ekler — birçok geliştiriciyi şaşırtan bir spesifikasyon tuhaflığıdır. Ortalanmış veya sağa yaslı metinlerde bu görünmez fazladan boşluk görsel merkezi kaydırır; metin olması gerekenden hafif sola kaymış görünür. Yaygın çözüm, öğeye letter-spacing değerine kabaca eşit küçük bir negatif margin-right eklemektir.

"Tracking" terimi nereden geliyor?

1960-70'lerin fotoğraf-dizgi ekipmanlarına dayanır — Letraset transfer folyoları ve foto-dizgi birimleri gibi cihazlarda harfler arası boşluğu ayarlamak, karakterlerin bir film şeridi ya da transfer folyosu üzerinde fiziksel olarak nasıl "izleneceğini" kaydırmak demekti. Terim dijital dizgi döneminde de varlığını sürdürdü ve zamanla Photoshop ile Illustrator gibi araçlarda harf aralığı için standart kelime haline geldi; tarif ettiği fiziksel makineler ortadan kalktıktan çok sonra bile kullanılmaya devam etti.

Yorumlar

Henüz yorum yok — ilk yorumu siz yazın!

Benzer Araçlar

Döviz Çevirici (Güncel ECB Kurları) USD, EUR, GBP, TL dahil 30+ para birimini Avrupa Merkez Bankası'nın günlük referans kurlarıyla çevirin. Ücretsiz, üyeliksiz. Çevir Pound (Lbs) - Kilogram Çevirici Pound'u kilograma, kilogramı pound'a anında çevirin — iki kutudan birine yazmanız yeterli. 1 lb = 0,4536 kg. Çevir Feet ve İnç - Cm Çevirici Feet ve inç'i santimetreye, santimetreyi feet-inç'e çevirin — 5'9" kaç cm gibi boy çevirileri anında. Çevir Fahrenheit - Celsius Çevirici °F'yi °C'ye, Celsius'u Fahrenheit'a anında çevirin — hava durumu, fırın ve vücut sıcaklıkları için referanslarla. Çevir