Σύμφωνα με τον Toshi Omagari, τον συγγραφέα του Arcade Game Typography, του κόσμου πρώτη πολύχρωμη ψηφιακή γραμματοσειρά δημιουργήθηκε το 1982 για ένα βιντεοπαιχνίδι που δεν κυκλοφόρησε ποτέ με το όνομα Insector. Πολύχρωμες γραμματοσειρές, που μερικές φορές ονομάζονται χρωματικός τύπος, εξακολουθούν να είναι σχετικά σπάνια στον Ιστό, παρόλο που το Μορφή γραμματοσειράς COLR έχει πλήρη υποστήριξη μεταξύ προγραμμάτων περιήγησης από το 2018 (ακόμη και στον Internet Explorer!).

Η τεχνολογία ανοίγει μια εντελώς νέα φλέβα τυπογραφικής δημιουργικότητας. Ενώ ορισμένες από τις έγχρωμες γραμματοσειρές που έχω δει ήταν θορυβώδεις, στην καλύτερη περίπτωση, οι χρωματικές γραμματοσειρές είναι διασκεδαστικές, καινοτόμες και τραβούν την προσοχή. Και με την προσθήκη νέων χαρακτηριστικών CSS — συμπεριλαμβανομένων των font-palette ιδιοκτησία και @font-palette-values κανόνας — για τον έλεγχο της χρωματικής παλέτας των γραμματοσειρών χρωμάτων και την εξέλιξη της μορφής γραμματοσειράς COLR, είναι μια εξαιρετική στιγμή να βουτήξετε και να πειραματιστείτε με το τι μπορεί να κάνει η σύγχρονη τυπογραφία ιστού.

Υποστήριξη COLR

διαρκώ έγραψε για έγχρωμες γραμματοσειρές το 2018. Τότε υπήρχαν τέσσερα διαφορετικά πρότυπα για πολύχρωμες γραμματοσειρές: OpenType-SVG, COLR, SBIX και CBDT/CBLC. Μπορείς να χρησιμοποιήσεις ChromaCheck για να δείτε ποιες μορφές γραμματοσειρών χρώματος υποστηρίζει το δικό σας πρόγραμμα περιήγησης.

Το Google Chrome έχει επισήμανε το OpenType-SVG ως "wontfix" που σημαίνει ότι αυτή η μορφή δεν θα υποστηρίζεται ποτέ από το Chrome ή το Edge. Τα SBIX και CBDT/CBLC μπορούν ως επί το πλείστον να αγνοηθούν για χρήση στον Ιστό, καθώς και τα δύο βασίζονται σε εικόνες ράστερ και γίνονται θολά σε μεγαλύτερα μεγέθη γραμματοσειράς. Το μεγάλο μέγεθος αρχείου των γραμματοσειρών που βασίζονται σε bitmap τις καθιστά επίσης κακή επιλογή για τον Ιστό.

Ουλρίκε Ράους είναι ο δημιουργός του LiebeHeide, μια έγχρωμη γραμματοσειρά bitmap που αναπαράγει ασυνήθιστα την εμφάνιση ενός στυλό. «Ο μεγαλύτερος στόχος μου ήταν πάντα να αναπαράγω χειρόγραφο κείμενο όσο πιο αυθεντικά γινόταν», μου είπε. «Για το LiebeHeide, τελικά μπόρεσα να προσομοιώσω αυτά τα χειροποίητα χαρακτηριστικά με μια γραμματοσειρά. Το μειονέκτημα? Όλες οι εικόνες PNG στο αρχείο γραμματοσειράς προστίθενται και καταλήγουν σε ένα τεράστιο μέγεθος αρχείου OTF. Αυτό μπορεί να μην είναι πρόβλημα για εφαρμογές επιτραπέζιου υπολογιστή, όπως το Adobe InDesign, αλλά για χρήση στον Ιστό, η γραμματοσειρά δεν είναι εφαρμόσιμη."

