Η εξέλιξη της τυπογραφίας με μεταβλητές γραμματοσειρές: μια εισαγωγή

Λεπτό, παχύ, και όλα μεταξύ τους: FF Meta Μεταβλητή από Monotype

Οι λέξεις έχουν τη δύναμη και η τυπογραφία είναι η φωνή τους

Για αιώνες, ο τύπος είναι πώς ακούμε αυτό που διαβάζουμε. Είναι επίσης γενικά κατανοητό ότι οι χαρακτήρες και η τυπογραφία αποτελούν βασικό στοιχείο της επωνυμίας, της έκφρασης, της φωνητικής εμβέλειας. Η μεγάλη τυπογραφία επηρεάζει την κατανόηση, τη διάθεση και το νόημα σε αμέτρητους τρόπους και είναι ένα ουσιαστικό μέρος του σχεδιασμού. Δυστυχώς, για πολλά χρόνια μετά την εμφάνιση του ιστού, δεν μπορέσαμε να εφαρμόσουμε όλα τα είδη των τυπογραφικών σχεδίων εκτός από το βασικότερο σε περιεχόμενο στο διαδίκτυο. Με τη δυνατότητα χρήσης πραγματικών γραμματοσειρών και λειτουργιών OpenType - όπως συνδέσμους, συγκεκριμένα σύνολα μορφών, κλάσματα και αληθινή κλίση - το τυπογραφικό τοπίο βελτιώθηκε σημαντικά. Αλλά η πραγματικότητα της προβολής περιεχομένου στο διαδίκτυο υπαγορεύει ότι η ταχύτητα είναι η πιο κρίσιμη πτυχή του σχεδιασμού - γι 'αυτό έχουμε διαπραγματευτεί τυπογραφική' φωνητική σειρά 'για την ταχύτητα της σελίδας. Αυτό σημαίνει λιγότερα βάρη γραμματοσειρών και μειωμένη πιστότητα και φωνή μάρκας.

Από πολλά, ένα (πρότυπο: μετατοπίζεται)

Μια μεταβλητή γραμματοσειρά είναι μια ενιαία γραμματοσειρά που δρα ως πολλά
- Τζον Χάντσον

Η εμφάνιση των μεταβλητών γραμματοσειρών αλλάζει αυτή τη δυναμική. Όπως έχει περιγραφεί από τον John Hudson, μια μεταβλητή γραμματοσειρά είναι μια ενιαία γραμματοσειρά που ενεργεί όπως πολλές: όλες οι παραλλαγές του πλάτους και του βάρους, της κλίσης και ακόμη και της πλάγιας γραμματοσειράς μπορούν να περιληφθούν σε ένα ενιαίο, εξαιρετικά αποτελεσματικό και συμπιεστό αρχείο γραμματοσειράς. Επιπλέον, η μορφή (η οποία είναι τεχνικά μέρος της προδιαγραφής του OpenType 1.8) είναι εντελώς επεκτάσιμη. Ο σχεδιαστής τύπου έχει τον πλήρη έλεγχο των αξόνων που χρησιμοποιούνται, των σειρών τους και ακόμη και του ορισμού των νέων αξόνων. Υπάρχουν επί του παρόντος 5 καταχωρημένοι άξονες (πλάτος, βάρος, κλίση, πλάγια γραφή και οπτική διαστασιολόγηση), αλλά ο σχεδιαστής μπορεί να μεταβάλει κάθε άξονα που επιλέγουν. Μερικά παραδείγματα περιλαμβάνουν το ύψος ανερχόμενων και κατιόντων, το βαθμό κειμένου, ακόμη και το σχήμα serif. Οι δυνατότητες είναι σχεδόν απεριόριστες. Αφαιρώντας το φράγμα απόδοσης, ανοίγουμε την πόρτα για πιο ενδιαφέρουσα και δυναμική σχεδίαση και πολύ μεγαλύτερη ικανότητα έκφρασης της πραγματικής φωνής του εμπορικού σήματος. Όλα αυτά διατηρώντας την πιστότητα στην ίδια την γραμματοσειρά: μόνο οι άξονες που εκτίθενται από τον σχεδιαστή τύπου μπορούν να ποικίλουν. Δεν επιτρέπεται τεχνητή παραμόρφωση.

Σχεδιασμός ιστοσελίδων, επανεφεύρουμε

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

Από 100 έως 900 βάρη

