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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Έμπνευση γραμματοσειράς

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

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

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

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

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

Σύζευξη έμπνευσης

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

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

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

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

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

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

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

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

In terms of font pairing, keep it simple with a maximum of three different fonts. In addition, pair fonts that contrast one another. Doing so will help guide the eyes of readers, first to headers and then to body texts. You can also create visual contrast using different font sizes, colors, and weights.

For web fonts, you can use Google Fonts, Typekit, and Font Squirrel. Google Fonts is free, Typekit and Font Squirrel have free and paid fonts.

Determine font sizes

The next step after settling on a font combination is determining sizing. A great tool for this is Modular Scale by Tim Brown, the head of typography at Adobe. Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes.

For example, you might use a scale based on the golden ratio. Here would be your first five computed font size options:

Golden Ratio (1:1.618)
1.000 x 1.618 = 1.6181.618 x 1.618 = 2.6182.618 x 1.618 = 4.2364.236 x 1.618 = 6.8546.854 x 1.618 = 11.089

One issue that you might encounter is that your ratio is too large. Take a look at what happens to the later intervals of our scale based on the golden ratio.

Golden Ratio (1:1.618)
...11.089 x 1.618 = 17.94217.942 x 1.618 = 29.0329.030 x 1.618 = 46.97146.971 x 1.618 = 75.99975.999 x 1.618 = 122.966

As you can see, the intervals between numbers start to become too large. For most interfaces, you need smaller intervals. Thankfully, Modular Scale has a variety of ratios based on geometry, nature, and music.

Minor Second 15:16 Major Second 8:9Minor Third 5:6Major Third 4:5...

So instead of using the golden ratio, you can use a ratios that yield smaller intervals like the Perfect Fourth.

Perfect Fourth (3:4)
...9.969 x 1.333 = 13.28813.288 x 1.333 = 17.71317.713 x 1.333 = 23.61223.612 x 1.333 = 31.47531.475 x 1.333 = 41.95641.956 x 1.333 = 55.927

Once you have settled on a scale, you can cherry pick font sizes from your list and round them to the nearest decimal.

Font Sizes
Header 1: 55pxHeader 2: 42pxHeader 3: 31pxHeader 4: 24pxHeader 5: 14px
Body: 17pxCaption: 14px

The Modular Scale method uses mathematical precision in order to generate font sizes. However, it’s only a guide. Use this method as a starting point and then adjust sizes with your eye.

Create a typography styleguide

The last step of the process is to create a styleguide for your typography to help standardize type across your designs.

In programs like Sketch, you can create shared text styles to quickly insert text with styles already applied from your guideline.

It’s during this step of the process that you can tweak and finalize your text attributes such as color, weight, and size.

A word on color: when choosing color, take into account your color palette. Choose colors for your type that harmonize with your color palette.

In your styleguide, make sure to at least include the following things: font definitions, font sizes, font colors, and example usages.

Google’s Material Design typography guidelines is a good example of what to include in a styleguide. A couple of other examples includes the typography guides of Mailchimp, Apple, and Focus Labs.

Typography is all about experimentation. It’s both a science and an art.

I challenge you to break out of your comfort zone and explore type in your design.

What are your favorite fonts? Leave me a note or send me a tweet on Twitter.

If you enjoyed this article, you might also enjoy CSS in Javascript with Aphrodite, a library by Khan Academy.

CSS in Javascript: The future of component based styling

Αυτή την εβδομάδα, θέλω να σας παρουσιάσω την έννοια του CSS στο Javascript με το Aphrodite από την Khan Academy. Η Αφροδίτη επιτρέπει… medium.com

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

PS Αν σας άρεσε αυτό το άρθρο, θα σήμαινε πολλά αν κάνετε κλικ στο? και μοιραστείτε με φίλους.