Όλα τα προγράμματα περιήγησης υποστηρίζουν γραμματοσειρές COLR (τώρα αναφέρονται γενικά ως COLRv0). Η έκδοση 98 του Chrome (και Edge), που κυκλοφόρησε τον Φεβρουάριο, πρόσθεσε υποστήριξη για το COLRv1, μια εξέλιξη της μορφής.

COLRv0 και COLRv1

Το COLRv1 είναι μέρος του Πρότυπο OpenType 1.9. Ενώ το αρχικό COLRv0 δεν είχε πολλές από τις δημιουργικές δυνατότητες του OpenType-SVG, το COLRv1 ταιριάζει με αυτές τις δυνατότητες αποφεύγοντας ορισμένα μειονεκτήματα. Το COLRv0, για παράδειγμα, μπορούσε να κάνει μόνο συμπαγή χρώματα ενώ το COLRv1 μπορεί να κάνει γραμμικό, ακτινωτό, και κωνικές κλίσεις. Η μορφή προσθέτει επίσης σύνθεση και ανάμειξη και επιτρέπει την επαναχρησιμοποίηση σχήματος για εξοικονόμηση μεγέθους αρχείου.

Ειδικός τυπογραφίας Ρόελ Νίσκινς εξηγεί: «Έλεγα ότι η μορφή OpenType-SVG ήταν η καλύτερη μορφή, καθώς πρόσφερε τη μεγαλύτερη ευελιξία — μέχρι που συνειδητοποίησα ότι αυτό είναι πολύ περίπλοκο για μια εργασία χαμηλού επιπέδου, όπως η απόδοση κειμένου. Εφαρμόζει ένα βασικό υποσύνολο του SVG σε επίπεδο απόδοσης γραμματοσειρών. Αλλά δεν λειτουργεί καλά με άλλες τεχνολογίες γραμματοσειρών (υπαινιγμοί, μεταβλητοί άξονες κ.λπ.) και είναι δύσκολο να εφαρμοστεί. Έτσι, άλλαξα πλευρά στο COLR. Το COLR βασικά επαναχρησιμοποιεί όλα όσα έχουν ήδη οι γραμματοσειρές OpenType. Προσθέτει "μόνο" layering και τη δυνατότητα αλλαγής του χρώματος κάθε στρώματος. Απλό αλλά αποτελεσματικό."

Το COLRv1 είναι πλήρως συμβατό με άξονες μεταβλητής γραμματοσειράς και υπάρχουν ήδη παραδείγματα μεταβλητών γραμματοσειρών COLR όπως Σήμα Αξίας, Χρώμα Πλακάτου και Χρώμα Rocher.

Ακολουθεί ένα εντυπωσιακό παράδειγμα από την Ulrike Rausch για το τι είναι δυνατό με τη μορφή, μια (ακυκλοφόρητη προς το παρόν) γραμματοσειρά που αναπαράγει ψηφιακά την εμφάνιση μιας επιγραφής νέον:

Akiem Helmling του τύπου χυτήριο Υποσυσκευές είναι ερωτευμένος με το COLRv1, λέγοντάς μου ότι «[τ]η μορφή COLRv1 μπορεί ενδεχομένως να έχει παρόμοιο (ή ακόμα μεγαλύτερο) αντίκτυπο στη σχεδίαση τύπων από ό,τι οι μεταβλητές γραμματοσειρές τα τελευταία χρόνια». Για τον Akiem, είναι αναμφίβολα η ανώτερη μορφή. «Όλες οι προηγούμενες μορφές χρωμάτων ήταν κακές αμυχές για την προσθήκη χρωμάτων σε γλυφές. Ενώ το OpenType-SVG θεωρείται από μερικούς ανθρώπους ως μια καλή λύση, κατά την άποψή μου, δεν είναι καθόλου. Από ρεαλιστική άποψη, το SVG είναι ένα «κλειδωμένο δωμάτιο» στην ανοιχτή δομή του OpenType. Δεν υπάρχει τρόπος να επαναχρησιμοποιήσετε ή να συνδέσετε δεδομένα ή να δημιουργήσετε μια σύνδεση μεταξύ άλλων πινάκων γραμματοσειρών και του πίνακα SVG. Και εξαιτίας αυτού, δεν μπορούμε να δημιουργήσουμε μια μεταβλητή γραμματοσειρά με μεταβλητά δεδομένα SVG."

