İçeriğe Geç
Journal
TipografiTasarımWeb Performansı

Logomuzun Harfleri Font Değil, Çizim — Ve Bunu Fark Etmemiz Aylar Aldı

Logomuzun harfleri, siteye hiç yüklenmeyen bir fontu istiyordu. Her ziyaretçi logoyu kendi bilgisayarındaki yedek fontla görüyordu. Harfleri fonttan çıkarıp çizime çevirdik: ek yük 0 KB, ilk kare doğru.

E
EHNUH Ekibi
·27 Ekim 2026
Logomuzun Harfleri Font Değil, Çizim — Ve Bunu Fark Etmemiz Aylar Aldı

Kimse fark etmedi, çünkü bozuk görünmüyordu

Logomuzdaki ad bir SVG'nin içinde metin olarak yazılıydı ve DM Sans fontunu istiyordu. Kodda her şey doğru görünüyordu: font adı yazılı, punto hesaplanmış, harflerin yeri ölçülmüş.

Eksik olan tek şey fontun kendisiydi. 24 Mayıs'taki bir site güncellemesinde DM Sans yüklenen fontların listesinden çıktı; logo ise onu istemeye devam etti. Tarayıcı istenen fontu bulamayınca hata vermez, sessizce yedeğe geçer. Logo Windows'ta Arial'le, macOS'ta Helvetica'yla, Android'de Roboto'yla çiziliyordu.

Hiçbiri bozuk görünmüyor. Bu yüzden 30 Ağustos'a kadar, üç aydan fazla, kimse fark etmedi; biz de dâhil.

Neden önemli: harflerin yeri DM Sans'a göre hesaplanmıştı

Logoyu ortalarken harflerin kutusunu değil, mürekkebin kendisini ölçüyoruz: her harfin sol kenarı, genişliği, yüksekliği. Bu ölçüler DM Sans'tan alınmıştı. Harfleri başka bir font çizince hesap tutmuyordu:

  • Logonun merkezi 1,5 birim kayıyordu.
  • O dönem harfleri çevreleyen yayla aralarındaki boşluk %10 daralıyordu.

Gözle "bir şey taşmış gibi" duruyordu ama nedeni bulunamıyordu. Kapaktaki iki panelde harflerin yeri aynı, değişen tek şey çizim yöntemi. Soldaki, ziyaretçinin gerçekten gördüğü hâl.

İki çözüm vardı

Fontu yüklemek. Yaklaşık 13 KB ek yük. Daha kötüsü, font inene kadar logo bir an Arial görünür, sonra yerinden oynar. Markanın ilk karesi kendi kendini düzeltmiş olur.

Harfleri çizime çevirmek. Logoda zaten beş harf var. Her harfin şeklini fonttan bir kez okuyup SVG yolu olarak kaydedersek tarayıcının fonta ihtiyacı kalmaz. Ek yük 0 KB, ilk kare doğru.

İkincisini seçtik.

Nasıl yaptık

Küçük bir betik fontu Google Fonts'tan indiriyor, logodaki harflerin şekillerini okuyup koda yol olarak yazıyor. Tek komutla yeniden üretilebiliyor.

Bir ayrıntı bizi şaşırttı: Google Fonts modern tarayıcılara fontu woff2 biçiminde veriyor ve kullandığımız okuyucu bu biçimi açamıyor. Betik bu yüzden kendini eski bir Android tarayıcısı gibi tanıtıp ham ttf dosyasını istiyor.

Eskiden elle ölçtüğümüz harf ölçüleri tablosu da gitti; aynı değerler artık fontun kendi tablolarından geliyor. İki kaynağı karşılaştırdık, en büyük fark binde iki em çıktı.

Çizimin riski: sessiz yalan

Font kullanınca ad değişirse logo da değişir. Çizimde öyle değil: ad değişse bile logo eski adı çizmeye devam eder ve hiçbir şey hata vermez. Daha sinsisi, yolu olmayan bir harf de hata vermez; sadece çizilmez.

Bu yüzden yanına bir nöbetçi test koyduk. Çizimlerin hangi ad için üretildiğini markanın güncel adıyla karşılaştırıyor; uyuşmazsa ya da bir harfin yolu eksikse kırmızıya dönüyor. Testin gerçekten bir şey ölçtüğünden emin olmak için önce bilerek kırdık: markanın adını değiştirdik, üç test kırmızıya döndü. Kırılınca çözüm testi gevşetmek değil, betiği yeniden çalıştırmak.

Sonuç: ölçtük

27 Ekim 2026'da canlı siteden ölçülen değerler:

HedefÖlçülen
Mürekkep merkezi140140,000
Yay payı1919,00
Logodaki metin düğümü00
Sayfada DM Sans isteği00
Ek font yükü—0 KB

Ders

Tarayıcı istediğiniz fontu bulamazsa size söylemez. Kodda doğru yazılmış bir şey, ekranda doğru çizildiği anlamına gelmez. Ekranda ne çizildiğini ölçmedikçe neyi gösterdiğinizi bilemezsiniz.

Markamızın ilk karesi artık her cihazda aynı. Kendi ürününüzde benzer sessiz hataları birlikte aramak isterseniz bize ulaşın.