El Yazısı Fontu Yapım Süreci

 (kokorobot.ca)
3 puan yazan GN⁺ 2023-11-28 | 1 yorum | WhatsApp'ta paylaş
  • Çizgi roman hakum’daki el yazısı metnin boyutu ve okunabilirliği sayfadan sayfaya dalgalanınca, mevcut bir font yerine kendi el yazısını TTF fonta dönüştürmeye karar verdi
  • Kalem tabletle yazılmış dijital el yazısından ziyade, kâğıda yazılıp taranan ikinci deneme daha doğal ve organik göründü
  • Üretim kapsamı A-Z, a-z, 0-9 rakamları ve temel noktalama işaretleriyle sınırlandı; kalın, italik ve ligatür gibi genişletilmiş özellikler hedef dışında bırakıldı
  • Akış, taranmış görüntüleri Gimp ile temizleyip PNG olarak ayırdıktan sonra FontForge içinde glif konturları, sağ-sol boşluklar ve kerning ayarlamaları yapma şeklinde ilerledi
  • Autotrace ve dışa aktarma sürecinde missing points at extrema, self intersecting gibi doğrulama sorunları çıkabildiği için el yazısı fontları ciddi miktarda son işleme gerektiriyor

El yazısını neden fonta dönüştürdü

  • Çizgi roman hakum içindeki metinler daha önce kalem tabletle doğrudan dijital olarak yazılıyordu
  • Sonuç fena değildi, ancak aynı sayfa içinde bile harf boyutları sık sık büyüyüp küçüldüğü için okunabilirlik zaman zaman bozuluyordu
  • Hazır bir font kullanmak istemediği için, kendi el yazısını temel alan bir font yapmaya karar verdi
  • Hedef, web yayını için bir TTF fonttu ve yalnızca sınırlı bir karakter kümesi içeriyordu
    • Kalın ve italik sürümler yapılmadı
    • Font üretimi ve FontForge kullanımı ilk deneyimdi; daha iyi yöntemler olabilir

İki deneme ve temel tipografi terimleri

  • İlk font, kalem tabletle yazılmış dijital el yazısını temel alıyordu
  • İkinci font, kâğıda yazılmış yazının taranmış görüntülerinden üretildi; kâğıt üzerindeki yazı daha az kusursuz olduğu için daha organik ve doğal göründü
  • Fontu yaparken yazı tipi yapısına ait terimler de öğrenildi; bu parçaların işlevini bilmek daha iyi tasarım kararları vermeye ve daha işlevsel fontlar üretmeye yardımcı oluyor
    • Ascender: Küçük harflerde x-height’in üstüne çıkan bölüm
    • Baseline: Harflerin çoğunun oturduğu ve descender’ın aşağı sarktığı temel çizgi
    • Cap Height: Büyük harflerin çoğunun yüksekliğini gösteren çizgi
    • Descender: p, q gibi harflerde baseline’ın altına inen bölüm
    • X-Height: Küçük harflerde baseline ile mean line arasındaki mesafe

Taranmış görüntüler ve Gimp ile temizlik

  • Üretim hedefi büyük harf A-Z, küçük harf a-z, 0-9 rakamları ve virgül, ünlem, soru işareti gibi temel noktalama işaretleriydi
  • Başta, eskiz defterine baseline, cap height, x-height ve descender kılavuz çizgileri kurşun kalemle çizilip harfler bunların arasına yazıldı
  • Ancak kılavuz çizgileri arasına yazmak harfleri fazla katı hale getirdiği için, sonrasında "The quick brown dog jumps over the lazy fox" cümlesi büyük ve küçük harflerle birkaç kez yazıldı
    • Bu cümle, a-z için gereken tüm harfleri içeriyor
    • Cümle halinde yazarken harflerin tek tek biçimine aşırı odaklanılmadığı için daha iyi sonuçlar alındı
    • Izgara üzerinde çizerken ise daha çok kısıtlar düşünülüyordu
  • En iyi yazılmış cümle seçilip font üretiminde kullanıldı; bazı karakterlerde ızgara üzerinde yazılmış harflerden de yararlanıldı
  • Bu yöntem nedeniyle, daha sonra her karakterin cap-height, x-height ve descender hizalarının dijital olarak düzeltilmesi gerekti
  • Taranmış harf görüntülerine Gimp içinde Color > Threshold uygulanarak gri tonlar temizlendi
  • Kurşun kalem ve kâğıdın doğası ile ızgara kullanılmamış olması nedeniyle, Gimp’in kalem aracıyla harf kusurları düzeltildi
    • Tool Options içinde dynamics’in tamamı kapatılarak temiz çizgiler elde edildi
  • Temizlenen harfler yeni bir Gimp belgesine kopyalanıp toplandı; belge boyutu, en büyük ve en geniş harf olan büyük M’i sığdıracak şekilde ayarlandı
  • Bu aşamada çizgi kalınlığının aşırı değişmediği de kontrol edildi
  • Tüm harfler proje klasörüne ayrı PNG dosyaları olarak dışa aktarıldı