Είναι ακόμη νωρίς για τη μορφή. Η Mozilla δεν έχει αποστείλει ακόμη το COLRv1, αλλά έχει λάβει ένα θετική θέση στη μορφή, δηλώνοντας ότι «έχει τη δυνατότητα να αντικαταστήσει τις γραμματοσειρές OpenType-SVG στη χρήση ιστού». Η Apple είναι απρόθυμη να το εφαρμόσει στο Safari.

Οι γραμματοσειρές COLRv1 θα εξακολουθούν να εμφανίζονται και να είναι ευανάγνωστες σε αυτά τα προγράμματα περιήγησης, αλλά όλα τα γράμματα θα είναι μονόχρωμα (το οποίο μπορείτε να ορίσετε με το CSS color ιδιοκτησία, ακριβώς όπως με μια κανονική γραμματοσειρά). Δεν έχουμε δει ακόμη πολλά χυτήρια τύπου να κυκλοφορούν γραμματοσειρές COLRv1 και ορισμένα δημοφιλή εργαλεία σχεδίασης όπως το Figma δεν υποστηρίζουν καν το COLRv0, αλλά ελπίζω και πιστεύω ότι θα είναι το μέλλον της έγχρωμης τυπογραφίας στον Ιστό. Στο σύντομο χρονικό διάστημα που υπάρχει το COLRv1, υπήρξαν ήδη μερικά όμορφα παραδείγματα για το τι μπορεί να κάνει η τεχνολογία, όπως π.χ. Ρεμ Κούφι και Bradley Initials.

COLR και CSS

Εάν χρησιμοποιείτε έγχρωμη γραμματοσειρά, πιθανότατα θέλετε να μπορείτε να ελέγχετε τα χρώματά της. Μέχρι τώρα, αυτό ήταν αδύνατο να γίνει με το CSS. ο font-palette Η ιδιότητα παρέχει τη δυνατότητα να παρακάμψετε τον προεπιλεγμένο συνδυασμό χρωμάτων μιας γραμματοσειράς και να εφαρμόσετε τη δική σας. Αυτή η ιδιότητα λειτουργεί σε γραμματοσειρές COLRv0 και COLRv1. (της Apple Μάιλς Μάξφιλντ εξηγεί ότι οι γραμματοσειρές SVG μπορούν opt-in στη χρήση παλετών, ενώ όλα τα χρώματα μιας γραμματοσειράς COLR είναι αυτομάτως αντικαταστάθηκε από το CSS.)

Η δημιουργία μιας αξιοπρεπούς παλέτας χρωμάτων είναι μια ωραία τέχνη. Ορισμένοι σχεδιαστές τύπων έχουν κάνει τη σκληρή δουλειά για εμάς και περιλαμβάνουν εναλλακτικές παλέτες μέσα στη γραμματοσειρά. Μπορείτε να επιλέξετε από αυτούς τους διαφορετικούς συνδυασμούς χρωμάτων χρησιμοποιώντας base-palette σε CSS.

Πώς μπορείτε να μάθετε εάν μια γραμματοσειρά προσφέρει μια εναλλακτική παλέτα; Ο ιστότοπος για τη γραμματοσειρά μπορεί να σας πει. Εάν όχι, υπάρχει ένα εύχρηστο εργαλείο που ονομάζεται Wakamai Fondue που θα απαριθμήσει όλους τους διαθέσιμους συνδυασμούς χρωμάτων (που φαίνεται στην παρακάτω εικόνα). Για αυτό το παράδειγμα, θα χρησιμοποιήσω Χρώμα Rocher, μια δωρεάν γραμματοσειρά μεταβλητού χρώματος από τον Henrique Beier με ατμόσφαιρα Flintstones. Κοιτάζοντας το Wakamai Foundue μπορούμε να δούμε ότι αυτή η γραμματοσειρά χρησιμοποιεί τέσσερα χρώματα και διαθέτει έντεκα διαφορετικές επιλογές παλέτας.