Θα μπορούσαμε επίσης να χρησιμοποιήσουμε ελαφρώς πιο περιορισμένα πλάτη χαρακτήρων για επικεφαλίδες ή για πληροφορίες πυκνότητας δεδομένων. Στην πραγματικότητα ολόκληρο το τυπογραφικό σύστημα θα μπορούσε να σχεδιαστεί ώστε να είναι ανάλογο: το βάρος και το πλάτος θα μπορούσαν να πολλαπλασιαστούν στις τυπικές ρυθμίσεις αντιγραφής του σώματος. Κάτι τέτοιο θα επέτρεπε αυτές τις πτυχές να κλιμακώνονται εύκολα μαζί με το σώμα αντίγραφο εάν οι ρυθμίσεις του αλλάζουν με βάση το μέγεθος της οθόνης ή την προτίμηση του χρήστη. Όλα αυτά με μια συνοδευτική αύξηση της απόδοσης λόγω λιγότερων αιτημάτων HTTP (λιγότερα αρχεία γραμματοσειρών) και μια συνολική εξοικονόμηση δεδομένων για λήψη (αν και αυτό θα ποικίλει ανάλογα με τη γραμματοσειρά και τη συμπίεση που χρησιμοποιούνται).

Αλλά ενώ αυτές οι ελευθερίες μας επιτρέπουν να είμαστε πιο εκφραστικοί, μερικές από τις πραγματικά ενδιαφέρουσες δυνατότητες θα βοηθήσουν να μεταμορφωθεί η ίδια η εμπειρία ανάγνωσης. Αυτή η σελίδα (και η ίδια η σελίδα επίδειξης) έχει οριστεί με μια νέα έκδοση μεταβλητής γραμματοσειράς του FF Meta, του κλασικού σχεδίου sans-serif από τον Erik Spiekermann που κυκλοφόρησε για πρώτη φορά το 1991. Ακόμη και με έναν μόνο άξονα διακύμανσης ρωμαϊκές και κρισταλικές παραλλαγές, ένα υπέροχο φάσμα φωνής μπορεί να επιτευχθεί με τεράστια κέρδη στην απόδοση: 18 αρχεία και πάνω από 288k αντικαταστάθηκαν με ένα μόνο αρχείο μόνο 84k.

Επαναλαμβανόμενη ανάγνωση στην οθόνη

Το [Meta] πρέπει να κάνει περισσότερα από ό, τι φαίνεται όμορφο: πρέπει να δουλέψει αρκετά σκληρά
-Erik Spiekermann

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

Ετοιμάστε για ένα κοντινό πλάνο

Απόκομμα 18ου αιώνα του Garamond κόβεται σε οπτικά μεγέθη. Η πρώτη εικόνα έχει μέγεθος 6pt, η δεύτερη είναι 72. Σημειώστε τη διαφορά στην αντίθεση της εγκεφαλικής. Είναι πολύ πιο εκλεπτυσμένο στο μεγαλύτερο μέγεθος.

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

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

Πολωνικά και σταθερά

Με τα οφέλη που έχουν ήδη συζητηθεί, η υπόθεση για μεταβλητές γραμματοσειρές είναι αρκετά επιτακτική. Αλλά η καλή τυπογραφία δεν είναι ό, τι υπάρχει για το μεγάλο σχέδιο. Το εύρος των αξόνων, όπως το πλάτος και το βάρος, μας δίνουν την τεράστια ελευθερία να αγκαλιάζουμε περισσότερη συντακτική σχεδίαση στον ιστό χωρίς να χρειαστεί να φορτώσουμε έναν υπερβολικό αριθμό περιουσιακών στοιχείων αρχείου. Και επειδή ήδη έχουμε τις λίγες απαιτούμενες μεταβλητές γραμματοσειρές στη θέση τους, η ευκαιρία είναι να τις εκθέσουμε για χρήση από τους ίδιους τους εκδότες περιεχομένου. Φανταστείτε ένα ρόλο για τους σχεδιαστές μέσα στο Σύστημα Διαχείρισης Περιεχομένου (ή στο CMS) όπου στεγάζεται ο ιστότοπος. Αυτός ο σχεδιαστής θα μπορούσε να χρησιμοποιήσει μερικούς απλούς ελέγχους ενσωματωμένους στο CMS που θα τους επέτρεπε να στοιχειοθετούν ειδικούς τίτλους ή αποσπάσματα, επιτρέποντας ένα εντελώς νέο επίπεδο σχεδίου παρόμοιο με αυτό που έχουμε στο έντυπο χωρίς να χρειάζεται να γράφουμε κώδικες κάθε φορά.

Μπορεί να είμαστε ακόμα στην αυγή αυτής της νέας εποχής, αλλά το μέλλον είναι σίγουρα λαμπρό

Από τον Μάιο του 2018, 3 από τα 4 μεγάλα προγράμματα περιήγησης στο διαδίκτυο υποστηρίζουν ήδη μεταβλητές γραμματοσειρές, εκτός από τις δύο κυρίαρχες κινητές πλατφόρμες (ελέγξτε την υποστήριξη στο caniuse.com). Με αυτό κατά νου, είμαστε έτοιμοι να αρχίσουμε να φωτίζουμε τον ιστό σήμερα.

