Οδηγός συνδυασμού γραμματοσειρών

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

Αυτός ο οδηγός βασίζεται στο κεφάλαιο 5 του βιβλίου Better Web Typography για έναν καλύτερο ιστό από τον Matej Latin. Το βιβλίο αποτελείται από 13 κεφάλαια μέσω των οποίων ο αναγνώστης σχεδιάζει και δημιουργεί ένα παράδειγμα ιστότοπου.

Αυτός ο οδηγός είναι επίσης διαθέσιμος στα Παραδοσιακά Κινέζικα.

Χρειάζεστε πραγματικά περισσότερες από μία γραμματοσειρές;

Η κακή τυπογραφία στο διαδίκτυο κατά τα πρώτα χρόνια του διαδικτύου ήταν συχνά φταίει για το κακό φάσμα διαθέσιμων γραμματοσειρών. Αλλά έχουμε ήδη μάθει ότι η τυπογραφία δεν είναι απλώς επιλογή γραμματοσειρών. Ένας από τους στόχους του (ίσως ο κύριος) είναι η παρουσίαση των πληροφοριών με τρόπο ευανάγνωστο και εύκολο να καταναλωθεί. Πριν αρχίσουμε να ψάχνουμε για μια γραμματοσειρά που να προσθέτουμε στο σχεδιασμό μας και να το συνδυάσουμε με τη γραμματοσειρά κειμένου, πρέπει να αναρωτηθούμε: πραγματικά χρειαζόμαστε περισσότερες από μία γραμματοσειρές; Μην προσθέτετε μόνο ένα για χάρη του. Δεν υπάρχει κανόνας στην τυπογραφία που να λέει ότι οι περισσότερες γραμματοσειρές χρησιμοποίησαν το καλύτερο (το αντίθετο πιθανότατα είναι πιο αληθές). Δεν υπάρχει καμία εγγύηση ότι η προσθήκη άλλης γραμματοσειράς στον ιστότοπό σας θα βελτιώσει την τυπογραφική της μορφή. Μου αρέσει να κρατώ την τυπογραφία μου απλή και σταθερή. Όπως ένα μηχάνημα - όσο λιγότερα κινούμενα μέρη είναι, τόσο λιγότερο πιθανό είναι να σπάσει.

Η κακή τυπογραφία στο διαδίκτυο κατά τα πρώτα χρόνια του διαδικτύου ήταν συχνά φταίει για το κακό φάσμα διαθέσιμων γραμματοσειρών. Αλλά έχουμε ήδη μάθει ότι η τυπογραφία δεν είναι απλώς επιλογή γραμματοσειρών. Ένας από τους στόχους του (ίσως ο κύριος) είναι η παρουσίαση των πληροφοριών με τρόπο ευανάγνωστο και εύκολο να καταναλωθεί. Πριν αρχίσουμε να ψάχνουμε για μια γραμματοσειρά που να προσθέτουμε στο σχεδιασμό μας και να το συνδυάσουμε με τη γραμματοσειρά κειμένου, πρέπει να αναρωτηθούμε: πραγματικά χρειαζόμαστε περισσότερες από μία γραμματοσειρές; Μην προσθέτετε μόνο ένα για χάρη του. Δεν υπάρχει κανόνας στην τυπογραφία που να λέει ότι οι περισσότερες γραμματοσειρές χρησιμοποίησαν το καλύτερο (το αντίθετο πιθανότατα είναι πιο αληθές). Δεν υπάρχει καμία εγγύηση ότι η προσθήκη άλλης γραμματοσειράς στον ιστότοπό σας θα βελτιώσει την τυπογραφική της μορφή. Μου αρέσει να κρατώ την τυπογραφία μου απλή και σταθερή. Όπως ένα μηχάνημα - όσο λιγότερα κινούμενα μέρη είναι, τόσο λιγότερο πιθανό είναι να σπάσει.

Τυπογραφικό έργο του 18ου αιώνα σε ενιαία γραμματοσειρά - Baskerville - από τον ίδιο τον John Baskerville.
Είναι ένας ασφαλής κανόνας να μην αναμειγνύονται διαφορετικά στυλ γραμμάτων στην ίδια σελίδα ή διαφορετικά πρόσωπα τύπου στο ίδιο βιβλίο.
- Ο Eric Gill

Ο Eric Gill, ένας αρκετά αμφιλεγόμενος άνθρωπος, αλλά ένας μεγάλος τυπογράφος (μεταξύ πολλών άλλων που έκανε), είχε παρόμοια άποψη. Δεν υπάρχει πολύ που μπορείτε να κάνετε καλύτερα με περισσότερες γραμματοσειρές από ό, τι μπορείτε με ένα μόνο. Προσπαθήστε να δοκιμάσετε τον εαυτό σας και να δημιουργήσετε έναν ιστότοπο χρησιμοποιώντας μόνο μία γραμματοσειρά Αν μόνο για πειράματα και διασκέδαση, νομίζω ότι όλοι πρέπει να το δοκιμάσουν καθώς υπάρχουν πολλά που πρέπει να μάθουν από αυτό.

