7 απλοί κανόνες για τη φορητή τυπογραφία
Ίσως έχετε ακούσει ότι η καλή τυπογραφία είναι αόρατη, αλλά είναι πιο ακριβές να πούμε ότι η καλή τυπογραφία καθιστά την πράξη της ανάγνωσης αβίαστη.
Όταν το μάτι ταξιδεύει κατά μήκος μιας γραμμής κειμένου, το κάνει σε άλματα, που ονομάζονται σακκάδες. δεν διαβάζετε γράμματα ή ακόμα και λέξεις, διαβάζετε στιγμιότυπα μερών λέξεων και ο εγκέφαλός σας γεμίζει αυτό που αναμένει να βρει. Εάν ο εγκέφαλος εκπλήσσεται, στέλνει τα μάτια πίσω για να ελέγξει αν η παραδοχή του ήταν σωστή. Η καλή τυπογραφία ελαχιστοποιεί την εργασία που πρέπει να κάνουν τα μάτια σας δημιουργώντας μια ομαλή ροή κατά μήκος της γραμμής.
Οι κινητές συσκευές έχουν εγγενείς προκλήσεις για οποιονδήποτε τυπογράφο: ο χώρος είναι περιορισμένος και το φως του περιβάλλοντος είναι συχνά φτωχές. Αλλά κάνοντας απλές προσαρμογές στις τεχνικές που χρησιμοποιούμε ήδη για τον Παγκόσμιο Ιστό, μπορούμε να βελτιώσουμε την αναγνωσιμότητα σε κινητές συσκευές.
1. Δώστε στον εαυτό σας χώρο
Σε αντίθεση με τη δημοφιλή πεποίθηση, η τυπογραφία δεν αφορά τη διάταξη των μικρών γραμμών που κουνιέται σε μια οθόνη. η τυπογραφία είναι σε μεγάλο βαθμό σχετικά με το χώρο μέσα και γύρω τους.
Η τυπογραφία οφείλει πολύ λιγότερο για να σχηματίσουν γράμματα, παρά για το χώρο που πλαισιώνουν
Για να κατανοήσουμε αυτό, βοηθάει να καταλάβουμε από πού προέρχονται οι γραμματοσειρές: η τρύπα στη μέση ενός 'o' (και ενός 'b', 'c', 'p' κλπ.) Ονομάζεται «μετρητής». ήταν σκαλισμένα από μέταλλο για χρήση στις αρχικές τυπογραφικές πιεστήρια, αυτοί οι μετρητές δημιουργήθηκαν από μια μεταλλική γροθιά που ήταν σκαλισμένη και στη συνέχεια οδηγείται σε ένα πιάτο. Οι πρώτοι σχεδιαστές τύπου δούλευαν πράγματι με τα σχήματα που δεν θα εκτυπώνονταν. Η τυπογραφία οφείλει πολύ λιγότερο για να σχηματίσουν γράμματα, παρά για το χώρο που πλαισιώνουν.
Όταν μιλάμε για ιεραρχία, συνήθως εννοούμε
μέσω του
, και ενδεχομένως στο
. Υπάρχει όμως μια πρόσθετη ιεραρχία που επηρεάζει τη ροή μιας γραμμής ή μιας παραγράφου και αυτή είναι η χωρική ιεραρχία: ο χώρος μεταξύ των γραμμάτων είναι μικρότερος από τον χώρο μεταξύ των λέξεων, ο χώρος μεταξύ των λέξεων είναι μικρότερος από τον χώρο ανάμεσα στις γραμμές και τα εμπρός.
Για βέλτιστη αναγνωσιμότητα στο κινητό, δώστε ιδιαίτερη προσοχή στη χωρική ιεραρχία, η ομαδοποίηση των χαρακτήρων σε λέξεις, γραμμές και παραγράφους με στυλ gestalt είναι ακόμα πιο απαραίτητη στο φυσικό φως.
2. Πάρτε το μέτρο
Το μέτρο είναι το μήκος μιας γραμμής κειμένου. Ή, ακριβέστερα είναι το ιδανικό μήκος για μια γραμμή κειμένου, καθώς είναι σπάνιο ότι κάθε γραμμή ταιριάζει ακριβώς.
Το γενικά αποδεκτό, ιδανικό μέτρο για άνετη ανάγνωση είναι περίπου 65 χαρακτήρες. Το φυσικό μήκος του μέτρου θα εξαρτηθεί από το σχεδιασμό της γραμματοσειράς, την παρακολούθηση (βλ. Παρακάτω) και το ακριβές κείμενο που χρησιμοποιείτε. Οι πρώτοι 65 χαρακτήρες αυτού του άρθρου, που έχουν οριστεί σε PT Serif, είναι 26.875εκ πλάτος, στο Open Sans, 28.4375em, στο Ubuntu, 27.3125em. εάν είχα προσθέσει πλάγιους χαρακτήρες, μικρά καπάκια ή άλλες δωδεκάδες άλλες τυπογραφικές λεπτομέρειες, θα άλλαζε περαιτέρω.
Είναι σπάνιο ότι 65 χαρακτήρες εκτείνονται στην άκρη ενός προγράμματος περιήγησης επιφάνειας εργασίας, αλλά στις περισσότερες κινητές συσκευές 65 χαρακτήρες (αν εμφανίζονται αρκετά μεγάλοι για να είναι ευανάγνωστοι) εκτείνεται πέρα από τα όρια του προγράμματος περιήγησης. Συνεπώς, για κινητές συσκευές, είστε αναγκασμένοι να συρρικνώσετε το μέτρο σας.
Δεν υπάρχει κοινά αποδεκτό πρότυπο για μέτρηση σε οθόνη κινητής τηλεφωνίας, ωστόσο, παραδοσιακά, στενές στήλες κειμένου σε εφημερίδες ή περιοδικά φιλοδοξούν σε 39 χαρακτήρες. Καθώς αυτό το ιδανικό μέτρο έχει δοκιμαστεί εδώ και αιώνες, μας εξυπηρετεί καλά για την κινητή τυπογραφία.
3. Χαλαρώστε, στη συνέχεια σφίξτε το οδηγό
Η κορυφή είναι ο χώρος μεταξύ των γραμμών και, όταν είναι πολύ σφιχτά, κάνει το άλμα από το τέλος μιας γραμμής στην αρχή της επόμενης δύσκολης ακολουθίας. Όταν ρυθμιστεί πολύ χαλαρά, τα κενά μεταξύ των λέξεων θα αρχίσουν να ευθυγραμμίζονται, δημιουργώντας αυτά που συνήθως αναφέρονται ως ποτάμια, διακόπτοντας την ομαλή ροή της γραμμής.
l-r: ιδανικό οδηγός, πολύ σφιχτό, πολύ χαλαρό.
Το συνηθισμένο πρότυπο για την καθοδήγηση είναι περίπου 1.4μ, ωστόσο στην εμπειρία μου είναι πολύ σφιχτό για οθόνες: ένα από τα βασικά χαρακτηριστικά μιας γραμματοσειράς που λειτουργεί καλά στην οθόνη είναι μεγάλοι μετρητές και μεγάλοι μετρητές απαιτούν λίγο επιπλέον οδηγώντας στη διατήρηση της χωρικής ιεραρχίας .
Αντιστρέφοντας αυτόν τον κανόνα, ένα συντομότερο μέτρο απαιτεί λιγότερη καθοδήγηση. Έτσι, ενώ πιθανότατα θα θέσετε τον οδηγό σας λίγο πιο χαλαρό για τα επιτραπέζια στυλ, μην το θυμάστε να το σφίξετε για κινητές οθόνες.
4. Βρείτε το γλυκό σημείο
Όλες οι γραμματοσειρές έχουν τουλάχιστον ένα γλυκό σημείο. ένας συνδυασμός μεγέθους με τον οποίο αναπαράγονται καλύτερα στην οθόνη και το σημείο στο οποίο η αντιπαράθεση που εφαρμόζεται στο πρόγραμμα περιήγησης στρεβλώνει όσο το δυνατόν λιγότερο τον σχεδιασμό της γραμματοσειράς.
Το γλυκό σημείο είναι συνήθως το σημείο στο οποίο τα περισσότερα εγκεφαλικά επεισόδια ευθυγραμμίζονται με το pixel πλέγμα - pixel γραμματοσειρές, αν θυμάστε αυτά, μόνο εργάστηκε όταν μεγέθους στο γλυκό τους σημείο.
Η ρύθμιση μιας γραμματοσειράς στο γλυκό της σημείο έχει ως αποτέλεσμα μεγαλύτερη αντίθεση. Η αντίθεση είναι ιδιαίτερα σημαντική όταν σχεδιάζετε για κινητά λόγω της πιθανότητας να αποσπάται η αντανακλάσεις έξω από το εργαστήρι της συσκευής σας.
Θα διαπιστώσετε ότι οι μικρές προσαρμογές στον οδηγό θα ωθήσουν και θα τραβήξουν γραμμές από ολόκληρα εικονοστοιχεία. Κατά τη γνώμη μου, η αντίθετη ατέλειες οδηγεί σε οθόνες κινητής τηλεφωνίας, οπότε αν χρειαστεί να συμβιβαστείτε και να οδηγήσετε σε γραμμές σε ολόκληρα εικονοστοιχεία, κάντε το.
Η τυπική προσέγγιση για τους σχεδιαστές είναι να βάλουν τύπο χρησιμοποιώντας ένα πλέγμα γραμμής βάσης, αλλά για κινητά πρέπει να χρησιμοποιήσουμε το ύψος x αντί (το x-ύψος είναι κυριολεκτικά το ύψος του μικρού πεδίου «x»). Γνωρίζουμε από τις μελέτες αναγνωσιμότητας ότι ο εγκέφαλος αναγνωρίζει την κορυφή των λέξεων, όχι τον πυθμένα, έτσι ώστε να επιτευχθεί μεγαλύτερη ροή σακχαρώδη, πρέπει να διασφαλίσουμε ότι η κορυφή των χαρακτήρων μας είναι πιο ευθυγραμμισμένη με τα εικονοστοιχεία.
5. Μην χάσετε το κουρέλι σας
Ένα κουρέλι είναι η άκρη ενός μπλοκ κειμένου. Τα περισσότερα από αυτά που διαβάζετε είναι ευθυγραμμισμένα αριστερά (τουλάχιστον για τις γλώσσες που βασίζονται σε λατινικούς χαρακτήρες) και έχουν ως αποτέλεσμα μια άκρη δεξιά .
Όταν τα μάτια σας μεταπηδούν από το ένα άκρο της γραμμής στο επόμενο, ο εγκέφαλος είναι πιο ικανός να κρίνει τη γωνία και την απόσταση του επόμενου άλματος, αν όλα τα άλματα είναι συνεπή - σκεφτείτε ότι το τρέξιμο των βημάτων, είναι πολύ γρηγορότερα αν είναι διαχωρισμένα με συνέπεια. Για το λόγο αυτό, η αριστερή άκρη του κειμένου σας πρέπει να είναι επίπεδη, με κάθε γραμμή να αρχίζει στο ίδιο σημείο (το ακριβώς αντίθετο ισχύει για τις γλώσσες που διαβάζονται από τα δεξιά προς τα αριστερά).
Ως αποτέλεσμα δεν πρέπει ποτέ να ευθυγραμμίζετε περισσότερο από δύο ή τρεις γραμμές κειμένου.
Συχνά, το κείμενο είναι δικαιολογημένο, πράγμα που σημαίνει ότι οι λέξεις στη γραμμή είναι διαχωρισμένες εξίσου έτσι ώστε να μην υπάρχει κουρέλι και στις δύο πλευρές. (Υποψιάζομαι ότι το δικαιολογημένο κείμενο είναι μοντέρνο, επειδή ο αποκρίσιμος σχεδιασμός έχει διδάξει τους σχεδιαστές να σκέφτονται σε μπλοκ.) Το δικαιολογημένο κείμενο οδηγεί σε ασυμβίβαστο κενό, και στις χειρότερες περιπτώσεις οδηγεί σε δυο λέξεις σε μια γραμμή, η οποία είναι σοβαρή. Το πρόβλημα με το αιτιολογημένο κείμενο επιδεινώνεται από βραχύτερο μέτρο, οπότε το αιτιολογημένο κείμενο μπορεί να είναι δυσανάγνωστο στο κινητό.
l-r: αριστερά ευθυγραμμισμένη, ευθυγραμμισμένη στο κέντρο, δικαιολογημένη.
Αν η νοικοκυρά είναι πραγματικά σημαντική για εσάς, τότε κάντε συλλαβή στο κείμενο για να μαλακώσετε το πανί, αλλά ποτέ μην δικαιολογήσετε κείμενο στο κινητό.
Το χαραγμένο δεξί κείμενο έχει επιπλέον πλεονέκτημα για κινητά: το κείμενο διαβάζεται συχνά σε περισπασμούς και οι αναγνώστες συχνά βλέπουν μακριά από το κείμενο - για να ελέγξουν ένα όνομα σταθμού ή για να απαντήσουν σε μια κλήση. Ένα κουρέλι δημιουργεί ένα τυχαίο σχήμα κάτω από τη δεξιά στήλη που βοηθά το μάτι να αλλάξει την τελευταία του θέση, με ελάχιστη επανάληψη ανάγνωσης.
6. Μειώστε την αντίθεση
Ενώ θέλουμε να ενθαρρύνουμε την αντίθεση μεταξύ κειμένου και υπόβαθρου, θέλουμε να το μειώσουμε μεταξύ διαφορετικών επιπέδων τύπου.
Στο κινητό, είναι ορατό και ουσιαστικά λιγότερο κείμενο και έτσι η αντίθεση γίνεται υπερβολική
Ο λόγος για αυτό είναι ότι οι εγκέφαλοί μας κρίνουν τη σημασία με βάση το πλαίσιο. Οι επικεφαλίδες σας μπορεί να είναι δύο, ή ακόμα και τρεις, φορές το μέγεθος του κειμένου του σώματος σας στην επιφάνεια εργασίας, και αυτό λειτουργεί επειδή υπάρχει μεγαλύτερο κείμενο στην οθόνη. Στο κινητό, είναι ορατό και ουσιαστικά λιγότερο κείμενο και έτσι η αντίθεση γίνεται υπερβολική.
Οι περισσότεροι σχεδιαστές χρησιμοποιούν μια ακολουθία Fibonacci κάποιου είδους για το μέγεθος του κειμένου. Για κινητά, σφίξτε τις αναλογίες για να μειώσετε την αντίθεση των μεγεθών τύπου. Για παράδειγμα, αν χρησιμοποιείτε το χρυσό λόγο για να αυξήσετε το μέγεθος πολλαπλασιάζετε κατά 1.618. Για κινητά, πάρτε το μικρότερο ποσοστό και πολλαπλασιάστε με 1.382 αντί.
Οι οθόνες επιφάνειας εργασίας ανεχτούν πιο ακραίες τυπογραφικές κλίμακες από τις οθόνες κινητής τηλεφωνίας.
7. Προσαρμόστε την παρακολούθηση σε κλίμακα
Όταν προσαρμόζουμε τα μεγέθη γραμματοσειράς για κινητά, πρέπει να γνωρίζουμε τις απαραίτητες αλλαγές στην παρακολούθηση.
(Kerning είναι η απόσταση των δύο ζεύγη χαρακτήρων έτσι ώστε ο χώρος μεταξύ τους να είναι οπτικά συνεπής με το χώρο μεταξύ των άλλων χαρακτήρων.Kerning προστέθηκε στη γραμματοσειρά όταν χτίστηκε , και μάλλον χρειάστηκαν μήνες. Αν έχετε επιλέξει μια επαγγελματική γραμματοσειρά, τότε έχει γίνει σωστά και αν πιστεύετε ότι δεν έχει γίνει σωστά, βρείτε μια διαφορετική γραμματοσειρά.)
Η παρακολούθηση δεν είναι πυκνότητα. Η παρακολούθηση είναι το διάστημα των γραμμάτων που εφαρμόζεται σε όλους τους χαρακτήρες της γραμματοσειράς. Συνήθως δεν πρέπει να προσαρμόζετε την παρακολούθηση.
Οι εξαιρέσεις από τον κανόνα αυτό αφορούν μεγάλο κείμενο, όπως επικεφαλίδες και μικρό κείμενο, όπως υποσημειώσεις. Μεγαλύτερο κείμενο απαιτεί λιγότερη παρακολούθηση και το μικρότερο κείμενο απαιτεί περισσότερη παρακολούθηση. Ο πρώτος οφείλεται σε ομαδοποίηση, και ο τελευταίος είναι προς όφελος της αντίθεσης. Αν έχετε κάνει αλλαγές στις επικεφαλίδες ή εάν χρησιμοποιείτε γραμματοσειρά απεικόνισης που συνήθως έχουν πιο στενή παρακολούθηση, ίσως χρειαστεί να χαλαρώσετε την παρακολούθηση λίγο καθώς το μειώνετε.
Περίληψη
Η τυπογραφία είναι ένα σκάφος που οι σχεδιαστές περάσουν μια ζωή χάραξης, ακριβώς επειδή κάθε κείμενο, κάθε τύπος και κάθε τεχνολογία φέρνει νέες προκλήσεις. Δεν υπάρχουν σκληροί και γρήγοροι κανόνες που θα λειτουργούν πάντα σε κάθε δεδομένη κατάσταση.
Όταν επιδιώκετε την αναγνωσιμότητα, υπάρχουν τρεις αρχές που πρέπει να έχετε κατά νου: μια ομαλή ροή κατά μήκος των γραμμών, μια σαφή χωρική ιεραρχία και επαρκή αντίθεση. Αυτό ισχύει ιδιαίτερα για τον ιστό για κινητά.
Δεν υπάρχει κανένας κανόνας που δεν μπορεί να ανατραπεί με την απόδειξη των δικών σας οφθαλμών, αλλά οι κατευθυντήριες γραμμές εδώ θα χρησιμεύσουν ως ένα ιδανικό σημείο εκκίνησης για όμορφα χαραγμένο κείμενο σε κινητές συσκευές.