Arcade Game Typography kitabının yazarı Toshi Omagari'ye göre dünyanın ilk çok renkli dijital yazı tipi 1982 yılında Insector adlı hiç yayınlanmayan bir video oyunu için yaratıldı. Bazen çok renkli yazı tipleri olarak da adlandırılır kromatik tip, web'de hala nispeten nadirdir, ancak COLR yazı tipi formatı 2018'den beri tam tarayıcılar arası desteğe sahiptir (Internet Explorer'da bile!).

Teknoloji tipografik yaratıcılıkta tamamen yeni bir damar açıyor. Gördüğüm bazı renkli yazı tipleri korkunç olsa da, en iyi ihtimalle kromatik yazı tipleri eğlenceli, yenilikçi ve dikkat çekicidir. Hem yeni CSS özelliklerinin eklenmesiyle birlikte, font-palette mülkiyet ve @font-palette-values kural — renkli yazı tiplerinin renk paletini ve COLR yazı tipi formatının gelişimini kontrol etmek için, modern web tipografisinin neler yapabileceğini denemek ve denemek için harika bir zaman.

COLR desteği

sonuncuyum renkli yazı tipleri hakkında yazdı 2018 yılında. O zamanlar dört farklı standart çok renkli yazı tipleri için: OpenType-SVG, COLR, SBIX ve CBDT/CBLC. Kullanabilirsiniz ChromaCheck kendi tarayıcınızın hangi renk yazı tipi formatlarını desteklediğini görmek için.

Google Chrome’da OpenType-SVG'yi "düzeltmeyecek" olarak işaretledi bu formatın hiçbir zaman Chrome veya Edge tarafından desteklenmeyeceği anlamına gelir. SBIX ve CBDT/CBLC, her ikisi de taramalı görüntülere dayalı olduğundan ve daha büyük yazı tipi boyutlarında bulanık hale geldiğinden, web'de kullanım için çoğunlukla göz ardı edilebilir. Bitmap tabanlı yazı tiplerinin büyük dosya boyutu da onları web için kötü bir seçim haline getiriyor.

Ulrike Rausch yaratıcısı LiebeHeide, tükenmez kalemin görünümünü esrarengiz bir şekilde kopyalayan bir bitmap renkli yazı tipi. Bana "En büyük hedefim her zaman el yazısıyla yazılmış metni mümkün olduğunca orijinal bir şekilde yeniden üretmekti" dedi. "LiebeHeide için nihayet bu el yapımı özellikleri bir yazı tipiyle simüle edebildim. Dezavantajı mı? Yazı tipi dosyasındaki tüm PNG görüntüleri toplanır ve çok büyük bir OTF dosya boyutuyla sonuçlanır. Bu, Adobe InDesign gibi masaüstü uygulamaları için bir sorun olmayabilir ancak yazı tipinin web'de kullanılması pek mümkün değildir."

Tüm tarayıcılar COLR yazı tiplerini destekler (artık genel olarak COLRv0 olarak anılmaktadır). Şubat ayında piyasaya sürülen Chrome (ve Edge) 98 sürümü, formatın bir evrimi olan COLRv1 için destek ekledi.

COLRv0 ve COLRv1

COLRv1 şunların bir parçasıdır: OpenType 1.9 standardı. Başlangıçtaki COLRv0, OpenType-SVG'nin birçok yaratıcı olanağından yoksun olsa da, COLRv1 belirli dezavantajlardan kaçınarak bu olasılıkları karşılıyor. Örneğin COLRv0 yalnızca düz renkler yapabilirken COLRv1 bunu yapabilir doğrusal, radyal, ve konik gradyanlar. Format ayrıca şunu da ekler: kompozisyon ve harmanlama ve dosya boyutundan tasarruf etmek için şeklin yeniden kullanılmasına olanak tanır.

Tipografi uzmanı Roel Nieskins şöyle açıklıyor: "OpenType-SVG formatının en çok yönlülüğü sunduğu için en iyi format olduğunu söylerdim; ta ki bunun metin işleme gibi düşük seviyeli bir iş için fazla karmaşık olduğunu fark edene kadar. Yazı tipi oluşturma düzeyinde temel bir SVG alt kümesini uygular. Ancak diğer yazı tipi teknolojileriyle (ipucu, değişken eksenler vb.) iyi çalışmıyor ve uygulanması zahmetli. Bu yüzden tarafları COLR'a değiştirdim. COLR temel olarak OpenType yazı tiplerinin zaten sahip olduğu her şeyi yeniden kullanır. 'Yalnızca' katmanlama ve her katmanın rengini değiştirme olanağı ekler. Basit ama etkili."

COLRv1, değişken yazı tipi eksenleriyle tamamen uyumludur ve halihazırda aşağıdaki gibi değişken COLR yazı tipi örnekleri mevcuttur: Liyakat Rozeti, Plakato Rengi ve Rocher Rengi.

