Η ανατομία των χιλιάδων γραμματοσειρών

Μια προσπάθεια να δημιουργηθεί μια βάση δεδομένων γραμματοσειρών με opentype.js

Ακόμη και χρόνια μετά την απελευθέρωση του Avatar, υπάρχει ένα πράγμα που ο Ryan Gosling δεν μπορεί να ξεπεράσει: την επιλογή της γραμματοσειράς της ταινίας "Papyrus". Στην παρωδία που παρήγαγε το Saturday Night Live, ο σχεδιαστής του λογότυπου ανοίγει το μενού των γραμματοσειρών, περιηγείται τις γραμματοσειρές ένα προς ένα και αποφασίζει τυχαία να πάει με τον "Papyrus".

Η φαινομενικά ανόητη επιλογή μιας γραμματοσειράς είναι ένα γενικό πρόβλημα με τα μενού γραμματοσειρών: υπάρχουν πολύ λίγες ή πάρα πολλές επιλογές.

Από τη μία πλευρά, ένας περιορισμός στις γραμματοσειρές του συστήματος, όπως φαίνεται στο βίντεο, μπορεί να οδηγήσει σε μια κακή επιλογή επειδή απλά δεν υπάρχει κάτι καλύτερο εγκατεστημένο.

Από την άλλη πλευρά, οι βιβλιοθήκες γραμματοσειρών Ιστού με εκατοντάδες ή χιλιάδες γραμματοσειρές μπορούν να είναι αρκετά συντριπτικές και να οδηγήσουν σε ένα παράδοξο επιλογής.

Δείπνο για κανένα: Η πικρή γεύση του μενού γραμματοσειράς

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

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

Το μενού των γραμματοσειρών στο

Συστηματική προσέγγιση για την εύρεση γραμματοσειρών

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

1. Ταξινόμηση

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

Αυτό οδηγεί σε εξελιγμένα συστήματα για την ταξινόμηση των γραμματοσειρών με βάση την εμφάνισή τους σε όλη την ιστορία. Οι πιο απλές ταξινομήσεις είναι χαρακτήρες serif, sans-serif, monospaced, script και display. Μπορούμε συνήθως να βρούμε αυτές τις κατηγορίες σε μορφή φίλτρων σε οποιαδήποτε ιστοσελίδα γραμματοσειράς:

Διασυνδέσεις φίλτρων ταξινόμησης. Αρχή προς τα επάνω αριστερά: Fontshop. Δεξιά: MyFonts. Κάτω αριστερά: Γραμματοσειρές Google. Κάτω: TypeKit.

Αυτά τα απλά φίλτρα θα μπορούσαν να μας δώσουν πάρα πολλές επιλογές. Τότε μπορούν να εισαχθούν πιο συγκεκριμένοι όροι όπως η μεταβατική serif, η ανθρωποκεντρική serif ή το blackletter για να διαφοροποιηθούν οι χαρακτήρες της κατηγορίας serif.

Μερικές φορές αυτές οι υποκατηγορίες είναι διαθέσιμες ως ετικέτες. Αλλά μερικές φορές απλώς δεν υπάρχουν με τέτοια λεπτομέρεια. Ίσως υπάρχουν πάρα πολλές κατηγορίες; Ίσως οι χρήστες να μην καταλάβουν όλες αυτές τις επιλογές; Ίσως δεν υπάρχουν διαθέσιμα πλήρη και συνεπή δεδομένα;

2. Καθαρισμένοι κατάλογοι

Ένας άλλος τρόπος να τεθεί η τάξη στο χάος είναι να βασιστείς στη γνώση των άλλων. Μπορούμε να τα βρούμε για παράδειγμα στο Fontshop. Εκεί μπορείτε να βρείτε συλλογές που βασίζονται σε μια δεκαετία ιστορίας, όπως το "1930", που βασίζονται σε ομοιότητες όπως "Εναλλακτικές λύσεις Helvetica" ή λίστες ειδικών εφαρμογών όπως "Branding" ή "Εφημερίδες".

Παρόμοιες λίστες μπορούν να βρεθούν στο Typekit, TypeWolf ή FontsInUse. Νομίζω ότι αυτές οι λίστες είναι μεγάλες και ενθαρρύνω όλους να αρχίσουν να δημιουργούν τις δικές τους λίστες με γραμματοσειρές που έχετε ήδη εργαστεί ή βλέπετε σε εφαρμογή. Θα εξοφλήσει στο μέλλον τις αναφορές αυτές.