FontForge içinde glif oluşturma

  • FontForge, Linux’ta çalıştığı ve çevredeki kişiler tarafından önerildiği için seçildi; kullanım deneyimi olumluydu
  • Yeni bir proje oluşturulduğunda Font View Window açılır ve fonttaki tüm glif yuvaları tablo halinde gösterilir
  • Element > Font Info içinden font bilgileri girilir ve PS Names altında font adı eklenir
  • TTF olarak dışa aktarmak için aynı pencerenin General bölümünde Em size 1024 olarak değiştirilir
    • TrueType fontlarda UPM için geleneksel olarak 1024 veya 2048 gibi 2’nin kuvvetleri kullanılır
    • OTF fontlarda gereksinimler farklıdır
    • Geçmişte metal dizgide her harf, tutarlı bir yüksekliği korumak için kendine ait bir alan kapsayıcısına yerleştirilirdi; bu harf bloğunun yüksekliğine “em” denirdi
  • Font View içindeki bir glife çift tıklandığında Character View açılır
    • Glif burada çizilir veya düzenlenir
    • Sekmeli arayüzle tek tek görüntülenebilir ya da hazırlanmış bir metin dosyası üzerinden kelimeler yan yana kontrol edilebilir
  • Sol alt köşedeki katman listesinden Back katmanı seçildikten sonra File > Import ile ilgili harfin PNG’si içe aktarılır
  • Sonrasında glif konturu iki yöntemden biriyle oluşturulur
    • Konturu elle çizmek
    • Fore katmanını seçip Select > Autotrace ile otomatik kontur üretmek
  • Autotrace, arka plan görüntüsünü referans alarak kontrol noktaları ve Bézier eğrileri içeren bir kontur üretir; ancak fazla nokta ya da extrema eksikliği sorunları oluşturabilir
  • Kapalı bir şekil oluştuğunda, ilgili glif diğer pencerelerde de görünmeye başlar

Sağ-sol boşluklar ve önizleme

  • Her glif için sol ve sağ side bearing ayarlanarak nihai glif genişliği belirlenir
  • Tüm glifleri otomatik olarak ortalamak için Metrics > Auto Width kullanılabilir
  • Tüm glifleri mevcut genişliklerinin içinde ortalamak için Metrics > Center In Width kullanılabilir
  • Konturları düzeltirken referans katmanını kapatmak yardımcı olabilir
  • Bir glifi baştan başlatmak için Font Window’da ilgili glif seçilip Edit > Clear kullanılır
  • Yalnızca referans katmanını silmek için Edit > Clear Background kullanılır
  • Character View içindeki çalışma tuvalinin üzerindeki metin alanına, mevcut harften sonra kelime ya da rastgele karakterler girilerek harflerin yan yana nasıl göründüğü önizlenebilir
  • Bu süreç tüm glifler için tekrarlanmalıdır; özellikle Space glifinin side bearing değerleri ayarlanmazsa kelimeler arasındaki boşluk fazla büyür