Χρησιμοποιώντας base-palette: 0 θα επιλέξει την προεπιλεγμένη χρωματική παλέτα (στην περίπτωση του Rocher, αυτή είναι οι αποχρώσεις του πορτοκαλί και του καφέ).

Χρησιμοποιώντας base-palette: 1 θα επιλέξει την πρώτη εναλλακτική παλέτα που έχει ορίσει ο δημιουργός της γραμματοσειράς και ούτω καθεξής. Στο ακόλουθο παράδειγμα κώδικα, επιλέγω μια παλέτα χρωμάτων που έχει διαφορετικές αποχρώσεις του γκρι:

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

Αφού επιλέξετε μια παλέτα με το CSS @font-palette-values κανόνα, μπορείτε να τον εφαρμόσετε χρησιμοποιώντας το font-palette ιδιοκτησία:

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

Φυσικά, μπορεί να θέλετε να δημιουργήσετε το δικό σου παλέτα για να ταιριάζει με τα χρώματα της επωνυμίας σας ή να ανταποκρίνεται στη δική σας σχεδιαστική ευαισθησία. Εάν πρόκειται να παρακάμψετε όλα τα χρώματα, τότε δεν χρειάζεται να καθορίσετε το base-palette.

Ας πάρουμε Bungee από πρωτοπόρο σχεδιαστή τύπου David Jonathan Ross ως παράδειγμα. Χρησιμοποιεί μόνο δύο χρώματα από προεπιλογή, κόκκινο και λευκό. Στο παρακάτω παράδειγμα, παρακάμπτω και τα δύο χρώματα της γραμματοσειράς, οπότε το base-palette δεν έχει σημασία και παραλείπεται:

 @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;
}

Εναλλακτικά, μπορείτε να ορίσετε το base-palette ως αφετηρία και επιλεκτικά αλλάζουν μόνο μερικά από τα χρώματα. Παρακάτω χρησιμοποιώ την γκρι χρωματική παλέτα της Rocher, αλλά παρακάμπτω ένα χρώμα με ένα πράσινο μέντας:

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

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

Κατά τον καθορισμό override-colors είναι δύσκολο να ξέρεις ποιο κομμάτι της γραμματοσειράς θα παρακαμφθεί από ποιον αριθμό — πρέπει να παίξεις και να πειραματιστείς και να πετύχεις το επιθυμητό αποτέλεσμα μέσω δοκιμής και λάθους.

Εάν το επιθυμείτε, μπορείτε ακόμη και να αλλάξετε το χρώμα των γραμματοσειρών emoji, όπως π.χ Twemoji (φαίνεται παρακάτω) ή Noto. Εδώ είναι ένα διασκεδαστική επίδειξη από έναν μηχανικό γραμματοσειρών στην Google.

Τρέχοντες περιορισμοί

Ένας λυπηρός περιορισμός, τουλάχιστον προς το παρόν είναι ότι οι προσαρμοσμένες ιδιότητες CSS δεν λειτουργούν @font-palette-values. Αυτό σημαίνει ότι τα ακόλουθα δεν είναι έγκυρα:

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

Ένας άλλος περιορισμός: κινούμενα σχέδια και μεταβάσεις από ένα font-palette σε μια άλλη, μην παρεμβάλλετε — που σημαίνει ότι μπορείτε να μεταβείτε αμέσως από τη μια παλέτα στην άλλη, αλλά δεν μπορείτε σταδιακά να κάνετε κίνηση μεταξύ τους. Το όνειρό μου για μια τρομερή γραμματοσειρά emoji με κινούμενα σχέδια είναι δυστυχώς απραγματοποίητο.

Υποστήριξη του προγράμματος περιήγησης

font-palette και @font-palette-values έχουν υποστηριχθεί στο Safari από την έκδοση 15.4 και προσγειώθηκαν Chrome και Edge με την κυκλοφορία της έκδοσης 101.

Χρήση περιπτώσεις