Πρόσφατα επανασχεδιάστηκε το matejlatin.co.uk. Τυπογραφία εστιασμένη αλλά χρησιμοποιώντας μόνο μία γραμματοσειρά.

Πρόσφατα επανασχεδίασα την προσωπική μου ιστοσελίδα. Ένα από τα πράγματα που ήθελα να ξεχωρίσω ήταν ο μινιμαλισμός που είναι τόσο μεγάλο κομμάτι της ζωής μου. Για να το καταφέρω καλύτερα, αποφάσισα να χρησιμοποιήσω μια ενιαία γραμματοσειρά. Ήθελα επίσης να επικεντρωθεί στην τυπογραφία (κυριολεκτικά το 95% της τυπογραφίας), γεγονός που καθιστούσε ακόμα πιο δύσκολη την πρόκληση. Ψάχνα για μια καθαρή, τραγανή και απλή γραμματοσειρά sans-serif που θα τονίζει αυτό ακόμα περισσότερο. Στο τέλος επέλεξα τον Gibson από τον τύπο του Καναδά. Έχει μια σύγχρονη, αλλά ελαφρώς φιλική αίσθηση σε αυτό. Και λειτουργεί καλά όταν έχει τεθεί σε τεράστια μεγέθη. Ήταν μια μικρή πρόκληση να πάρετε την τυπογραφία σωστή για την ιστοσελίδα, αλλά κατάφερα να το κάνω μόνο με διαφορετικά μεγέθη, βάρη και μόνο δύο χρώματα - σκούρο και μεσαίο γκρι.

Συμπεριέλαβα αυτό το παράδειγμα στο βιβλίο, επειδή είναι υπέροχο να δείξουμε πόσα μπορεί να γίνει με μια ενιαία γραμματοσειρά. Όχι μόνο από τους δασκάλους τυπογραφίας όπως ο John Baskerville, αλλά και από αυτοδίδακτους σχεδιαστές σαν κι εμένα. Πιστεύετε ότι χρειάζεστε ακόμη μια άλλη γραμματοσειρά για το έργο σας; Χωρίς ανησυχίες, διαβάστε παρακάτω.

Μια διαδικασία τεσσάρων βημάτων για τον συνδυασμό γραμματοσειρών

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

  1. Βρείτε μια γραμματοσειρά άγκυρα για το κύριο κείμενό σας σώμα
  2. Βρείτε μερικές δευτερεύουσες γραμματοσειρές για πιθανούς συνδυασμούς
  3. Αξιολογήστε τον συνδυασμό
  4. Εξαίρεση / επιλογή συνδυασμού γραμματοσειρών.
Η παραπάνω διαδικασία υποθέτει ότι ξεκινάτε με τη γραμματοσειρά για κείμενο κειμένου που έχετε ήδη επιλέξει. Η διαδικασία μπορεί εύκολα να αντιστραφεί αν θέλετε πρώτα να αρχίσετε με μια γραμματοσειρά τίτλου.

Υπάρχουν δύο προσεγγίσεις για το συνδυασμό γραμματοσειρών και πέντε κατευθυντήριες γραμμές που μπορούν να σας βοηθήσουν με το βήμα 3 από το παραπάνω γράφημα. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.

Δύο προσεγγίσεις για την αξιολόγηση συνδυασμών γραμματοσειρών

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

Αντίθετοι συνδυασμοί

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

Πώς μπορούμε να το εφαρμόσουμε στη τυπογραφία; Ας πάρουμε τη γραμματοσειρά Baskerville για το κύριο κείμενό μας σώμα. Το Baskerville σχεδιάστηκε από τον John Baskerville το 1754. Ήταν μια σύγχρονη γραμματοσειρά εκείνη την εποχή καθώς ωθούσε τα όρια του τι ήταν δυνατό στην τυπογραφία. Είναι αντιληπτό ως ένα κλασικό αυτές τις μέρες εν τούτοις. Προκαλεί αισθήματα εμπιστοσύνης και ζεστασιάς. Με βάση ένα πείραμα, που διεξάγεται από τον Errol Morris, είναι η πιο αξιόπιστη γραμματοσειρά γύρω. Τώρα, συμπληρώστε το με ένα Futura μόνο για κεφαλαία. Το Futura σχεδιάστηκε από τον Paul Renner το 1927. Είναι μια γεωμετρική γραμματοσειρά sans-serif. Ήταν μια σύγχρονη γεωμετρική γραμματοσειρά sans-serif όταν σχεδιάστηκε για πρώτη φορά και εξακολουθεί να αισθάνεται σύγχρονη μέχρι σήμερα.

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