Kerning ayarlama

  • Kerning, harfler arası boşluğu daha okunaklı görünecek şekilde ayarlama işlemidir
  • Font Window’da Element > Font Info yoluyla Lookups bölümünün GPOS sekmesine gidilir ve Add Lookup seçilir
  • Type açılır menüsünden Pair Position (Kerning) seçilir
  • Feature sütununda New yanındaki oka tıklanıp Kern Horizontal Kerning seçilir ve onaylanır
  • Yeni oluşturulan GPOS girdisi seçildikten sonra Add Subtable tıklanır ve varsayılan ad korunarak onay verilir
  • Kerning uygulanacak harfler her iki tabloda da sürüklenerek seçilir
    • Hem büyük hem küçük harfler seçilmelidir
    • Tek tabloda iki kümenin tamamını seçmek için Shift kullanılır
  • pairings’e tıklandığında glif çiftinin büyütülmüş görünümü pencerenin alt kısmında gösterilir
  • İkinci glif sürüklenerek birinci glife yaklaştırılır ya da uzaklaştırılır ve tüm glif kombinasyonlarının iyi görünmesi sağlanır

Test ve dışa aktarma doğrulaması

  • Fontu ve kerning’i FontForge içinde test etmek için File > Print kullanılabilir
  • Varsayılan metin tüm olası kombinasyonları göstermediği için, istenirse özel metin eklenebilir
  • kern_pairings.txt, tüm kerning kombinasyonlarını içerir ve test ekranına yapıştırılarak kullanılabilir

  • Dışa aktarma sırasında karşılaşılabilecek sorunlar

    • File > Generate Fonts ile dışa aktarırken FontForge bazı karakterleri inceleme gerektiren öğeler olarak işaretleyebilir
    • Non-integral coordinates, glif konturundaki bir ya da daha fazla noktanın 2.25 gibi ondalıklı koordinatlara sahip olması durumudur
    • Sorunlu glif seçilip Element > Validation > Find Problems içinde "non-integral coordinates" işaretlenerek fix işlemi tekrar tekrar uygulanır
    • İnceliğe çok bağlı olmayan el yazısı fontlarında, noktaları en yakın tam sayı koordinatlara taşımak büyük bir fark yaratmayabilir
    • Missing points at extrema, eğri kontrol noktalarının eğriyi sınır noktalarının dışına itmesi durumudur
    • Eğrinin en yüksek ya da en uç noktalarının sarı nokta olması için kontrol noktaları ayarlanmalıdır
    • Element > Add Extrema yardımcı olabilir, ancak glifi bozabilir veya daha fazla non-integral coordinates sorunu yaratabilir
    • Bu hata günlükte yer alsa bile font üretimi mümkün olabilir, fakat fontta hafif ama can sıkıcı bozulmalar oluşabilir
    • El yazısı fontu dağınıksa veya Autotrace kullanıldıysa extrema sorunları ortaya çıkabilir
    • Self intersecting, glif konturunun kendi üstünden geçmesi durumudur
    • Tüm çizgiler kontrol edilerek kesişmeler giderilmelidir