Πιθανότατα μπορείτε ήδη να φανταστείτε πώς μπορείτε να χρησιμοποιήσετε έγχρωμες γραμματοσειρές στα δικά σας έργα. Ωστόσο, υπάρχουν μερικές συγκεκριμένες περιπτώσεις χρήσης που αξίζει να αναφερθούν.

COLR και γραμματοσειρές εικονιδίων

Οι γραμματοσειρές εικονιδίων ενδέχεται να μην είναι πλέον η πιο δημοφιλής μέθοδος για την εμφάνιση εικονιδίων στον Ιστό (Ο Κρις εξηγεί γιατί) αλλά εξακολουθούν να χρησιμοποιούνται ευρέως. Εάν χρησιμοποιείτε μια γραμματοσειρά εικονιδίων με πολλά χρώματα, όπως το Duotone από το FontAwesome ή τα εικονίδια δύο τόνων από Υλικό Σχεδιασμός, font-palette θα μπορούσε να προσφέρει μια ευκολότερη μέθοδο προσαρμογής.

Επίλυση του προβλήματος των emoji

Ο Nolan Lawson έγραψε πρόσφατα για το προβλήματα με τη χρήση emoji στον ιστό. ο Ιστολόγιο προγραμματιστή Chrome εξηγεί μια μάλλον περίπλοκη τρέχουσα λύση:

Εάν υποστηρίζετε περιεχόμενο που δημιουργείται από χρήστες, οι χρήστες σας πιθανότατα χρησιμοποιούν emoji. Σήμερα είναι πολύ συνηθισμένο να σαρώνετε κείμενο και να αντικαθιστάτε οποιοδήποτε emoji συναντάτε με εικόνες για να διασφαλίσετε συνεπή απόδοση μεταξύ πλατφορμών και τη δυνατότητα υποστήριξης νεότερων emoji από αυτά που υποστηρίζει το λειτουργικό σύστημα. Στη συνέχεια, αυτές οι εικόνες πρέπει να επανέλθουν σε κείμενο κατά τη διάρκεια λειτουργιών του προχείρου.

Εάν λάβει μεγαλύτερη υποστήριξη προγράμματος περιήγησης, οι γραμματοσειρές emoji COLRv1 θα προσφέρουν μια πολύ απλούστερη προσέγγιση. Το COLRv1 έχει επίσης το πλεονέκτημα της πεντακάθαρης εμφάνισης σε οποιοδήποτε μέγεθος, ενώ τα εγγενή emoji του προγράμματος περιήγησης γίνονται θολά και εικονοστοιχεία σε μεγαλύτερα μεγέθη γραμματοσειράς.

Ολοκληρώνοντας

Πριν από τις έγχρωμες γραμματοσειρές, η τυπογραφική δημιουργικότητα στον Ιστό περιοριζόταν στην εφαρμογή πινελιών ή γεμισμάτων διαβάθμισης με CSS. Θα μπορούσατε πάντα να κάνετε κάτι πιο προσαρμοσμένο με μια διανυσματική εικόνα, αλλά αυτό δεν είναι πραγματικό κείμενο — δεν μπορεί να επιλεγεί από τον χρήστη και να αντιγραφεί στο πρόχειρο, δεν μπορεί να αναζητηθεί στη σελίδα με εντολή+F, δεν διαβάζεται από προγράμματα ανάγνωσης οθόνης ή μηχανές αναζήτησης και θα χρειαστεί να ανοίξετε το Adobe Illustrator απλώς για να επεξεργαστείτε το αντίγραφο.

Οι έγχρωμες γραμματοσειρές έχουν τη δυνατότητα να τραβήξουν πραγματικά την προσοχή του χρήστη, καθιστώντας τις ιδανικές για σελίδες προορισμού και banner. Μπορεί να μην είναι κάτι που επιθυμείτε συχνά, αλλά υπόσχονται νέες εκφραστικές και δημιουργικές δυνατότητες για το σχεδιασμό ιστοσελίδων που μπορούν να κάνουν τον ιστότοπό σας να ξεχωρίζει.