Αρμονικοί συνδυασμοί

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

Χρησιμοποιήσαμε το Din Alternate για τον τίτλο και το Helvetica για γραμματοσειρά σώματος στον παραπάνω συνδυασμό. Και οι δύο έχουν μια ελαφρά βιομηχανική και σύγχρονη αίσθηση σε τους. Υπάρχουν πολλά χαρακτηριστικά που κάνουν τις δύο γραμματοσειρές παρόμοιες αλλά ακόμα, είναι αρκετά διαφορετικές ώστε να λειτουργούν καλά ως συνδυασμός.

Πέντε οδηγίες για τον συνδυασμό γραμματοσειρών

Συνδυασμός γραμματοσειρών με παρόμοιο ύψος x

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

Πάνω: Το Futura και το Baskerville έχουν παρόμοιο ύψος x που τους ενισχύει ως καλό συνδυασμό γραμματοσειρών.

Αυτός ο συνδυασμός λειτουργεί είτε με αντίθεση είτε με αρμονία. Είτε επιλέγετε γραμματοσειρές που έχουν το ίδιο ύψος x είτε γραμματοσειρές που έχουν πολύ διαφορετικά x-ύψη. Μην πηγαίνετε με κάτι στο μεταξύ.

Συνδυασμός γραμματοσειρών από το ίδιο χυτήριο

Παρατήρησα κάτι από όλα τα έργα τυπογραφίας που έκανα μέχρι τώρα. Επιλέγοντας γραμματοσειρές, έχω την τάση να συνεχίζω να επιστρέφω σε ορισμένα τύπους χυτηρίων που τα παρήγαγαν. Το FontFont της Γερμανίας είναι ένας από αυτούς - είμαι οπαδός του έργου του Erik Spiekermann. Το Dalton Maag με έδρα το Λονδίνο είναι άλλο ένα. Υπήρξαν περιπτώσεις που έφτασα στο χρόνο να εξερευνήσω απλώς όλες τις γραμματοσειρές που προέρχονταν από αυτά τα δύο χυτήρια και δεν υπήρχε σχεδόν κανένα που δεν μου άρεσε. Φαίνεται ότι τα στυλ τους ταιριάζουν με αυτό που συνήθως ψάχνω. Και αυτό δεν είναι σύμπτωση.

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

Συνδυασμός γραμματοσειρών από τον ίδιο δημιουργό

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

Πάνω: Το σύμπαν στο βάθος και ο Απόλλωνας σκιαγραφούνται στο προσκήνιο (Και οι δύο σχεδιάστηκαν από τον Adrian Frutiger). Παρατηρήστε πόσο διαφορετικά είναι σε στυλ, αλλά πολλά βασικά σημεία τέμνονται σχεδόν τέλεια.

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

Συνδυασμός γραμματοσειρών με βάση την ιστορική εποχή

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

Υπάρχουν σχεδόν 200 χρόνια που χωρίζουν τη δημιουργία του Baskerville και του Futura.

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

Χρησιμοποιώντας σούπερ χαρακτήρες

Υπάρχουν τα λεγόμενα σούπερ χαρακτήρες. Γραμματοσειρές που έρχονται σε στυλ sans-serif και serif. Merriweather και Merriweather Sans είναι εξαιρετικά παραδείγματα. Έτσι είναι Roboto και Roboto Slab. Απλά δεν μπορεί να πάει στραβά χρησιμοποιώντας τα στυλ μιας σούπερ οικογένειας. Αυτός μπορεί να είναι ένας πολύ καλός τρόπος για να ξεκινήσετε την ανάπτυξη των δεξιοτήτων συνδυασμού γραμματοσειρών.

Ορισμένες γραμματοσειρές έρχονται σε serif και sans serif (ή ακόμα περισσότερα στυλ). Δεν μπορείτε να πάτε στραβά αν συνδυάσετε αυτά.

Ένα παράδειγμα συνδυασμού γραμματοσειρών

Αυτός ο οδηγός είναι μια προσαρμογή του κεφαλαίου 5 από την Καλύτερη Τυπογραφία Ιστού για ένα καλύτερο βιβλίο στο Web, οπότε σε αυτό το στάδιο, οι αναγνώστες είναι 4 κεφάλαια και έχουν ήδη περάσει από τη διαδικασία επιλογής της κύριας γραμματοσειράς (anchor).

Αγκύρωση γραμματοσειράς

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

Το παράδειγμα περιεχομένου για τον ιστότοπο που έχει οριστεί στο FF Meta - η γραμματοσειρά που επιλέξαμε νωρίτερα στο βιβλίο.

