Με @ jonathanzwhite

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

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

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

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

Προσδιορίστε τον σκοπό σας

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

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

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

Επιλέξτε μια γραμματοσειρά που ταιριάζει με το στυλ της απεικόνισής σας

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

Αν οι εικόνες είναι το επίκεντρο του σχεδίου σας, επιλέξτε απλές γραμματοσειρές έτσι ώστε οι εικόνες να ξεχωρίζουν

Προσδιορίστε το κοινό σας

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

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

Για παράδειγμα, ορισμένες γραμματοσειρές είναι πιο κατάλληλες για παιδιά. Όταν μαθαίνουμε να διαβάζουμε, τα παιδιά χρειάζονται πολύ ευανάγνωστες γραμματοσειρές με γενναιόδωρα γράμματα. Ένα καλό παράδειγμα είναι το Sassoon Primary. Το Sassoon Primary αναπτύχθηκε από τη Rosemary Sassoon και βασίστηκε στην έρευνά της σχετικά με το είδος των επιστολών που βρέθηκαν τα παιδιά που βρέθηκαν ευανάγνωστα.

Sassoon Primary αναπτύχθηκε Rosemary Sassoon

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

Όταν επιλέγετε τύπο, λάβετε υπόψη το κοινό και τις ανάγκες σας. Με απλά λόγια, συναισθήστε με τους χρήστες σας.

Ψάξτε για έμπνευση

Κοιτάξτε το έργο άλλων σχεδιαστών. Προσπαθήστε να καταλάβετε πώς έκαναν τις αποφάσεις τους για τον τύπο.

Είσοδος γραμματοσειράς

Για την έμπνευση γραμματοσειράς, οι 100 καλύτερες δωρεάν γραμματοσειρές από το CreativeBloq είναι ένα μεγάλο άρθρο που σας δίνει τη σωστή νοοτροπία για την επιλογή τύπου. Στο άρθρο, το CreativeBloq εξηγεί τα κίνητρα πίσω από κάθε γραμματοσειρά.

Ένας άλλος χρήσιμος πόρος είναι η 100 Greatest Free Fonts Collection για το 2015 από την Awwwards.

Η Invision συνέταξε επίσης ένα γιγαντιαίο repo των τυπογραφικών πόρων. Θα βρείτε πολλές πηγές για έμπνευση εκεί.

Το Typ.io αποπνέει έμπνευση γραμματοσειράς από όλο τον ιστό

Για έμπνευση από τους πραγματικούς ιστότοπους, ελέγξτε το Tip.io. Ο ιστότοπος αποπνέει έμπνευση γραμματοσειράς από τον ιστό. Επιπλέον, ο ιστότοπος παρέχει ορισμούς γραμματοσειράς CSS στο κάτω μέρος κάθε δείγματος έμπνευσης.

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

Αντιστοίχηση έμπνευσης

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

Η αντιστοίχιση γραμματοσειρών είναι εξίσου σημαντική με τις ίδιες τις γραμματοσειρές

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

Το FontPair επίσης εξαγνίζει την έμπνευση αντιστοίχισης γραμματοσειρών, ειδικά για τις γραμματοσειρές Google. Μπορείτε να ταξινομήσετε κατά τύπο συνδυασμών στυλ όπως sans-serif και serif ή serif και serif.

Τέλος, υπάρχουν αρκετοί συνδυασμοί αντιστοίχισης γραμματοσειρών που δημιουργούνται από σχεδιαστές online. Για παράδειγμα, Τυπογραφία: Συνδυασμοί γραμματοσειρών Google και τυπογραφία: Συνδυασμοί γραμματοσειρών Google. Τόμος 2. Απλά αναζητήστε "αντιστοίχιση γραμματοσειρών" σε ιστότοπους όπως το Behance και το Dribbble.

Επιλέξτε τις γραμματοσειρές σας

Οπλισμένοι με έρευνα και έμπνευση, είστε έτοιμοι να επιλέξετε τον τύπο σας. Όταν πρόκειται για την επιλογή τύπου, πρέπει να έχετε κατά νου τις ακόλουθες αρχές: αναγνωσιμότητα, ευανάγνωστο και σκοπό.

Πριν επιλέξετε μια γραμματοσειρά, πραγματοποιήστε έρευνα για τον προορισμό της

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

Για το λόγο αυτό, πριν επιλέξετε μια γραμματοσειρά, διερευνήστε τον προορισμό της.

Συνδυάστε γραμματοσειρές που αντιγράφουν το ένα το άλλο

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

Για τις γραμματοσειρές web, μπορείτε να χρησιμοποιήσετε τις γραμματοσειρές Google, το Typekit και το σκίουρο γραμματοσειράς. Οι Γραμματοσειρές Google είναι δωρεάν, το Typekit και το Font Squirrel έχουν δωρεάν και πληρωμένες γραμματοσειρές.

Προσδιορίστε τα μεγέθη των γραμματοσειρών