İşte Ulrike Rausch'tan, bir neon tabelanın görünümünü dijital olarak yeniden yaratan (şu anda yayınlanmamış) bir yazı tipi olan formatla nelerin mümkün olduğuna dair çarpıcı bir örnek:

Tip dökümhanesinden Akiem Helmling iç giyim COLRv1'e aşık ve bana şunu söylüyor: "COLRv1 formatı, yazı tasarımı üzerinde son yıllarda değişken yazı tiplerinin sahip olduğu potansiyele benzer (veya hatta daha büyük) bir etkiye sahip olabilir." Akiem için şüphesiz üstün bir format. “Tüm eski renk formatları, gliflere renk eklemek için yapılan kötü hilelerdi. OpenType-SVG bazı kişiler tarafından iyi bir çözüm olarak görülse de benim açımdan hiç de öyle değil. Pragmatik açıdan bakıldığında SVG, OpenType'ın açık yapısı içinde 'kilitli bir odadır'. Verileri yeniden kullanmanın veya bağlamanın ya da diğer yazı tipi tabloları ile SVG tablosu arasında bağlantı oluşturmanın bir yolu yoktur. Bu nedenle değişken SVG verileriyle değişken bir yazı tipi yapamıyoruz.”

Format için henüz erken. Mozilla henüz COLRv1'i göndermedi ancak bir olumlu konum formatta "web kullanımında OpenType-SVG yazı tiplerinin yerini alma potansiyeline" sahip olduğu belirtildi. Apple bunu Safari'de uygulama konusunda isteksiz.

COLRv1 yazı tipleri bu tarayıcılarda görünmeye ve okunmaya devam edecek ancak tüm harfler tek bir düz renk olacak (bunu CSS ile ayarlayabilirsiniz) color özelliği, tıpkı normal bir yazı tipinde olduğu gibi). Henüz pek çok yazı tipi dökümhanesinin COLRv1 yazı tiplerini yayınladığını görmedik ve Figma gibi bazı popüler tasarım araçları COLRv0'u bile desteklemiyor, ancak ben umutluyum ve bunun web'deki renkli tipografinin geleceği olacağına inanıyorum. COLRv1'in ortaya çıktığı kısa süre içinde teknolojinin neler yapabileceğine dair bazı güzel örnekler zaten mevcuttu; Reem Kufi ve Bradley'nin baş harfleri.

COLR ve CSS

Renkli bir yazı tipi kullanıyorsanız muhtemelen renklerini kontrol edebilmek istersiniz. Şimdiye kadar bunu CSS ile yapmak imkansızdı. font-palette özelliği, bir yazı tipinin varsayılan renk düzenini geçersiz kılma ve kendi renk düzeninizi uygulama gücü sağlar. Bu özellik COLRv0 ve COLRv1 yazı tiplerinde çalışır. (Elmalar Myles Maxfield SVG yazı tiplerinin opt-in paletleri kullanmak için kullanılırken, COLR yazı tipinin tüm renkleri otomatik olarak CSS tarafından geçersiz kılındı.)

İyi bir renk paleti bulmak güzel bir sanattır. Bazı yazı tipi tasarımcıları bizim için bu zor işi yaptılar ve yazı tipinin içine alternatif paletler eklediler. kullanarak bu farklı renk şemaları arasından seçim yapabilirsiniz. base-palette CSS'de.

Bir yazı tipinin alternatif bir palet sunup sunmadığını nasıl anlarsınız? Yazı tipinin sitesi size söyleyebilir. Değilse, adında kullanışlı bir araç var. Wakamai Fondü bu, mevcut tüm renk şemalarını listeleyecektir (aşağıdaki resimde gösterilmektedir). Bu örnek için kullanacağım Rocher Rengi, Henrique Beier'den Çakmaktaş havasına sahip ücretsiz değişken renkli bir yazı tipi. Wakamai Foundue'ya baktığımızda bu yazı tipinin dört renk kullandığını ve on bir farklı palet seçeneğiyle geldiğini görebiliriz.

kullanma base-palette: 0 varsayılan renk paletini seçecektir (Rocher durumunda bu, turuncu ve kahverenginin tonlarıdır).

kullanma base-palette: 1 yazı tipinin yaratıcısı tarafından tanımlanan ilk alternatif paleti seçecektir ve bu şekilde devam edecektir. Aşağıdaki kod örneğinde grinin farklı tonlarından oluşan bir renk paleti seçiyorum:

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

CSS ile bir palet seçtikten sonra @font-palette-values kuralını kullanarak uygulayabilirsiniz. font-palette özelliği:

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

Tabii ki, oluşturmak isteyebilirsiniz kendi Markanızın renklerine uyacak veya kendi tasarım duyarlılığınızı karşılayacak palet. Tüm renkleri geçersiz kılacaksanız, o zaman belirtmenize gerek yoktur. base-palette.