Εύρεση υποψηφίων για πιθανούς συνδυασμούς

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

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

Ας γράψουμε μερικά βασικά σημεία που θα μας βοηθήσουν να βρούμε τη γραμματοσειρά τίτλου, όπως ακριβώς κάναμε και για το σώμα:

  • σίγουρα sans-serif (χρειαζόμαστε κάτι που θα έχει μεγάλη αντίθεση σε σύγκριση με τη γραμματοσειρά κειμένου του σώματός μας)
  • πρέπει να αισθάνεται μοντέρνα που μεταφράζεται σε μεγαλύτερο x-ύψος
  • πρέπει να λειτουργεί καλά με μεγαλύτερα μεγέθη γραμματοσειρών
  • Όσο περισσότερα βάρη και στυλ τόσο καλύτερα
  • Τα χαρακτηριστικά OpenType δεν απαιτούνται (εκτός από τους συνδέσμους, σπάνια χρησιμοποιώ άλλες λειτουργίες του OpenType με επικεφαλίδες)
  • χρειάζεται μόνο το αγγλικό υποσύνολο χαρακτήρων
  • πρέπει να αποδίδει καλά στις κοινές οθόνες (κινητές και επιτραπέζιες).

Με αυτό που γράψαμε, είμαστε έτοιμοι να ξεκινήσουμε την αναζήτηση. Ας πυρπολήσουμε το TypeKit και να βρούμε κάποιους υποψηφίους. Αφήστε να ρυθμίσετε τα φίλτρα έτσι ώστε να μπορούμε να δούμε μόνο sans-serif, συνιστάται για επικεφαλίδες, βάρος και μεγάλο x-ύψος. Το μεγάλο x-ύψος θα ταιριάζει με αυτό που ψάχνουμε αλλά και το x-ύψος του FF Meta που επιλέξαμε για κείμενο κορμού.

Περνάω τα 40 αποτελέσματα που προέκυψαν από τα ακόλουθα: Korolev, FF Enzo, Quatro, Camingodos και JAF Facit. Μόνο πέντε. Υποθέτω ότι έχω καλή ιδέα για αυτό που ψάχνω.

Αξιολόγηση συνδυασμών γραμματοσειρών

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

Παράδειγμα κώδικα από αυτό το κεφάλαιο μπορεί να προβληθεί στο CodePen.

Αρχικά, ας αξιολογήσουμε τους υποψηφίους στο προεπιλεγμένο μέγεθος και χρώμα. Ίσως μπορούμε να εξαλείψουμε μερικά από αυτά χωρίς να σκάψουμε πολύ βαθιά. Πράγματι, υπάρχει κάτι που δεν έχει νόημα για το JAF Facit, ώστε να το εξαλείψουμε. Μερικοί χαρακτήρες, όπως το "w" και το "y", στο Quatro είναι αρκετά μοναδικά σχεδιασμένοι και ξεχωρίζουν. Με κακό τρόπο. Ας το ξεπεράσουμε από τη λίστα. Μερικές φορές είναι πραγματικά τόσο απλό. Κοιτάζοντας πιο προσεκτικά το FF Enzo αποκαλύπτει ότι είναι σαφώς ανθρωπιστικό στυλ (αισθητή αντίθεση και ελαφρώς κλίση) που δεν είναι κάτι που ψάχνουμε. Αυτή είναι η τρίτη από τη λίστα μας.

Εξάλειψη συνδυασμών γραμματοσειρών

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

Ο Camingodos έχει επίσης μια μικρή ανθρωπιστική αίσθηση, αλλά δεν είναι τόσο ξεκάθαρη όσο ήταν με την FF Enzo. Οι χαρακτήρες είναι ελαφρώς στενότεροι και το ύψος x είναι μεγάλο. Υπάρχει μια τετραγωνική αίσθηση που δεν είμαι σίγουρη. Αισθάνεται σαν να προσπαθεί να είναι tech-y αλλά δεν πηγαίνει όλος ο τρόπος (λόγω αυτής της ανθρωπιστικής πλευράς). Ας δούμε πιο προσεκτικά τον Κορολέφ.

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

Ας δοκιμάσουμε και ελαφρώς ελαφρύτερο βάρος - μέσο αντί για τολμηρό.

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

Δείτε το ζωντανό παράδειγμα στο betterwebtype.com/book/c5.

Περισσότερα για την καλύτερη τυπογραφία στο διαδίκτυο στο βιβλίο

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

Συνδυασμός γραμματοσειρών εξαπατήσει

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

Πάρτε το φύλλο εξαπατήσει σας για το συνδυασμό γραμματοσειρών →

Άλλα cool stuff από το Better Web Type

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

Επισκεφτείτε betterwebtype.com →