TTF seçimi ve kurulum

  • Kullanım amacı için TTF (TrueType Font) yeterliydi
  • Çok sayıda glif depolanmayacağı, kalın ve italik biçimlerin ayrı stiller olarak eklenmeyeceği ve ligatür gerekmediği için OTF gereksizdi
  • Fontun kullanılacağı içerik web’de yayınlanacağı için, TTF bu amaca uygundu
  • Font View içindeki tüm gliflerle font üretmek için File > Generate Fonts kullanılır
  • Font adının altındaki açılır menüden çıktı biçimi olarak TTF seçilip onaylandığında font proje klasörüne kaydedilir
  • Üretilen font, sistemin font dizinine taşınarak kurulabilir
  • Referanslar ve kullanım örnekleri

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-28
Hacker News yorumları

  • FontForge genel bakışı iyiydi; ben de eskiden biraz kurcalamıştım
    Biraz kaba saba ama ticari rakiplerinin gerçekten çok daha iyi olup olmadığından da emin değilim. Adlarını bile bildiğim yok aslında
    Ayrıca web sitesi çok hoş. Benzersiz ve karakteri belirgin

    • FontForge açık kaynaklı, çapraz platformlu ve özellik açısından epey zengin; bu yüzden değerli bir araç. Ama kendi deneyimime göre ticari rakipleri pratikte gerçekten çok daha iyi
      macOS’unuz varsa deneme süresi yeterince uzun olan Glyphs(/Mini) ya da RoboFont’a kendiniz bakabilirsiniz. Yine de beni en çok heyecanlandıranlar, fontra.xyz gibi web tabanlı araçları da içeren yeni nesil araçlar
    • MFEK’in de daha olgun bir hâle gelip gelmediğini izlemeye değer
      Şimdiye kadar MFEK ile ilgili gördüğüm çalışmaların hepsi epey havalı görünüyordu
      https://mfek.org/
    • FontForge konusu açılmışken, yazı tipi tasarlarken birkaç paragraf metinle önizleme yapmanın yolunu bilen var mı merak ediyorum
      Tek bir “quick brown fox” cümlesi çoğu zaman yetmiyor

  • 100r.co da kesinlikle bakmaya değer
    Devine ve Rekka, yelkenli Pino’da stüdyolarını işletirken yaşamlarını, yolculuklarını ve projelerini belgeliyor

  • FontForge özeti güzel
    Yazıda ima edildiği gibi el yazınızdan yazı tipi yapmak için daha kolay ve otomatik seçenekler de var. Sonrasında ortaya çıkan yazı tipini tekrar rötuşlayabilirsiniz
    https://www.calligraphr.com/en/ eski adı MyScriptFont’tu

  • Yapılan yazı tipi benim yaptığıma epey benziyor
    https://imgur.com/a/g8bIoUY
    Kerning gibi optimizasyonlara derinlemesine girmedim ama denediğim 3-4 yazılımın hepsi ya inanılmaz sinir bozucuydu ya bozuktu ya da kullanması zordu. Sorun benim kullanımımda da olabilir; ücretli yazılımlar muhtemelen çok daha iyidir. Sonuna kadar götürmesi etkileyici

  • Birden fazla yazı tipini tek bir yazı tipinde birleştirmenin en basit yolunu merak ediyorum
    VS Code, dile ya da token’a göre yazı tipi ayarını desteklemiyor. Örneğin yorumlarda Comic Sans, geri kalanında başka bir yazı tipi kullanmak mümkün değil; ama italik/kalın gibi ayarlar mümkün

  • 80’lerde Desktop Publishing popülerleşip yazı tipleri yaygın kullanılmaya başladığından beri yazı tiplerini seviyorum
    Bir süre aşırı kullanıldıkları da söylenebilir ama tasarımın önemli olduğunu bana ilk hissettiren şeylerden biriydi. Her hâlükârda harika bir yazı tipi ve genel bakış da mükemmel

  • MetaFont/MetaPost ile gerçekten yazı tipi yapan birileri var mı merak ediyorum
    FontForge’da betikleme özelliği olup olmadığını da bilmiyorum. Hiç kullanmadım, sadece okudum; ama Knuth’un “Computers and Typesetting” serisinin 5 cildini de okudum

  • Yazı tipi üretimi yapan bir yapay zeka sarmalayıcı startup zaten var mı merak ediyorum
    Prompt’lar ilginç olabilir. Örneğin “Balkan etkisi güçlü ama Sovyet brütalizmi de karışmış, çocuklara yakın gelen bir Noel yazı tipi tasarla” gibi
    Ticari olarak da egzotik yazı tipleri kullanmanın kültürel olarak daha doğal hâle gelmesi gerekiyor. Helvetica, Roboto, Noto Sans ve daha modern yazı tiplerinin neden kullanıldığını anlıyorum ama dünya açıkçası biraz fazla tekdüzeleşti

  • Blog yazısının kendisinde kendi yazı tipini kullanmaması kaçırılmış bir fırsattı

  • “Köpeğin tilkinin üzerinden atladığı” değil, tilkinin köpeğin üzerinden atladığı cümle olmalı ;-)
    Çünkü köpek tembeldir, tilki ise hızlıdır