3. Ανατομία

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

Ένα από αυτά τα βιβλία είναι "Η Ανατομία του Τύπου" του Stephen Coles. Λίγα χρόνια μετά τη σχολή σχεδιασμού, αυτό το βιβλίο ήταν μια ανανέωση που αποκαλύπτει λεπτομέρειες για 100 καθιερωμένες γραμματοσειρές. Ο Stephen Coles χρησιμοποιεί όρους όπως x-ύψος, πλάτος, βάρος, τερματικά σφαιρών, στυλ serif και άλλα για να περιγράψει την ποιότητα των γραμματοσειρών.

Αφού εξέτασα αυτά τα 100 γραμματοσειρά, σκέφτηκα: τι γίνεται με τα υπόλοιπα; Τι γίνεται με τις γραμματοσειρές στον υπολογιστή μου; Και αυτά στο διαδίκτυο; Ποιο είναι το ύψος, το πλάτος, το βάρος και η αντίθεση; Πώς μπορώ να μάθω;

Μέσα σε ένα αρχείο γραμματοσειράς: Έλλειψη μεταδεδομένων

Πριν ξεκινήσω την κωδικοποίηση, ήλπιζα ότι θα μπορούσα να μάθω για τις ιδιότητες μιας γραμματοσειράς με έναν εύκολο τρόπο. Θεωρητικά, κάθε αρχείο γραμματοσειρών συνοδεύεται από ποικίλους πίνακες μεταδεδομένων που περιέχουν πληροφορίες σχετικά με το όνομα, τον συγγραφέα, τη γλώσσα και τα οπτικά χαρακτηριστικά της γραμματοσειράς. Το πλάτος, το βάρος και η κατηγορία γραμματοσειράς είναι οι προφανείς. Αλλά και πληροφορίες σχετικά με το xheight, το ύψος του καπακιού, το μέσο πλάτος χαρακτήρων, τους ανερχόμενους και τους κατακόρυφους. Ένα άλλο σύνολο μεταδεδομένων που ονομάζεται Panose περιγράφει ακόμη περισσότερες ιδιότητες όπως στυλ serif, αναλογία, αντίθεση και πολλά άλλα. Χρησιμοποιώντας εφαρμογές σχεδιασμού γραμματοσειρών, όπως τα Glyphs, ο καθένας μπορεί να ελέγξει τις γραμματοσειρές για να δει αυτές τις πληροφορίες:

Ένα στιγμιότυπο οθόνης του

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

Σύγκριση πληροφοριών Panose διαθέσιμων για το Roboto και τα Fira Sans, και τα δύο διαθέσιμα στις Γραμματοσειρές Google. Ενώ το Fira Sans παρέχει πολλά, το Roboto δεν το κάνει. Αυτά τα μεταδεδομένα δεν μπορούν προφανώς να χρησιμοποιηθούν για τη σύγκριση γραμματοσειρών ...

DIY: Ανάλυση γραμματοσειρών με opentype.js

Επομένως, για να ταξινομήσω και να συγκρίνω τους ίδιους τους τύπους χαρακτήρων, έπρεπε να εξετάσω προσεκτικά τα αρχεία γραμματοσειρών και να βρω τους αυτόματους τρόπους για την εξαγωγή πληροφοριών. Οι γραμματοσειρές είναι διαθέσιμες σε διάφορες μορφές αρχείων, αλλά τελικά είναι σχεδόν πάντα διαθέσιμες ως TTF (TrueType Fonts).

Άλλες μορφές είναι το OTF (OpenType) που περιλαμβάνει πληροφορίες για πρόσθετες λειτουργίες όπως συνδέσεις ή WOFF (Web Open Font Format) που μπορούν να συμπιέσουν τη γραμματοσειρά και να αποθηκεύσουν επιπλέον μεταδεδομένα.

Αυτές τις μέρες, χάρη στο opentype.js του Frederik De Bleser, μπορούμε να επιθεωρήσουμε τα αρχεία γραμματοσειράς χρησιμοποιώντας JavaScript σε ένα πρόγραμμα περιήγησης ιστού. Το Opentype.js μας δίνει πρόσβαση σε πληροφορίες διανυσμάτων όλων των glyphs που περιλαμβάνονται σε ένα αρχείο γραμματοσειράς και παρέχει επίσης πρόσβαση σε βασικούς μετρητές και πίνακες μεταδεδομένων.

Μια βάση δεδομένων με χαρακτηριστικά