Εδώ είναι η πλήρης σελίδα στο CodePen. Ρίξτε μια ματιά στο όλο θέμα μαζί και ρίξτε μια ματιά στο CSS που το οδηγεί. Αυτό περιλαμβάνει ένα τυπογραφικό σύστημα κλίμακας που δημιούργησα με βάση μερικές ιδέες που έμαθα από τους Jen Simmons και Tim Brown, χρησιμοποιώντας μονάδες προβολής, προσαρμοσμένες ιδιότητες CSS (μεταβλητές γνωστές ως μεταβλητές) και πολλούς υπολογισμούς. Μπορείτε να το δείτε απευθείας στο CodePen ή στην πραγματικότητα να το ελέγξετε έξω ενσωματωμένο παρακάτω.

Κάποιες σκέψεις σχετικά με το τυπογραφικό και το έργο

Είμαι πάντα οπαδός του έργου του Erik Spiekermann και νομίζω ότι η χρονολογία και η ιστορία της Meta, της Officina και των Fira είναι πραγματικά ενδιαφέρουσα και πολύ μέρος του υφάσματος ψηφιακού σχεδιασμού για μένα τα τελευταία 25 χρόνια. Η ευκαιρία να πάρετε ένα τυπογραφικό γράμμα με αυτό το είδος ιστορίας και αντίκτυπου στον κόσμο του σχεδιασμού και να συνεργαστείτε μαζί του στο πλαίσιο μιας ολοκαίνουργιας τεχνολογίας ήταν πραγματικά συναρπαστικό. Εκτίμησα ιδιαίτερα ότι μπορούσα να δουλέψω τόσο με το βάρος όσο και με πλάγιους χαρακτήρες ως μέρος του ίδιου αρχείου: παρουσιάζει πολύ καλά την αξία της μεταβλητής μορφής γραμματοσειράς.

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

Όταν σκέφτομαι τη βασική στοιχειοθέτηση, πήγα για κλίμακα: ήθελα να παίξω με τα άκρα του βάρους και του μεγέθους με τρόπους που δεν βλέπετε τόσο συχνά στο διαδίκτυο, επειδή τα περισσότερα σχέδια είναι πιο περιορισμένα στα χρησιμοποιούμενα βάρη. Σε αυτή την περίπτωση έχω χρησιμοποιήσει μια ολόκληρη σειρά βαρών από 100 έως 900 και στα ρωμαϊκά και πλάγια. Μόλις άρχισα να λαμβάνω μια διάταξη που μου άρεσε, μου φάνηκε ότι αντί να κάνουμε γραφικά για να δείξουμε τις δυνατότητες, θα ήταν πιο ενδιαφέρον να κάνουμε εικονογραφήσεις έξω από τον τύπο: pull quotes και λίγα 'infographic' στυλ στοιχεία γραμματοσειράς.

Το τελευταίο άγγιγμα του κορυφαίου πλαισίου ήταν στην πραγματικότητα εμπνευσμένο από τη σελίδα του δείγματος τύπου στον ιστότοπο FontFont: υπάρχει ένας δειγματολήπτης glyph που δείχνει όλα τα βάρη ενός στρώματος αμπελιών και το ένα πάνω στο άλλο. Αρχικά είχα όλα αυτά στοιβάζονται με τον ίδιο τρόπο, με κινούμενα σχέδια σε ένα βρόχο - αλλά αυτό ήταν λίγο πολύ για ορισμένα προγράμματα περιήγησης που εξακολουθούν να εφαρμόζουν μεταβλητές γραμματοσειρές και κινούμενα σχέδια βασικών καρέ. Όταν χτύπησα στην επικάλυψη με μια επιλογή αναπαραγωγής / παύσης μου άρεσε ο τρόπος που φαινόταν απλωμένος (ειδικά στο κινητό). Έτσι το γύρισα και το ξεκίνησε στατικό, και στη συνέχεια να παίξει το animation μία φορά και να επιστρέψει στο layout / layered layered.

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

[Ο Monotype με προσέλθει πρόσφατα για να γράψω και να σχεδιάσω μια σελίδα επίδειξης για να παρουσιάσω μια νέα μεταβλητή έκδοση γραμματοσειράς του κλασικού σχεδίου Erik Spiekermann FF Meta. Αυτό είναι το κείμενο αυτής της σελίδας και μερικά από τα γραφικά. Η πλήρης ζωντανή σελίδα φιλοξενείται στο CodePen και ενσωματώνεται παραπάνω. Είναι ανοιχτό σε όλους, γι 'αυτό μην διστάσετε να φτιάξετε ένα αντίγραφο και να το παίξετε μόνοι σας. Μπορείτε να δείτε την εισαγωγή τους στην τεχνολογία επίσης.]

Το αρχικό περιεχόμενο δημοσιεύτηκε στο ιστολόγιό μου