10 Κανόνες τυπογραφίας Web Κάθε σχεδιαστής πρέπει να ξέρει
Όταν κάποιος επισκέπτεται έναν ιστότοπο που έχετε σχεδιάσει, οι πιθανότητες είναι ότι δεν ενδιαφέρονται πολύ για τα χρώματα, τις εικόνες ή τους ήχους, κοιτάζουν αμέσως το κείμενο.
Ανεξάρτητα από το πόσες καμπάνες και σφυρίχτρες που έχετε ενσωματώσει σε έναν ιστότοπο, όλοι βασίζονται σε κείμενο για να ολοκληρώσουν ό, τι επισκέπτονται την περιοχή για να κάνουν .
Αυτό μόνο θα πρέπει να κάνει την τυπογραφία, την τέχνη της τοποθέτησης τύπου, προτεραιότητα για οποιονδήποτε σχεδιαστή ιστοσελίδων.
Σε αυτό το άρθρο, ρίχνουμε μια ματιά σε 10 εύκολους κανόνες που πρέπει να έχετε κατά νου όταν σχεδιάζετε το επόμενο web project σας.
1. Διαβάστε μόνοι σας το κείμενο
Με ένα σχέδιο όπως JonesingFor ένας σχεδιαστής χωρίς μεγάλη κατανόηση του κειμένου θα είχε αγωνιστεί να βάλει μαζί την τυπογραφία που κάνει αυτό το site πραγματικά να λειτουργήσει. Καθώς αντιμετωπίζετε τη δική σας τυπογραφία, πιθανώς δεν χρειάζεται να ανησυχείτε για το γράψιμο ενός κειμένου ενός ιστότοπου - αλλά πρέπει να το διαβάσετε!
Ορισμένοι σχεδιαστές ιστοσελίδων πιστεύουν ότι η απλή αντιγραφή και αποτύπωση ενός αρχείου κειμένου αποτελεί το σύνολο των καθηκόντων κειμένου. Αλλά η ανάγνωση μέσω του κειμένου παρέχει τουλάχιστον μια βασική ιδέα για το πώς το κείμενο μπορεί να ενσωματωθεί σε έναν ιστότοπο, αποφεύγοντας την αποσύνδεση μεταξύ της γραφής και του σχεδιασμού μιας ιστοσελίδας.
Μπορείτε να εκτυπώσετε την τυπογραφία σας ακόμα μια άλλη εγκοπή, αν μπορείτε να διαβάσετε μέσω του κειμένου μόλις είναι στη θέση του στο σχεδιασμό σας. Προσέξτε ιδιαίτερα το χώρο γύρω από τα γράμματα . Έχετε κάποιους ασυνήθιστα μεγάλους χώρους που φαίνονται περίεργοι; Μια μικρή προσεκτική τυπογραφία μπορεί να εξαλείψει αυτά τα ζητήματα. Μπορείτε επίσης να πάρετε μια ιδέα των γραμμών που μπορεί να είναι πάρα πολύ καιρό για να διαβάσετε εύκολα, αμήχανα διαλείμματα γραμμών και παρόμοια θέματα.
2. Αφαιρέστε το Lorem ipsum το συντομότερο δυνατό
Νομίζετε ότι θα μπορούσατε να σχεδιάσετε Την ιστοσελίδα του Ιησού Ροντρίγκεζ Βέλασκο χωρίς το πραγματικό κείμενο; Ο ιστότοπος εξαρτάται σε μεγάλο βαθμό από τη γραπτή λέξη - και πολύ συγκεκριμένες λέξεις. Ακόμα και το κείμενο του σώματος έλαβε ιδιαίτερη προσοχή με ένα καπάκι και κάποια άλλη μικροαλλαγές που απλά δεν θα ήταν εφικτό με το Lorem ipsum.
Εκτός αν το κείμενο της ιστοσελίδας σας είναι στην πραγματικότητα Lorem ipsum, ψευδο κείμενο δεν θα φέρει καμία ομοιότητα με το πραγματικό πράγμα . Αυτό σημαίνει ότι τυχόν τσίμπημα που μπορεί να φτιάξετε στο κείμενο - ή το σχέδιο που την περιβάλλει - θα πρέπει να περιμένετε μέχρι να αποκτήσετε το πραγματικό πράγμα. Ζητώντας (και λήψη) κειμένου από τον πελάτη σας όσο το δυνατόν νωρίτερα κατά τη διαδικασία, θα έχετε τη δυνατότητα να ταιριάζει με το γενικό σχέδιο και την τυπογραφία σας.
3. Εμφανίστε μια σαφή ιεραρχία
Όταν φτάσετε Rik Cat Industries , ξέρετε αμέσως πού πρέπει να αρχίσετε να διαβάζετε. Παρόλο που υπάρχουν μερικές συνδέσεις στην κορυφή της σελίδας, η υποδοχή του Rik αγγίζει πρώτα το μάτι σας. Είναι πολύ μεγαλύτερο, χρησιμοποιώντας τη τυπογραφία για να καθιερώσει μια σαφή ιεραρχία .
Κάθε τοποθεσία χρειάζεται μια καλά αναπτυγμένη ιεραρχία: δείκτες για το πού να αρχίσει η ανάγνωση και πώς να προχωρήσει. Η τυπογραφία σας μπορεί να παρέχει αυτή την ιεραρχία - όπως ακριβώς κάνει και ο Ρικ - όσο γνωρίζετε την ιεραρχική σειρά σας μπροστά από το χρόνο. Με τη σκέψη για το μέγεθος και τις γραμματοσειρές, μπορείτε να επισημάνετε ένα κομμάτι κειμένου ως τίτλο με τρόπο που διαφορετική τοποθέτηση στο σχεδιασμό δεν μπορεί να παράσχει.
Η ιεραρχία του σχεδιασμού σας ξεπερνά μόνο τη τυπογραφία που χρησιμοποιείτε, φυσικά, αλλά επειδή οι χρήστες σχεδόν πάντα ξεκινούν με το κείμενο, έχει νόημα για τους σχεδιαστές να κάνουν το ίδιο.
4. Δώστε προσοχή τόσο στη μακρογραφία όσο και στην μικρο τυπογραφία
Στηριζόμενοι αποκλειστικά στην τυπογραφία για την πρώτη τους σελίδα, το Crowley Webb και συνεργάτες του ο ιστότοπος σχεδιάστηκε με δύο παράγοντες: το μάκρο και τη μικρο τυπογραφία .
Η μακρογραφική τυπογραφία είναι η γενική δομή του τύπου σας, πώς εμφανίζεται στο πλαίσιο του σχεδιασμού και της αισθητικής σας όταν θεωρείτε το κείμενό σας ως ένα μπλοκ από μόνο του.
Η μικροτυπογραφία ασχολείται περισσότερο με τις λεπτομέρειες της απόστασης, τα ζητήματα που καθορίζουν αν οι λέξεις είναι ευανάγνωστες. Η μικρο τυπογραφία είναι απόλυτη αναγκαιότητα όταν πρόκειται για τη δημιουργία ενός μπλοκ κειμένου: αν δεν είναι ευανάγνωστο, δεν έχει νόημα να προχωρήσουμε. Ο Crowley Webb και Associates απευθύνθηκε σε αυτή την ερώτηση τόσο προσεκτικά όσο και διαχωρίζοντας τις λέξεις που θα τονίσει ο ιστότοπος.
Αλλά η μακρο-τυπογραφία σας δίνει την ευκαιρία να κάνετε το κείμενό σας περισσότερο από πολύ καλά: είναι η ευκαιρία να φανεί ελκυστική και ένα μέρος ολόκληρου του σχεδίου σας . Η επιλογή των γραμματοσειρών και των χρωμάτων σε αυτόν τον ιστότοπο δημιουργεί ένα βιώσιμο σύνολο. Η αγνοία της κάθε πλευράς της τυπογραφίας είναι επιζήμια.
5. Προσέξτε με τα χρώματα τύπου
Θα ήταν τόσο εύκολο να χάσετε κείμενο στο παρασκήνιο ArtofElan , ειδικά το έντονο κόκκινο σε σκούρο κόκκινο συνδυασμό που χρησιμοποιείται από τον σχεδιαστή. Όταν ένας σχεδιαστής ιστοσελίδων λειτουργεί με έγχρωμο τύπο, φροντίδα είναι απολύτως απαραίτητη, δεν υπάρχει καμία εγγύηση ότι θα είναι ορατό ένα κόκκινο σε κόκκινο συνδυασμό ή ακόμα και ένας κίτρινος σε κόκκινο συνδυασμός . Μετά από όλα, ο καθένας έχει επισκεφθεί μια ιστοσελίδα όπου το κείμενο φαινόταν να είναι μόνο μια σκιά μακριά από το χρώμα του φόντου και να πάρει μια περίπτωση των ματιών στέλεχος όταν προσπάθησαν να το διαβάσετε.
Η πιο εύκολη λύση για αυτή την κατάσταση είναι να βεβαιωθείτε ότι το χρώμα του τύπου σας είναι δραστικά διαφορετικό από αυτό του φόντου σας . Οι ασπρόμαυρες δουλειές είναι τόσο καλά, επειδή είναι τόσο διαφορετικές όσο μπορείτε, αλλά υπάρχουν κάποιες χρωματικές συνδυασμοί που λειτουργούν καλά: κάτι από τη γραμμή ενός σκούρου μπλε σε ένα ανοιχτό ροζ θα κάνει τη δουλειά. Το ανατρεπτικό κείμενο είναι πολύ δύσκολο ... ενώ μπορείτε να εργαστείτε με ανοιχτό ροζ κείμενο σε σκούρο μπλε φόντο, έχετε περισσότερες πιθανότητες να υποβάλετε μια καταγγελία γι 'αυτό.
6. Πάρτε σοβαρά το CSS σας
Εάν το CSS σας είναι σταθερό, μπορείτε να μετακινηθείτε μεταξύ των σελίδων του ιστότοπού σας απρόσκοπτα, όπως και οι διαφορετικές εκδόσεις του Hutchouse.com να βασίζονται σε διαφορετικά φύλλα στυλ για να δημιουργήσουν κάποια εντυπωσιακά αποτελέσματα. Ακόμα κι αν δεν παίρνετε τα πράγματα μέχρι το Hutchhouse, το CSS μπορεί να βοηθήσει στην εξάλειψη των προβλημάτων ερασιτεχνικής τυπογραφίας όπως η αλλαγή γραμματοσειρών και μεγεθών μεταξύ των σελίδων.
Το CSS μπορεί να παρέχει εύκολη συνέπεια μεταξύ της τυπογραφίας σας σε ολόκληρο τον ιστότοπο . Εάν είστε συνεπείς με τον τρόπο που χρησιμοποιείτε τον τύπο, ωστόσο, σπάζοντας αυτή τη συνέπεια, ακόμη και ένα μικρό ποσό μπορεί να κάνει ό, τι θέλετε να επισημάνετε πραγματικά ξεχωρίζουν, όπως ακριβώς η ίδρυση και στη συνέχεια η διακοπή ενός πλέγματος μπορεί να κάνει για έναν αποτελεσματικό σχεδιασμό. Στην τυπογραφία Ιστού, η διατήρηση των γραμματοσειρών σας συνεπής μπορεί να είναι ένα απλό θέμα του CSS.
7. Χαράξτε το κεντροποιημένο κείμενο
Επιλέγοντας μια εναλλακτική λύση στο κεντροποιημένο κείμενο μπορεί να κάνει ένα σχέδιο ιστοτόπου εύκολο να διαβάσει , ακριβώς όπως DesignCanChange.org . Η επιλογή του κεντρικού κειμένου, ειδικά σε μια σελίδα όπως αυτή, θα δημιουργούσε μια προβληματική σελίδα: οι οδοντωτές ακμές που κεντράρουν δημιουργούν σε κάθε πλευρά, καθιστούν πολύ πιο δύσκολο να διαβαστούν και υπάρχουν πολλές ευκαιρίες για τέλεια κεντροποιημένο κείμενο που τελειώνει και στρεβλώνει το υπόλοιπο τα σχέδιά σας σε διαφορετικές οθόνες.
Σε μερικούς κύκλους, ο κεντρικός τύπος είναι μόνο ένα βήμα παραπάνω από τη χρήση του Comic Sans σε ένα σχέδιο ιστοτόπου. Ίσως το θεωρήσετε ως τίτλο, αλλά γενικά, η ευθυγράμμιση του κειμένου σας προς τα αριστερά θα κάνει τους αναγνώστες σας πιο άνετους, εκτός αν διαβάζουν από δεξιά προς τα αριστερά .
8. Αντιμετωπίστε έξυπνα αποσπάσματα και άλλα σύμβολα
Ο Luigi Ottani site παρουσιάζει την προσεκτική προσοχή στα εισαγωγικά και άλλα σύμβολα που θα σας φτάσει: μια πλήρης έλλειψη προβλημάτων όταν ο ιστότοπος εμφανίζει αυτά τα σύμβολα. Πολλοί ιστότοποι είναι διακεκομμένοι με σύμβολα που ένα πρόγραμμα περιήγησης δεν μπορεί να εμφανίσει Είναι μια κληρονομιά του γεγονότος ότι το μεγαλύτερο μέρος του κειμένου με το οποίο συνεργάζεται ένας σχεδιαστής ιστοσελίδων ήταν πιθανότατα γραμμένο στο Microsoft Word ή σε άλλο κομμάτι λογισμικού επεξεργασίας κειμένου που κάνει όλα τα είδη μικρών αλλαγών στο κείμενο χωρίς ο συγγραφέας να δίνει μεγάλη προσοχή.
Μία από τις χειρότερες αλλαγές είναι τα έξυπνα εισαγωγικά: τα σγουρά μάρτυρα Word αντικαθιστά αυτόματα τα ευθεία εισαγωγικά . Ένας άλλος προβληματικός τομέας έρχεται όταν εργάζεστε με κείμενο γραμμένο σε άλλη γλώσσα: οι προεκτάσεις και τα umlats μπορούν να προκαλέσουν εξίσου μεγάλη δυσκολία με τη χρησιμότητα του Word. Εάν απλά αντιγράφετε και επικολλάτε κείμενο με τέτοιες αλλαγές στο σχέδιό σας, θα χρειαστεί να επιστρέψετε και να τα διορθώσετε αργότερα, τουλάχιστον για ορισμένα προγράμματα περιήγησης ιστού.
Αντ 'αυτού, να τους πάρει νωρίς στη διαδικασία σχεδιασμού, ώστε να μπορείτε να εστιάσετε στο να κάνετε το κείμενό σας να ταιριάζει καλύτερα με το σχέδιό σας . Αν θέλετε αυτά τα φανταστικά σύμβολα και τα έξυπνα αποσπάσματα να εμφανίζονται στο τελικό σχέδιο, ξεσπάστε τις οντότητες HTML.
9. Προγραμματίστε να μεγαλώσετε το κείμενό σας
Όταν αυξάνετε το μέγεθος του κειμένου Veerle Pieters ' ιστοσελίδα, δεν είναι αρκετά όμορφη από ό, τι αν χρησιμοποιείτε το μέγεθος γραμματοσειράς που επέλεξε. Ωστόσο, μπορείτε να διαβάσετε τα πάντα, να εντοπίσετε συνδέσμους και ούτω καθεξής, κάτι που ισχύει για πολύ λίγους ιστότοπους.
Αυτό συμβαίνει επειδή, εν μέρει, πολλοί σχεδιαστές βεβαιωθείτε ότι έχετε σχεδιάσει το κείμενο σε γραμματοσειρά 10 σημείων ή ακόμη μικρότερο. Οι περισσότεροι άνθρωποι είναι άνετοι να διαβάζουν τέτοιες γραμματοσειρές, αλλά οι Baby Boomers αποτελούν ένα τεράστιο τμήμα του πληθυσμού που περιηγεί στον ιστό και πολλοί από αυτούς τους ηλικιωμένους χρήστες surfer θα έχουν τα προγράμματα περιήγησης που έχουν ρυθμιστεί ώστε να εμφανίζουν τον τύπο όσο το δυνατόν . Το κείμενό σας, καθώς και ο σχεδιασμός σας, πρέπει να είναι σε θέση να προσαρμοστούν σε αυτό το γεγονός.
Αξίζει επίσης να λάβετε υπόψη ότι το μέγεθος του προγράμματος περιήγησης μπορεί να ποικίλει δραματικά , μετακινώντας το κείμενο σε απροσδόκητες τοποθεσίες, αν δεν είστε προσεκτικοί. Αν το χτύπημα του μεγέθους σε ένα σημείο δημιουργεί προβλήματα, αυτό το παλαιότερο δημογραφικό θα μεταβεί στον επόμενο δικτυακό τόπο σε μια βιασύνη. Έχοντας να μετακινηθείτε για πάντα στο πλάι θα έχει ένα παρόμοιο αποτέλεσμα.
10. Προβολή προτιμήσεων για sans serif
Αν κοιτάξετε το A List Apart ιστοσελίδα, σχεδόν κάθε μεγάλο μπλοκ του κειμένου τίθεται σε μια τυπωμένη ύλη sans serif, καθιστώντας την πολύ πιο εύκολη στην ανάγνωση. Οι επικεφαλίδες και άλλα μικρότερα τμήματα κειμένου παρουσιάζονται σε γραμματοσειρές γραμματοσειρών, δημιουργώντας ισορροπία μεταξύ των δύο.
Όταν πρόκειται για την τοποθέτηση κειμένου σε μια οθόνη, οι γραμματοσειρές sans serif είναι σχεδόν πάντα το καλύτερο στοίχημα , ειδικά αν επιλέξετε μια γραμματοσειρά όπως η Verdana που σχεδιάστηκε για προβολή σε οθόνη υπολογιστή. Οι σειρές γραμματοσειρών έχουν μεγαλύτερες πιθανότητες εμφάνισης ανεπαρκών γραμμών, θολών ή ακόμη και pixelated.
Δεν είναι δυνατόν να αποφύγουμε εξ 'ολοκλήρου τις σερφ, φυσικά. Αλλά για μεγάλα τετράγωνα κειμένου, χρησιμοποιώντας μια γραμματοσειρά χωρίς serifs μπορεί να προσφέρει ένα επιπλέον επίπεδο εγγύησης ότι οι επισκέπτες θα μπορούν εύκολα να διαβάσουν το κείμενο ενός ιστότοπου. Όταν επιλέγετε γραμματοσειρές για ένα έργο, αναζητήστε πρώτα τις επιλογές sans serif .
Ένα τελευταίο σχόλιο
Η τυπογραφία μπορεί εύκολα να παραβλεφθεί και ακόμα και όταν το σχεδιάζει ο σχεδιαστής, είναι εύκολο να διαγραφεί ως δραστηριότητα έντασης χρόνου με ελάχιστη απόδοση. Αλλά η δαπάνη ακόμη και μερικά λεπτά με το κείμενο που θα είναι το κεντρικό στοιχείο του σχεδίου σας μπορεί να μεταμορφώσει από κάτι που οποιοσδήποτε σχεδιαστής ιστοσελίδων θα μπορούσε να χτυπήσει σε μια σελίδα σε ένα στοιχείο που υποστηρίζει το υπόλοιπο του σχεδίου.
Γράφτηκε αποκλειστικά για WDD από την Πέμπτη Bram.
Ακολουθείτε αυτούς τους κανόνες και άλλους; Υποβάλετε τις απόψεις σας παρακάτω ...