Το επόμενο βήμα μετά τη διευθέτηση σε συνδυασμό γραμματοσειρών καθορίζει το μέγεθος. Ένα εξαιρετικό εργαλείο για αυτό είναι η Modular Scale από τον Tim Brown, τον επικεφαλής της τυπογραφίας της Adobe. Η Modular Scale είναι ένα σύστημα για την αναγνώριση ιστορικά ευχάριστων αναλογιών για τη δημιουργία ζυγών για τον καθορισμό των μεγεθών τύπου.

Η Modular Scale είναι ένα σύστημα για την αναγνώριση ιστορικά ευχάριστων αναλογιών για τη δημιουργία ζυγών για τον καθορισμό των μεγεθών τύπου

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε μια κλίμακα με βάση τη χρυσή αναλογία. Εδώ θα είναι οι πρώτες σας πέντε υπολογισμένες επιλογές μεγέθους γραμματοσειράς:

Χρυσή αναλογία (1: 1.618)
1.000 χ 1.618 = 1.618
1.618 χ 1.618 = 2.618
2.618 χ 1.618 = 4.236
4.236 χ 1.618 = 6.854
6.854 χ 1.618 = 11.089

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

Χρυσή αναλογία (1: 1.618)
...
11.089 χ 1.618 = 17.942
17.942 χ 1.618 = 29.03
29.030 χ 1.618 = 46.971
46.971 χ 1.618 = 75.999
75.999 χ 1.618 = 122.966

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

Μικρό Δεύτερο 15:16
Κύριος Δεύτερος 8: 9
Μικρό τρίτο 5: 6
Κύριο τρίτο 4: 5
...

Επομένως, αντί να χρησιμοποιείτε το χρυσό λόγο, μπορείτε να χρησιμοποιήσετε αναλογίες που αποδίδουν μικρότερα διαστήματα όπως το Perfect Fourth.

Τέλειος τέταρτος (3: 4)
...
9.969 χ 1.333 = 13.288
13.288 χ 1.333 = 17.713
17.713 χ 1.333 = 23.612
23.612 χ 1.333 = 31.475
31.475 χ 1.333 = 41.956
41.956 χ 1.333 = 55.927

Μόλις εγκατασταθεί σε μια κλίμακα, μπορείτε να επιλέξετε κεράσια μεγέθη γραμματοσειράς από τη λίστα σας και να τα στρογγυλάτε στο πλησιέστερο δεκαδικό.

Μεγέθη γραμματοσειράς
Κεφαλίδα 1: 55px
Header 2: 42px
Κεφαλίδα 3: 31px
Κεφαλίδα 4: 24px
Κεφαλίδα 5: 14px
Σώμα: 17px
Λεζάντα: 14px

Η μέθοδος Modular Scale χρησιμοποιεί μαθηματική ακρίβεια για τη δημιουργία μεγεθών γραμματοσειρών. Ωστόσο, είναι μόνο ένας οδηγός. Χρησιμοποιήστε αυτήν τη μέθοδο ως σημείο εκκίνησης και, στη συνέχεια, προσαρμόστε τα μεγέθη με το μάτι σας.

Δημιουργήστε μια τυπογραφική τυπογραφία

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

Κοινότυπα στυλ στο Σκίτσο

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

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

Μια λέξη για το χρώμα: όταν επιλέγετε χρώμα, λάβετε υπόψη την παλέτα χρωμάτων σας. Επιλέξτε χρώματα για τον τύπο σας που εναρμονίζονται με την παλέτα χρωμάτων σας.

Χρησιμοποιήστε τους οδηγούς στυλ για να τυποποιήσετε τον τύπο σε όλα τα σχέδιά σας

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

Οι οδηγίες τυπογραφίας του Σχεδιασμού Υλικού της Google αποτελούν ένα καλό παράδειγμα του τι πρέπει να συμπεριλάβετε σε ένα styleguide. Δύο άλλα παραδείγματα περιλαμβάνουν τους οδηγούς τυπογραφίας των εταιρειών Mailchimp, Apple και Focus Labs.

Η τυπογραφία είναι θέμα πειραματισμού. Είναι μια επιστήμη και μια τέχνη.

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

Ποιες είναι οι αγαπημένες σας γραμματοσειρές; Αφήστε μου μια σημείωση ή στείλτε μου ένα tweet στο Twitter.

Εάν σας άρεσε αυτό το άρθρο, μπορείτε επίσης να απολαύσετε το CSS σε Javascript με την Αφροδίτη, μια βιβλιοθήκη της Khan Academy.

Μπορείτε να με βρείτε στο Medium όπου δημοσιεύει κάθε εβδομάδα. Ή μπορείτε να ακολουθήσετε εμένα στο Twitter, όπου δημοσιεύω μη-αισθησιακή ramblings σχετικά με το σχεδιασμό, front-end ανάπτυξη, και την εικονική πραγματικότητα.

P.S. Εάν σας άρεσε αυτό το άρθρο, αυτό θα σήμαινε πολλά αν κάνετε κλικ στο και μοιραστείτε με φίλους.