Μήπως αυτός ο τύπος κάνει το σχέδιό μου να φαίνεται λιπαρό;

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

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

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

Τι είναι μια τυπογραφική κλίμακα;

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

Η κλίμακα βοηθά στον προσδιορισμό του μεγέθους και της τοποθέτησης των στοιχείων κειμένου σε σχέση μεταξύ τους. Για τον σχεδιασμό ιστοσελίδων, συγκεκριμένα, η κλίμακα οπτικού τύπου συχνά αντιστοιχεί σε ετικέτες στο CSS σας (όπως h1, h2, h3, p, και ούτω καθεξής).

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

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

1. Χρησιμοποιήστε ένα βασικό μέγεθος γραμματοσειράς 16 εικονοστοιχείων CSS. Ρυθμίστε το μέγεθος με βάση τις ιδιότητες της γραμματοσειράς που χρησιμοποιείται.
2. Χρησιμοποιήστε μεγέθη σχετικά με το μέγεθος βάσης για να ορίσετε την τυπογραφική κλίμακα.
3. Το κείμενο χρειάζεται κατακόρυφο διάστημα μεταξύ χαρακτήρων. η γενική σύσταση είναι να χρησιμοποιήσετε την προεπιλεγμένη γραμμή-ύψος του προγράμματος περιήγησης 1.2 em.
4. Περιορίστε τον αριθμό γραμματοσειρών που χρησιμοποιούνται και την τυπογραφική κλίμακα.

Δημιουργήστε αρμονία και ρυθμό

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

Έτσι πού ξεκινάτε;

Το UX Matters έχει μερικές από τις καλύτερες διαθέσιμες έρευνες στο ελάχιστο μεγέθη κειμένου ανά συσκευή . Σημειώστε ότι αυτά είναι τα ελάχιστα μεγέθη και καθώς τα μεγέθη κειμένου σώματος συνεχίζουν να αυξάνονται (όπως και η απόσταση μεταξύ γραμμών), πρέπει να λάβετε σοβαρά υπόψη μεγαλύτερα μεγέθη σημείων. Ο Steven Hoober συστήνει να ξεκινήσει τουλάχιστον 40 τοις εκατό μεγαλύτερη από τα συνιστώμενα ελάχιστα. Επιπλέον, οι βελτιωμένες μορφές περιεχομένου μπορούν να φτάσουν έως και 80 τοις εκατό πάνω από το ελάχιστο, αλλά θα πρέπει να είστε προσεκτικοί και με εξαιρετικά μεγάλο τύπο.

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

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

Ο ευκολότερος τρόπος να σκεφτείτε την κλιμάκωση για τίτλους και άλλα μεγαλύτερα στοιχεία δοκιμής λειτουργεί σε ποσοστό βασισμένο στο κείμενο του σώματος. Ενώ κάθε σχεδιαστής έχει ένα διαφορετικό σημείο εκκίνησης, 250 τοις εκατό μεγαλύτερο από το κείμενο του σώματος είναι μια καλή ballpark για τον τίτλο? Το 150 τοις εκατό για το h2, το 75 τοις εκατό για το h3 και το 50 τοις εκατό για στοιχεία όπως τα μπλοκ εισαγωγικά. (Αυτός δεν είναι κανόνας, απλώς ένα σημείο εκκίνησης.)

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

Χαρακτηριστικά και κατευθύνσεις απόστασης

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

• Desktop και μεγάλες συσκευές: 60 έως 75 χαρακτήρες ανά γραμμή
• Τηλέφωνα και μικρές συσκευές: 35 έως 40 χαρακτήρες ανά γραμμή

Σημειώστε ότι η αναγνωσιμότητα σε μικρότερες οθόνες βασίζεται σε λιγότερους χαρακτήρες (μεγαλύτερο κείμενο).

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

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

Συμβουλές για να ξεκινήσετε

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

Η καλύτερη επιλογή είναι να χρησιμοποιήσετε ένα σχέδιο που ανταποκρίνεται στα ερωτήματα των μέσων μαζικής ενημέρωσης. Αυτή είναι η επιλογή σχεδιαστή-προγραμματιστή που θα παρέχει το μεγαλύτερο επίπεδο ελέγχου πάνω στις προδιαγραφές κειμένου. (Για περισσότερες πληροφορίες επιστρέψτε στις παραπάνω προτάσεις Google.)

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

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

3 εργαλεία για να δημιουργήσετε μια κλίμακα τύπου

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

• Πληκτρολογήστε κλίμακα : Εισάγετε κείμενο και παίζετε με επιλογές όπως μέγεθος, κλίμακα και γραμματοσειρά δεξιά στην οθόνη. να ταξινομήσετε το CSS ή να επεξεργαστείτε τον κώδικα απευθείας από το εργαλείο.
• Modular Κλίμακα : Η κλίμακα λειτουργεί σαν ένας κανόνας που βοηθά στον καθορισμό των μεγεθών για τον τύπο. στη συνέχεια, κατεβάστε τα αποτελέσματα ως plugin Sass ή JS ή τα δείτε στην οθόνη.
• Υπολογιστής τυπογραφίας Golden Ratio : Το εργαλείο βελτιστοποιεί το μέγεθος, το ύψος γραμμής, το πλάτος και τους χαρακτήρες ανά γραμμή με τη χρυσή αναλογία

συμπέρασμα

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

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

• ← Γνωρίστε τον άνθρωπο πίσω από το Comic Sans
• Η WeTransfer αποκαλύπτει τη νέα ταυτότητα και το UI της μάρκας →