Inter’in yerine geçecek bir arayüz fontunu, iki ölçüye bakarak seçebilirsiniz: büyük harf yüksekliğinin font kutusunda tam ortalanması (cap-centered dikey metrikler) ve küçük harf yüksekliğinin büyük harfin en az %70’i, ideali %75’i olması. Bu iki ölçüyü tutturan font, buton ve menü etiketlerini piksel itmeden ortalar; tutturamayan font her boyutta ayrı padding düzeltmesi ister.
Bu çerçeveyi Yep! Type Foundry’nin “How to choose a UI font (and 10 Inter alternatives)” rehberi ortaya koyuyor. Ama rehberdeki 10 alternatifin hiçbiri Google Fonts’ta yok; ikisi de yazıyı yayımlayan dökümhanenin kendi fontu. Biz aynı iki ölçüyü Google Fonts’taki 13 ücretsiz alternatife ve Inter’e uyguladık, sonuçları Chromium’da doğruladık ve Türkçe karakter desteğine de baktık.
İyi bir UI fontunu hangi iki ölçü belirler?
Bir arayüz fontu, gövde metninden çok kısa etiketlerde çalışır: buton, sekme, rozet, menü öğesi. Bu etiketlerde okuyucunun gözü kelimenin kutunun ortasında durup durmadığını hemen fark eder. O ortalamayı fontun kendisi belirler, CSS değil.
padding: var(--space-v) var(--space-h) her boyutta yeter; boyut başına üst/alt düzeltme gerekmez.Ölçü 1: Büyük harf kutuda ortalanmalı
Her fontun bir sınır kutusu (ascender ve descender değerleriyle tanımlanan alan) vardır. Büyük harfin üstündeki boşluk ile taban çizgisinin altındaki boşluk eşitse, simetrik padding verdiğiniz her butonda etiket ortada durur. Eşit değilse etiket yukarı ya da aşağı kayar ve ekip her boyut için ayrı değer yazmaya başlar:
/* Cap-centered fontta: tek kural, her boyut */
.button { padding: var(--space-v) var(--space-h); }
/* Ortalanmamış fontta: her boyuta ayrı düzeltme */
.button { padding: 13px 16px 11px; } /* 16px metin */
.button--sm { padding: 10px 12px 8px; } /* 14px metin */
.button--lg { padding: 17px 20px 15px; } /* 20px metin */Ölçü 2: x-height en az %70 olmalı
x-height, küçük harflerin gövde yüksekliğidir. Rehbere göre Inter ve San Francisco bu oranda %75’te durur; %70’in altında kelime “aşağıda oturuyor” gibi görünür, %100’de ise büyük-küçük harf ritmi kaybolur ve metin tek kasalı bir bloğa döner (Yep! Type Foundry).
Bir fontun dikey metrikleri nasıl kontrol edilir?
Font dosyasını açmadan Figma’da iki dakikada test edebilirsiniz. Rehberin önerdiği yöntem şu:
- Metin yazın: Bir metin katmanına “Hanglovers” gibi büyük H, küçük harf ve inen harf (g) içeren bir kelime yazın.
- Büyütün: Font boyutunu 1000 piksele çıkarın ve büyük “H” harfine yakınlaşın.
- Satır yüksekliğini düşürün: Line height değerini adım adım azaltın; metin kutusu harflerin üzerine kapanır.
- Kenarları izleyin: Kutunun üst kenarı H’nin tepesine, alt kenarı taban çizgisine aynı anda değiyorsa font cap-centered’dır. Biri önce değiyorsa font ekran arayüzü için ek iş çıkarır.
Kod tarafında aynı ölçümü tarayıcıda da yapabilirsiniz. Canvas’ın measureText() metodu fontun kutu yüksekliğini (fontBoundingBoxAscent, fontBoundingBoxDescent) ve “H” harfinin gerçek yüksekliğini (actualBoundingBoxAscent) verir; üstteki boşluk ile alttaki boşluğun farkının yarısı, etiketin ne kadar kaydığını gösterir:
const c = document.createElement("canvas").getContext("2d");
c.font = '100px "Geist"';
const m = c.measureText("H");
const ust = m.fontBoundingBoxAscent - m.actualBoundingBoxAscent;
const alt = m.fontBoundingBoxDescent;
console.log("Kayma (font boyutunun %'si):", (ust - alt) / 2);Font dosyası elinizdeyse Python’daki fontTools kütüphanesiyle OS/2 tablosundaki sCapHeight, sxHeight ve tipografik ascender/descender değerlerini okuyarak aynı hesabı yapabilirsiniz. Aşağıdaki ölçümler bu iki yöntemle yapıldı.
Google Fonts’taki 13 ücretsiz Inter alternatifini ölçtük
Inter’e en sık önerilen ücretsiz alternatifleri Google Fonts’tan Regular (400) ağırlıkta indirdik. Her font için x-height oranını ve büyük harfin kutudaki kaymasını fontTools ile hesapladık; kaymayı Chromium’da measureText() ile ayrıca ölçtük ve iki sonuç birbirini tuttu.
x-height / büyük harf yüksekliği oranı
Sonuç ilk bakışta rahatlatıcı: listedeki 14 fontun tamamı %70 eşiğinin üstünde. Work Sans (%75,8) ve Golos Text (%75,7) Inter’den bile yüksek. Ama x-height tek başına yetmiyor; asıl ayrışma ikinci ölçüde.
Etiketin kutu ortasından kayması (font boyutunun %’si)
measureText(), 18 Ekim 2026.Plus Jakarta Sans’ta kayma font boyutunun %3,55’i: 16 piksellik bir buton etiketinde yarım piksel, 48 piksellik bir başlık butonunda 1,7 piksel. Fark küçük ama sistematik; ikonla yan yana durduğunda ya da büyük boyutlarda göze batar. Inter, Geist, Figtree, Albert Sans ve Instrument Sans ise tam sıfır; Public Sans %0,1 ile pratikte ortalı.
Hangisini seçmeli?
İki ölçüyü birlikte okuyunca tablo netleşiyor:
text-box-trim ile ya boyut başına padding’le düzeltilmeli.
Doğrudan geçiş: Geist — Inter’le aynı padding token’larıyla çalışır.- Daha sıcak bir ses: Figtree ya da Albert Sans — ortalama kusursuz, x-height biraz düşük.
Dikkatli kullanın: Plus Jakarta Sans, Golos Text, IBM Plex Sans, Manrope — başlık ve gövdede sorun yok, butonda düzeltme ister.- Ters yönde kayanlar: Onest (%2,1) ve Roboto (%1,37) etiketi yukarı iter; DM Sans’ta kayma %0,9 ile sınırda.
Rehberdeki 10 ticari alternatif
Yep! Type Foundry’nin listesindeki fontların hepsi, yazara göre cap-centered metriklere sahip; tablo x-height oranına göre sıralı. Bu fontların hiçbiri Google Fonts’ta değil, lisanslarını kendi dökümhanelerinden almanız gerekir. Innovator Grotesk ve Unifora, rehberi yayımlayan Yep! Type Foundry’nin kendi fontları.
| Yazı tipi | Dökümhane | x-height |
|---|---|---|
| Innovator Grotesk | Yep! Type Foundry | %75 |
| Universal Sans | Family Type | %75 |
| Plain | Optimo | %73 |
| SwissNow | Newglyph | %73 |
| Muoto | 205TF | %72 |
| Aktiv Grotesk | Dalton Maag | %72 |
| Akkurat | Lineto | %71 |
| Basier | atipo foundry | %71 |
| CoFo Sans | Contrast Foundry | %70 |
| Unifora | Yep! Type Foundry | %70 |
text-box-trim artık Firefox’ta da çalışıyor
Ortalanmamış bir fontu sevdiyseniz CSS’in text-box-trim ve text-box-edge özellikleri fontun kutusunu büyük harf yüksekliğine ve taban çizgisine kırpar; böylece simetrik padding yine işe yarar:
.button {
text-box: trim-both cap alphabetic;
}Yep! Type Foundry’nin rehberi 2026 ortası itibarıyla Firefox’un bu özelliği desteklemediğini ve küresel kullanımın yaklaşık %79 olduğunu yazıyor. Bu bilgi artık güncel değil: caniuse ve MDN verisine göre Firefox 154’ten itibaren destek var; Chrome 133 ve Safari 18.2 ile birlikte küresel kullanım %87,48’e çıktı. web-features verisinde text-box-trim özelliği 18 Ağustos 2026’dan beri “Baseline yeni erişilebilir” olarak işaretli.
Yine de text-box-trim sorunun yalnızca yarısını çözer: fontun kutusunu düzeltir ama x-height’ını değiştiremez. Desteklemeyen tarayıcılarda da etiket eski hâline döner. Bu yüzden yeni bir tasarım sisteminde iki ölçüyü zaten tutturan bir fontla başlamak hâlâ en az bakım isteyen yol.
Türkçe arayüz için ek kontrol: ğ, ş, ı ve İ
Ölçtüğümüz 14 fontun tamamı Türkçeye özgü 12 karakteri (ğ Ğ ş Ş ı İ ç Ç ö Ö ü Ü) içeriyor; Google Fonts’tan tam dosya olarak indirildiğinde eksik glif yok. Ticari bir font seçerken ise lisansladığınız paketin Latin Extended karakter setini kapsadığını, satın almadan önce dökümhanenin karakter haritasından doğrulayın.
- Büyük İ testi: “İSTANBUL” ve “İletişim” gibi etiketlerde İ’nin noktası büyük harf yüksekliğinin üstüne taşar; dar satır yüksekliğinde ya da
text-box-trimile kırpılmış kutuda noktanın kesilmediğini kontrol edin. - Gerçek etiket testi: “Ayarlar”, “Gönder”, “Şifremi unuttum” gibi gerçek etiketlerle buton prototipi kurun; İngilizce “Hanglovers” testi ğ ve ş’nin kuyruklarını göstermez.
- CSS büyük harf dönüşümü:
text-transform: uppercasekullanıyorsanız sayfayalang="tr"verin; aksi hâlde “i” harfi “I” olur.
Sık sorulan sorular
Inter yerine hangi ücretsiz font kullanılabilir?
Ölçümlerimize göre Inter’e en yakın ücretsiz alternatif Geist: x-height oranı %74,6 ve büyük harf kutuda tam ortalı. Daha yumuşak bir karakter isterseniz Figtree ve Albert Sans da tam ortalı, x-height’ları %71,4.
UI fontu için ideal x-height oranı nedir?
Büyük harf yüksekliğinin yaklaşık %75’i. Inter ve San Francisco bu orandadır; %70’in altında kelime aşağıda oturuyormuş gibi görünür, %100’e yaklaştıkça büyük-küçük harf ritmi kaybolur.
Buton yazısı neden dikey olarak ortalanmıyor?
Genellikle sebep fontun dikey metrikleridir: büyük harfin üstündeki boşluk taban çizgisinin altındaki boşluktan farklıysa simetrik padding etiketi kaydırır. Cap-centered bir font seçin ya da destekleyen tarayıcılarda text-box: trim-both cap alphabetic kullanın.
text-box-trim hangi tarayıcılarda çalışıyor?
Chrome ve Edge 133, Safari 18.2 ve Firefox 154 sürümlerinden itibaren çalışıyor; caniuse’a göre küresel kullanım %87,48. Samsung Internet henüz desteklemiyor.
Inter Türkçe karakterleri destekliyor mu?
Evet. Google Fonts’tan indirilen Inter dosyası ğ, ş, ı, İ, ç, ö, ü harflerinin büyük ve küçük biçimlerini içeriyor; ölçtüğümüz diğer 13 ücretsiz alternatif de öyle.
Bir Yorum Yazın