Font Nedir, Ne Demek? Yazı Tipi, Punto ve Kullanım Örnekleri

Bir uygulamada font menüsünü açtığınızda aile, kalınlık ve boyut ayarlarını yan yana görürsünüz. Karışıklık genellikle buradan başlar: yazıyı büyütmek başka bir font seçmek değildir; kalınlaştırmak da onu farklı bir aileye dönüştürmez. Bu ayrım hem tasarım talebini anlatırken hem web sitesinde doğru dosyayı yüklerken işinize yarar.

Font, Typeface ve Punto Arasındaki Fark

Typeface, harflerin ortak tasarımını; font ise bu tasarımın kullanılabilir bir biçimini veya dijital kaynağını anlatır. Sektörde terimler bazen birbirinin yerine kullanılır. Adobe'nin font açıklaması aile ile belirli stil arasındaki ayrımı örneklerle gösterir. Dijital kullanımda “font” sözcüğünü mutlaka sabit bir boyuta bağlamak ise yanıltıcıdır.

Tüm sütunlar için tabloyu yana kaydırın. Klavyeyle tabloya odaklanıp ok tuşlarını kullanabilirsiniz.

Punto bir boyut birimidir. CSS tanımında 1 pt, 1/72 inç; 1 px ise 1/96 inçtir, dolayısıyla 12 pt = 16 CSS px olur. Bu eşitlik ekrandaki her fiziksel pikselin aynı büyüklükte olduğu anlamına gelmez. Aynı puntodaki iki yazı tipi de harf oranları nedeniyle farklı büyüklükte görünebilir. Birimlerin teknik karşılığı MDN'nin uzunluk belgesinde açıklanır.

Font seçimi, yazının düzenlenmesinin yalnızca bir bölümüdür. Satır aralığı, hizalama, satır uzunluğu ve başlıkların ilişkisi de devreye girdiğinde konu tipografi olur.

Font Türleri Nelerdir?

Fontları tek bir kesin sayıya indiren sınıflandırma yoktur. Aşağıdaki gruplar yaygın özellikleri anlatır; bazıları birbiriyle örtüşür. Örneğin slab serif, serif ailesinin bir alt yaklaşımıdır; display ise çoğunlukla büyük kullanım için tasarlanan karakterleri tarif eder.

• Serif: Harf uçlarında küçük çıkıntılar bulunur. Georgia ve Times New Roman tanıdık örneklerdir.
• Sans-serif: Bu çıkıntılar yoktur. Arial ve Verdana örnek gösterilebilir.
• Slab serif: Belirgin, blok biçimli serifler kullanır. Küçük metinde nasıl göründüğünü ayrıca denemek gerekir.
• Script: El yazısı veya kaligrafi etkisi taşır. Kısa bir davetiye başlığıyla uzun bir açıklama paragrafında aynı sonucu vermeyebilir.
• Monospace: Karakterler aynı yatay alanı kaplar. Kod ve hizalanması gereken metinlerde işe yarar.
• Display: Başlık, afiş gibi dikkat çeken kullanımlar için düşünülür. Ayrıntılı biçimleri küçük boyutta denemeden gövde metnine taşımayın.

“Serif sadece baskıda, sans-serif sadece ekranda kullanılır” diye bir kural yoktur. Okunurluk, fontun kendisi kadar boyuta, boşluklara, kontrasta ve metnin uzunluğuna bağlıdır. Farklı görsel yaklaşımları karşılaştırmak için yazı stilleri örnekleri ayrı bir başlangıç sunar.

Bir Fontu Seçmeden Önce Ne Kontrol Etmelisiniz?

Önizleme kutusundaki tek kelimeye bakarak karar vermeyin. Tasarımınızdan gerçek bir başlık, bir paragraf, bir fiyat ve bir düğme metnini aday fontla deneyin. Aynı metni normal ve kalın biçimde, telefondaki yaklaşık kullanım boyutunda inceleyin.

Türkçe Karakterleri ve Benzer Harfleri Deneyin

“İyi ki, ılık ışık, çığ, ölçü, şüphe” gibi bir deneme satırı, Türkçedeki İ, ı, Ş, ş, Ğ, ğ, Ç, ç, Ö, ö, Ü, ü karakterlerini gözden geçirmenizi sağlar. Büyük ve küçük harfleri ayrı kontrol edin. Gerekli karakter bulunmadığında uygulama yedek fonta geçebilir veya eksik karakter işareti gösterebilir; sonuç her zaman boş kutu değildir.