Hadi alalım Bungee öncü yazı tipi tasarımcısından David Jonathan Ross Örnek olarak. Varsayılan olarak yalnızca iki renk kullanır; kırmızı ve beyaz. Aşağıdaki örnekte yazı tipinin her iki rengini de geçersiz kılıyorum; base-palette önemli değil ve atlandı:

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

Alternatif olarak, base-palette başlangıç ​​noktası olarak seçin ve renklerin yalnızca bazılarını seçerek değiştirin. Aşağıda Rocher'ın gri renk paletini kullanıyorum ancak bir rengi nane yeşili ile geçersiz kılıyorum:

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors:
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

Belirtirken override-colors Yazı tipinin hangi kısmının hangi sayı tarafından geçersiz kılınacağını bilmek zordur; deneme yanılma yoluyla denemeler yapmalı ve istenen etkiyi elde etmelisiniz.

İsterseniz emoji yazı tiplerinin rengini bile değiştirebilirsiniz. Twemoji (aşağıda gösterilmektedir) veya Noto. İşte bir eğlenceli demo Google'daki bir yazı tipi mühendisinden.

Mevcut sınırlamalar

En azından şimdilik üzücü bir sınırlama, CSS özel özelliklerinin çalışmamasıdır. @font-palette-values. Bu, aşağıdakilerin geçersiz olduğu anlamına gelir:

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

Başka bir sınırlama: animasyonlar ve birinden geçişler font-palette diğerine enterpolasyon yapmayın; bu, bir paletten diğerine anında geçiş yapabileceğiniz ancak bunlar arasında kademeli olarak animasyon yapamayacağınız anlamına gelir. Korkunç bir şekilde animasyonlu bir emoji yazı tipi hayalim ne yazık ki gerçekleşmedi.

Tarayıcı desteği

font-palette ve @font-palette-values 15.4 sürümünden beri Safari'de destekleniyor ve Krom ve Kenar 101 sürümünün piyasaya sürülmesiyle.

Kullanım durumları

Renkli yazı tiplerini kendi projelerinizde nasıl kullanabileceğinizi muhtemelen zaten hayal etmişsinizdir. Bununla birlikte, belirtilmeye değer birkaç özel kullanım durumu vardır.

COLR ve simge yazı tipleri

Simge yazı tipleri artık web'de simgeleri görüntülemek için en popüler yöntem olmayabilir (Chris nedenini açıklıyor) ancak hala yaygın olarak kullanılmaktadırlar. FontAwesome'daki Duotone veya FontAwesome'daki iki tonlu simgeler gibi birden fazla renge sahip bir simge yazı tipi kullanıyorsanız Materyal Tasarımı, font-palette özelleştirme için daha kolay bir yöntem sunabilir.

Emoji problemini çözme

Nolan Lawson yakın zamanda şunu yazdı: internette emoji kullanma sorunları. Chrome geliştirici blogu oldukça karmaşık bir güncel çözümü açıklıyor:

Kullanıcı tarafından oluşturulan içeriği destekliyorsanız kullanıcılarınız muhtemelen emoji kullanıyordur. Günümüzde platformlar arası tutarlı görüntüleme ve işletim sisteminin desteklediğinden daha yeni emojileri destekleme yeteneği sağlamak için metni taramak ve karşılaşılan herhangi bir emojiyi resimlerle değiştirmek çok yaygındır. Daha sonra bu görüntülerin pano işlemleri sırasında tekrar metne dönüştürülmesi gerekir.

Daha fazla tarayıcı desteği alırsa COLRv1 emoji yazı tipleri çok daha basit bir yaklaşım sunacak. COLRv1 ayrıca her boyutta net görünme avantajıyla birlikte gelirken, yerel tarayıcı emojileri daha büyük yazı tipi boyutlarında bulanıklaşır ve pikselleşir.

Tamamlayan

Renkli yazı tiplerinden önce, web'deki tipografik yaratıcılık CSS ile konturlar veya degrade dolgular uygulamakla sınırlıydı. Bir vektör görseliyle her zaman daha özel bir şeyler yapabilirsiniz, ancak bu gerçek metin değildir; kullanıcı tarafından seçilip panoya kopyalanamaz, sayfada arama yapılamaz. Komuta+F, ekran okuyucular veya arama motorları tarafından okunmaz ve yalnızca kopyayı düzenlemek için Adobe Illustrator'ı açmanız gerekir.

Renkli yazı tipleri, kullanıcının dikkatini gerçekten çekme potansiyeline sahiptir ve bu da onları açılış sayfaları ve banner'lar için mükemmel kılar. Sıklıkla ulaşacağınız bir şey olmayabilirler, ancak web tasarımı için sitenizi öne çıkarabilecek yeni ifade edici ve yaratıcı olanaklar vaat ediyorlar.