Στην επόμενη ενότητα θα περιγράψω πώς μέτρησα την αντίθεση, το ύψος x, το πλάτος και το βάρος όλων των γραμματοσειρών που παρέχονται στη βιβλιοθήκη γραμματοσειρών Google. Οι ίδιες μέθοδοι θα μπορούσαν να εφαρμοστούν σε άλλες βιβλιοθήκες γραμματοσειρών όπως Typekit ή γραμματοσειρές από τον υπολογιστή σας.

Αντίθεση εγκεφαλικού

Η αντίθεση περιγράφει τον λόγο των λεπτών έως παχών κτυπήματα. Υπάρχουν γραμματοσειρές με μικρή αντίθεση εγκεφαλικού επεισοδίου, π.χ. πλάι serifs ή πολλές γραμματοσειρές sans serif σχεδιασμένες για διεπαφές χρηστών, π.χ. Roboto ή Σαν Φρανσίσκο. Υπάρχουν και άλλοι με πολύ μεγάλη αντίθεση, όπως η Bodoni ή Didot. Για να μετρήσουμε την αντίθεση, μπορούμε να εντοπίσουμε τα περιγράμματα ενός "o" και να αναζητήσουμε τις μικρότερες και μεγαλύτερες αποστάσεις μεταξύ εσωτερικού και εξωτερικού σχήματος.

Η αντίθεση μιας γραμματοσειράς μπορεί να μετρηθεί στο παχύτερο και λεπτότερο μέρος του

Είναι ένα απλό και συγκρίσιμο σχήμα γραμμάτων που σχεδόν πάντα αποτελείται από δύο μονοπάτια. Είναι καλός υποψήφιος για την εκτίμηση της αντίθεση ενός τύπου. (Πλευρική σημείωση: Ενώ φαινομενικά απλή, το σχήμα ενός "o" είναι πραγματικά αρκετά δύσκολο να τραβήξει καλά, επειδή το εγκεφαλικό επεισόδιο πρέπει να αναπτυχθεί ομαλά και να συρρικνωθεί ανάμεσα σε λεπτό και παχύ.)

Το opentype.js παρέχει βολικούς τρόπους για να αποκτήσετε δεδομένα διαδρομής για να σχεδιάσετε χαρακτήρες σε ένα στοιχείο SVG. Εγώ πραγματικά τραβούν τα εσωτερικά και εξωτερικά μονοπάτια ξεχωριστά. Στη συνέχεια, χρησιμοποίησα έναν αλγόριθμο που ταξιδεύει κατά μήκος κάθε διαδρομής και μετρά την απόσταση σε κάθε σημείο. Στη συνέχεια μπορούμε να υπολογίσουμε την αναλογία μεταξύ της μεγαλύτερης και της μικρότερης απόστασης και της voila - έχουμε μια συγκρίσιμη μέτρηση της αντίθεσης.

x-ύψος

Το ύψος x είναι ένα σημαντικό χαρακτηριστικό που μπορεί να είναι ένας δείκτης για την αναγνωσιμότητα και το αντιληπτό μέγεθος μιας γραμματοσειράς. Συνήθως μετράται στην κορυφή ενός μικρού πεδίου x.

Το ύψος x μπορεί να μετρηθεί από τις πληροφορίες glyph που παρέχει η opentype.js.

Το opentype.js μας παρέχει τις απαραίτητες μετρήσεις, δηλαδή το yMax για οποιοδήποτε glyph.

Εκτός από την απόλυτη μέτρηση, ίσως είναι χρήσιμο να συγκρίνουμε το ύψος x με το ύψος των ανυψωτών. Έτσι, μπορούμε να πάρουμε ποσοστιαίες τιμές όπως "το ύψος x είναι το 60% των κεφαλαίων γραμμάτων".

Για να κάνετε τις τιμές συγκρίσιμες (ορισμένες γραμματοσειρές χρησιμοποιούν 1000 μονάδεςPerEm, άλλες 2048 μονάδεςPerEm), είναι απαραίτητο να ομαλοποιήσετε τις τιμές και να τις αντιστοιχίσετε σε μια περιοχή 0-1.

Πλάτος / Αναλογία

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

Μια άλλη ιδέα είναι να υπολογίσει το μέσο πλάτος glyph χρησιμοποιώντας μια λέξη δείγμα όπως "Hamburgefontsiv". Ενώ αυτό λειτουργεί αρκετά καλά, θα χρειαζόταν επίσης κάποια εξομάλυνση σε σχέση με το συνολικό σχέδιο και το ύψος της γραμματοσειράς.