Ayrıca büyük I, küçük l ve 1; O ve 0 gibi benzer şekilleri karşılaştırın. Ürün kodları veya hesap numaraları gösteren bir arayüzde bu ayrım, afişteki dekoratif etkiden daha önemli olabilir. Bir fontun “Latin Extended” etiketi taşıması, kullandığınız dosyanın bütün gereken karakterleri içerdiğini tek başına kanıtlamaz.

Gerçek Boyutta Okuyun

X-height, küçük x harfinin yüksekliğidir; harflerin aynı boyutta neden farklı göründüğünü açıklamaya yardım eder. Harf içi boşluklar ve açıklıklar da küçük metindeki görünümü etkiler. Yalnız bir anatomi ölçüsünden “en okunaklı font” sonucu çıkarmayın; paragrafı kendi düzeninizde okuyun.

Başlangıçta tek bir aile ve ihtiyaç duyulan birkaç ağırlık çoğu küçük tasarımı denemeye yeter. İkinci aileyi ekleyecekseniz başlık veya vurgu gibi açık bir görevi olsun. Bu bir zorunlu sayı sınırı değildir. Marka kişiliği, farklı mecralar ve eşleştirme kararları için yazı karakteri seçimi yazısı daha ayrıntılıdır.

Kullanım Hakkını Dosyayla Birlikte Kontrol Edin

“Ücretsiz indir” etiketi, her kullanım için izin verildiği anlamına gelmez. Masaüstü tasarım, web'e gömme ve uygulama içinde dağıtım aynı lisans kapsamında olmayabilir. İndirme kaynağını, lisans dosyasını ve hangi projede kullanılacağını birlikte kaydedin.

Google Fonts'un resmî deposu, her ailenin kendi lisansını okumanızı ister. OFL kapsamındaki fontlar ticari tasarımlarda kullanılabilir; dosyayı değiştirme ve yeniden dağıtma koşulları ayrıca vardır. SIL Open Font License açıklamaları bu ayrımı belirtir. Lisanslı kullanım yalnız ücretli fontlara özgü bir kavram değildir.

Web Fontu Nasıl Kullanılır?

Bilgisayarınıza kurduğunuz font, ziyaretçinin cihazında otomatik olarak bulunmaz. Web sitesinde sistemde bulunan bir aileyi ve yedeklerini seçebilir veya izinli bir font dosyasını @font-face ile sunabilirsiniz. CSS font ayarlarında aile, kalınlık, stil ve boyut ayrı özelliklerdir.

Aşağıdaki örnek, elinizde lisanslı bir regular WOFF2 dosyası olduğunu varsayar. Dosya yolunu gerçek konumuna göre düzenlemeniz gerekir; örnek dosya bir indirme bağlantısı değildir.

@font-face {
  font-family: "SiteText";
  src: url("/fonts/site-text-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "SiteText", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Kalın ve italik biçimler için uygun dosyaları tanımlayın veya bunları destekleyen değişken font kullanın. Tarayıcının yapay olarak kalınlaştırdığı biçim, tasarımcının hazırladığı bold ile aynı olmayabilir. @font-face tanımı, hangi dosyanın hangi aile ve ağırlığa karşılık geldiğini tarayıcıya bildirir.

Variable Font Ne İşe Yarar?

Değişken font, ağırlık veya genişlik gibi desteklediği eksenlerde bir aralığı tek dosyada sunabilir. Her dosya her ekseni içermez; italik için ayrı dosya gerekebilir. Çok sayıda biçim kullanıyorsanız yararlı olabilir, yalnızca tek regular biçim gerekiyorsa daha küçük olacağı garanti değildir. Ayrıntılar MDN'nin değişken font açıklamasında yer alır.

Font Yüklemesi Sayfa Hızını Etkiler mi?

Evet. Fontun geç gelmesi metnin görünmesini geciktirebilir; yedek fonttan asıl fonta geçiş de satırları kaydırabilir. Örnekteki swap metnin yedekle görünmesini sağlar, fakat kaymayı otomatik olarak önlemez. Kullanılmayan ağırlıkları yüklememek, yedek fontun ölçülerini yakın seçmek ve yalnız gerekli dosyalara öncelik vermek gerekir. Web.dev'in font performansı belgesi, bu kararların yüklenme ve görsel kararlılık açısından birlikte değerlendirilmesini önerir.

Son kontrolü yalnız “güzel görünüyor” diyerek bitirmeyin. Font dosyası yüklenmediğinde metin okunuyor mu, Türkçe harfler değişiyor mu, düğme etiketi taşıyor mu? Bu sorular yazı tipini arayüzün kullanım deneyimiyle ilişkilendirir. Doğru font, tasarımın içinde görevini yerine getiren fonttur.