Μια άλλη προσέγγιση είναι να εξετάσουμε το ποσοστό ενός "o". Αυτό δίνει εκπληκτικά καλές τιμές για τη σύγκριση των εύρους των γραμματοσειρών.

Βάρος

Για να μετρήσω το βάρος, αποδίδω τον πεζό χαρακτήρα "o" σε ένα στοιχείο HTML καμβά, το γεμίζω μαύρο και ζωγραφίζω το φόντο λευκό. Στη συνέχεια, μετρούν την αναλογία μεταξύ ασπρόμαυρων εικονοστοιχείων. Μια γραμματοσειρά γραμματοσειράς ή γραμματοσειράς θα εμφανίζει πολύ λίγες τιμές, ενώ μια πολύ βαρύ σύντομη γραμματοσειρά θα εμφανίζει υψηλές τιμές. Αυτό μου έδωσε ωραία αποτελέσματα, αλλά θέλω να βελτιώσω αυτό με τη μέτρηση των πραγματικών στελεχών των glyphs στο μέλλον.

Διαχωρισμός

Όταν όλα τα glyphs μιας γραμματοσειράς έχουν το ίδιο πλάτος, ονομάζονται μονοδιάστατα. Σημαντικό είναι ότι δεν μπορούμε κατ 'ανάγκη να κοιτάξουμε τους ίδιους τους γλύφους για να καθορίσουμε το πλάτος. Ακόμη και σε γραμματοσειρά μονοδιάστατου χαρακτήρα, ένας χαρακτήρας κουκίδων παίρνει λιγότερο ορατό χώρο από ένα "m". Επομένως, πρέπει να λάβουμε υπόψη την ιδιότητα advanceWidth που περιγράφει το αόρατο πλάτος γύρω από ένα glyph. Εδώ μπορούμε να διαπιστώσουμε ότι η Γραμματοσειρά Google χρησιμοποιεί μονοδιάστατη ως ταξινόμηση στυλ, αλλά όχι να αναφέρει την τεχνική ιδιότητα. Οι γραμματοσειρές όπως το Lekton ή το Libre Barcode δεν παρατίθενται ως μονοδιάστατες, αλλά τεχνικά είναι.

Ομοιότητα

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

Ο αναλυτής γραμματοσειρών αναλύει κάθε γραμματοσειρά, αντλεί κρυμμένα στοιχεία SVG και καμβά για μετρήσεις και αποθηκεύει τα δεδομένα σε ένα αρχείο JSON.

Διαδήλωση

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

Οι γραμματοσειρές μπορούν να ταξινομηθούν ανάλογα με το βάρος, το ύψος x, την αντίθεση, το πλάτος, το όνομα και τον αριθμό των στυλ. Ανάλογα με τα κριτήρια ταξινόμησης, εμφανίζονται επαρκή glyphs.

Τα διαγράμματα περιοχής δείχνουν τη διανομή τιμών και μπορούν να χρησιμοποιηθούν για να φιλτράρουν ορισμένες τιμές. Κάθε γραμματοσειρά έχει μια λεπτομερή προβολή με μερικά δείγματα, glyphs, μετρήσεις, πληροφορίες Panose και παρόμοιες γραμματοσειρές.

Στιγμιότυπο οθόνης του ιστότοπου του έργου

Εξερευνήστε το σύνολο δεδομένων
https://getflourish.github.io/anatomy-of-typefaces/
Για κάποιο λόγο, ορισμένες γραμματοσειρές αποτυγχάνουν να φορτωθούν στο Safari, γι 'αυτό προτείνουμε να χρησιμοποιήσετε το Chrome.

Screencast
https://vimeo.com/239318934

Ευρήματα

Το σύνολο δεδομένων προσκαλεί κάποιον να διερευνήσει και να βρει ομοιότητες και παρατυπίες. Η ρύθμιση χαμηλής αντίθεσης και serif θα επιστρέψει όλες τις γραμματοσειρές serif πλακών. Το χαμηλό ύψος x θα μας δώσει κυρίως χειρόγραφες γραμματοσειρές ή γραμματοσειρές σεναρίου. Πολύ υψηλές τιμές συχνά υποδεικνύουν όλες τις γραμματοσειρές των κεφαλαίων.

Misfits
Η επιλογή των κατώτερων ή ανώτερων άκρων του φάσματος θα επιστρέψει συχνά πολύ περίεργα σχέδια. Πιο συχνά πέφτουν στην οθόνη κατηγορίας.

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

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

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

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

Περίληψη

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

Χωρίς εμπλοκή της AI, έχω τώρα καλή κατανόηση για τα εσωτερικά αρχεία γραμματοσειρών και αυτά που λείπουν. Όσο περισσότερο και περισσότερο μπήκα σε αυτό, συνειδητοποίησα πόσο μαζική είναι η τεχνολογία γραμματοσειρών και ότι μπαίνω μόνο σε κάτι που έχει γίνει εδώ και δεκαετίες.

Δυνατότητες

Με ένα τέτοιο σύνολο δεδομένων, θα μπορούσαμε να κάνουμε περισσότερα πράγματα:

  • βρείτε τις εναλλακτικές γραμματοσειρές με παρόμοιο πλάτος ή στυλ
  • να προσαρμόζει αυτόματα τα μεγέθη των γραμματοσειρών και τα ύψη των γραμμών με βάση το ύψος x
  • βρείτε συνδυασμούς γραμματοσειρών που βασίζονται σε ομοιότητα ή διαφορά
  • δημιουργήστε ένα προσαρμοσμένο μενού γραμματοσειράς για τον σχεδιαστή αφίσας του Avatar
  • ...

Δοκιμάστε την εφαρμογή
https://getflourish.github.io/anatomy-of-typefaces/

Παρακολουθήστε το screencast
https://vimeo.com/239318934

Προτού δημοσιεύσω το ακατέργαστο σύνολο δεδομένων, θέλω να βελτιώσω την ανάλυση και να προσπαθήσω να προσθέσω περισσότερα χαρακτηριστικά. Αν έχετε ιδέες βελτίωσης, μη διστάσετε να αφήσετε ένα σχόλιο. Ευχαριστώ για την ανάγνωση!

Περαιτέρω ανάγνωση

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

Λαμβάνοντας τα ρομπότ να σχεδιάσουν το σχολείο, μέρος 1 από Jon Gold
Ήδη τον Μάιο του 2016, ο Jon Gold γράφει για την προσέγγισή του στην ανάλυση των γραμματοσειρών σε βάθος, καλύπτοντας θέματα όπως το σχεδιασμό βάσει κανόνων, η τεχνητή νοημοσύνη και η συνάφεια αυτών των συνόλων δεδομένων για εργαλεία σχεδιασμού.

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

Αρτοποιείο γραμματοσειράς
Το αρτοποιείο γραμματοσειρών είναι ένα σύνολο εργαλείων Python που εκτελεί ελέγχους σε αρχεία TrueType και σε αρχεία μεταδεδομένων σχετικά με τα γραμματοσειρά του Google.

παράρτημα

Ε: Γιατί δεν χρησιμοποιήσατε δεδομένα από υπηρεσίες γραμματοσειρών στο Web;
Α: Οι υπηρεσίες που παρέχουν γραμματοσειρές όπως Typekit, Γραμματοσειρές Google, Fontstand, Fontshop, MyFonts κ.λπ. παρέχουν όλα τα φίλτρα με περισσότερο ή λιγότερο λεπτό έλεγχο. Τα API αυτών των υπηρεσιών διαφέρουν επίσης από το ποσό των πληροφοριών που είναι διαθέσιμες για κάθε γραμματοσειρά. Συνήθως παρέχεται η κατηγορία, αλλά άλλες πληροφορίες είτε απουσιάζουν είτε δεν είναι συμβατές μεταξύ των υπηρεσιών.

Το παρακάτω παράδειγμα δείχνει ότι το μόνο που λαμβάνουμε από το API του Google Γραμματοσειρά Web για το Roboto είναι η κατηγορία sans-serif, παραλλαγές και υποσύνολα. https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1

Το API Typekit παρέχει περισσότερες πληροφορίες σχετικά με το πλάτος, το ύψος x, το βάρος, την ταξινόμηση, την αντίθεση, τα κεφαλαία και μια σύσταση.
https://gist.github.com/getflourish/8c7c9ab4ddcf422cbb77866b5cf61575

Όπως μπορείτε να δείτε, στο παράδειγμα API του παραδείγματος, οι πληροφορίες σχετικά με μια γραμματοσειρά είναι συγκεκριμένες για τον παροχέα. Για να είμαι πιο ευέλικτη και ανεξάρτητη, άρχισα να κάνω τη δική μου ανάλυση.