5 απλοί τρόποι βελτίωσης της τυπογραφίας του ιστού
Ο τύπος είναι ένα από τα πιο χρησιμοποιημένα στοιχεία του ιστού. Σκέψου το. Αν δεν είστε το YouTube ή το Flickr, οι πιθανότητες είναι ότι οι επισκέπτες του ιστότοπού σας έρχονται για το περιεχόμενο του κειμένου σας - όχι για την περίφημη συσκευασία που το περιβάλλει. Γιατί λοιπόν οι σχεδιαστές ιστοσελίδων εξακολουθούν να επεξεργάζονται κείμενο ως δευτερεύον στοιχείο;
Η καλή τυπογραφία φέρνει τη σειρά στη σελίδα και αυξάνει την αναγνωσιμότητα . Επιτρέπει στους ανθρώπους να επεξεργάζονται τις πληροφορίες πιο γρήγορα.
Ένας πιο σαρωτός, ευανάγνωστος ιστότοπος σημαίνει ευχαριστημένοι επισκέπτες. Οι ευχαριστημένοι επισκέπτες επιστρέφουν συχνά, αγοράζουν προϊόντα, αφήνουν σχόλια και μοιράζονται το site με φίλους. Δείτε γιατί μπορεί να αξίζει να σκεφτείτε;
Θα μπορούσα να μιλήσω για το πόσο μακριά έχει έρθει η τυπογραφία στο διαδίκτυο και πόσο ακόμα πρέπει να πάει. Έχω συχνά αναπήδηση μεταξύ web και εκτύπωσης. Όταν πηγαίνετε από το InDesign στο TextMate, οι περιορισμοί του τύπου ιστού είναι ξεκάθαροι .
Αλλά πολλά έχουν ειπωθεί για το τι τύπος ιστού δεν μπορεί να κάνει. Αυτό δεν πρόκειται να γίνει άλλο. Αντ 'αυτού, ας επικεντρωθούμε σε 5 εύκολες διορθώσεις για τα τυπογραφικά βλέμματα που αφθονούν στον ιστό.
1. Χρησιμοποιήστε το A Reset Stylesheet
Σωστή, αλλά αληθινή: Δεν υπάρχουν δύο προγράμματα περιήγησης που χρησιμοποιούν τις ίδιες προεπιλογές εμφάνισης. Οι διαφορές στο παρελθόν, στα περιθώρια, στις επικεφαλίδες και στις οδοντώσεις είναι ανεξέλεγκτες. Αν θέλετε η διάταξη της σελίδας σας να είναι πιο συνεπής σε όλα τα προγράμματα περιήγησης, πληρώνετε για να ξεκινήσετε με ένα φύλλο στυλ CSS Reset.
Δύο συνιστώ:
Το CSS Reset Stylesheet της Yahoo
Το CSS Reset Stylesheet του Eric Meyer
2. Παρακολουθήστε το μέτρο σας
Το μέτρο αφορά το μήκος μίας μόνο γραμμής τύπου. Μια μακρύτερη γραμμή = ένα μακρύτερο Μέτρο. Μελέτες έχουν δείξει ότι για βέλτιστη αναγνωσιμότητα, οι στήλες κειμένου που τρέχουν, όπως το κυρίως αντίγραφο του σώματός σας, πρέπει να είναι κάπου μεταξύ 45 - 75 χαρακτήρων (30-50 ems) συμπεριλαμβανομένων των διαστημάτων . Αυτός είναι ένας από τους λόγους για τους οποίους τα σχέδια ρευστών (εκείνα στα οποία οι στήλες επεκτείνονται και συστέλλονται για να ταιριάζουν στο πλάτος του προγράμματος περιήγησης) είναι πιο σκληρά στα μάτια.
Επιπλέον, η ηγετική θέση σας θα πρέπει να αυξηθεί με το μήκος του Μέτρου σας . Η κορυφή είναι η ποσότητα του λευκού χώρου μεταξύ των γραμμών του κειμένου και ελέγχεται μέσω της ιδιότητας γραμμής-ύψους CSS. Αν χρειαστεί να χρησιμοποιήσετε ένα πολύ μακρύ Μέτρο, βεβαιωθείτε ότι το ηγέτης σας ανοίγει.
Ομοίως, εάν έχετε μια μικρή στήλη, όπως μια πλαϊνή μπάρα με ένα σύντομο Μέτρο, η κορυφή σας θα πρέπει να είναι αυστηρότερη. Βρίσκω την προεπιλεγμένη τιμή που τα περισσότερα προγράμματα περιήγησης είναι λίγο πιο σφιχτά. Ένα ύψος γραμμής περίπου 1,4μ λειτουργεί καλά για το μεγαλύτερο μέρος του σωματικού περιεχομένου.
3. Τείνουμε στο διάστημα μεταξύ
Δεν πρόκειται μόνο για το κείμενο σας - για τον χώρο που το περιβάλλει. Ο υπερβολικά μικρός χώρος κάνει το κείμενο δύσκολο να το διαβάσει, αλλά το κάνει πάρα πολύ. Το κλειδί είναι να βρείτε μια απλή ισορροπία που καθοδηγεί το μάτι από το ένα στοιχείο στο άλλο.
Ένα από τα κοινά λάθη που κάνουν οι νέοι σχεδιαστές είναι να γεμίσουν κάθε ίντσα του χώρου. Ο λευκός χώρος αναφέρεται στον κενό ή τον "αρνητικό" χώρο γύρω από το περιεχόμενό σας και είναι κρίσιμο. Ρίξτε μια ματιά σε ένα καλά σχεδιασμένο περιοδικό όπως το Dwell ή το Good και θα δείτε ότι ακόμα κι αν κοστίζει ο εκδότης χρήματα για να εκτυπώσει κάθε σελίδα, αφήνουν άφθονα ποσά λευκού χώρου γύρω από το κείμενο. Η σελίδα θα είναι ισορροπημένη και το μάτι σας θα μετακινηθεί αποτελεσματικά από το διάστημα στο διάστημα.
Εκτός από την προσαρμογή του ύψους της γραμμής σας (όπως αναφέρεται στο # 1), δοκιμάστε να αυξήσετε τα περιθώρια και τα περιθώρια . Εκτός αν προσπαθείτε να τραβήξετε ένα τρελό οπτικό τέχνασμα, θα πρέπει πάντα να υπάρχει ένα καλό ποσό λευκού χώρου γύρω από το κείμενό σας. Μην το αφήνετε να γλιστράει ενάντια σε άλλα στοιχεία, ειδικά εικόνες. Αφήστε το περιεχόμενό σας κομμάτια (επικεφαλίδες, παραγράφους, sidebars, κλπ.) Αναπνέουν.
Ο Mark Boulton έγραψε ένα πολύ ενημερωτικό άρθρο σχετικά με Λευκός χώρος για A List Apart, ελέγξτε το.
4. Μην πηγαίνετε γραμματοσειρά Crazy
Ένας καλός κανόνας για κάθε σχεδιαστή είναι: χρησιμοποιήστε όχι περισσότερες από δύο γραμματοσειρές αντιμετωπίζει το σχέδιό σας. Δύο πρόσωπα γραμματοσειράς μπορούν να φαίνονται πολύ κομψά. Μια λίστα εκτός χρησιμοποιεί παραλλαγές της Γεωργίας και της Verdana για να δημιουργήσει μια κομψή και στιλβωμένη εμφάνιση. Αλλά συνεχίζοντας να προσθέτετε πρόσωπα γραμματοσειρών στο περιβάλλον εργασίας σας δημιουργεί περιττή σύγχυση. Ομοίως, αποφύγετε τη χρήση πάρα πολλών γραμματοσειρών, χρωμάτων ή επεξεργασιών σε μια σελίδα ή σε μια παράγραφο ή θα ανταγωνίζονται μεταξύ τους αντί να προσθέτουν έμφαση όπως προβλέπεται.
Αν και γραμματοσειρές και τεχνολογίες όπως sIFR και Typeface.js σας επιτρέπουν να καθορίσετε ακριβώς για κάθε γραμματοσειρά που θέλετε ως προεπιλογή, αντισταθείτε στον πειρασμό να πάτε άγρια με το αντίγραφο του σώματος. Διακοσμητικές γραμματοσειρές τα καλύτερα διατηρούνται στους τίτλους, διότι επηρεάζουν την αναγνωσιμότητα. Σκεφτείτε το - πότε είναι η τελευταία φορά που πήρατε ένα χαρτόδετο βιβλίο που έχει τοποθετηθεί εξ ολοκλήρου σε Comic Sans;
Όταν δημιουργείτε στοίβα γραμματοσειρών, δώστε προσοχή στο μέγεθος των ζευγαριών σας. Ορισμένες γραμματοσειρές που φαίνονται παρόμοια εμφανίζονται σε πολύ διαφορετικά μεγέθη. Η Verdana και η Arial είναι ένα εξαιρετικό παράδειγμα αυτού. Τύπος είναι ένα εξαιρετικό εργαλείο για τη σύγκριση βασικών γραμματοσειρών web και τη δημιουργία μιας επιτυχημένης στοίβας. Ένα άλλο χρήσιμο εργαλείο που ονομάζεται Γραμματοσειρά Stack Builder σας δείχνει ποιο ποσοστό των χρηστών θα δει κάθε παραλλαγή.
Ανεξάρτητα από τις ποιες γραμματοσειρές αποφασίζετε να χρησιμοποιήσετε, βεβαιωθείτε ότι δεν είναι μικροσκοπικές. Ξέρω το σκληρό ... μικρό του κείμενο φαίνεται δροσερό. Αλλά σκεφτείτε τους φτωχούς, τους ανθρώπους που σκοντάφτουν! Κρατήστε το κείμενο κορμού πάνω από 10 ή 12 pixel. Αν επιμείνετε στο μικροσκοπικό μικροσκοπικό, χρησιμοποιήστε τουλάχιστον σχετική μεγέθυνση για όλους εκείνους τους χρήστες του IE 6.0 που διαφορετικά δεν θα μπορούσαν να το κάνουν μεγαλύτερο. Ανάγνωση Το άρθρο του Wilson Miner σχετικά με τα μεγέθη γραμματοσειρών για μεγάλη συμμετοχή στη συζήτηση.
5) Μην παραμελούν τα στοιχεία
Ο πελάτης παρείχε το περιεχόμενο. Η προσθήκη του στον ιστότοπο είναι απλώς θέμα αντιγραφής και επικόλλησης, σωστά; Λάθος, λάθος, λάθος. Αυτό είναι ένας σχεδιαστής ιστοσελίδων παγιδεύουν πάρα πολύ συχνά.
Ακόμη και όσοι από εμάς προσθέτουμε επιμελώς ετικέτες κλάσης, διαμορφώνουμε κάθε παράγραφο και οργανώνουμε τις λίστες με κουκκίδες με προσοχή, ξεχνάμε κάποιες σημαντικές τυπογραφικές λεπτομέρειες. Πολλοί (και εγώ) έχασαν την επίσημη κατάρτιση τυπογραφίας, οπότε δεν μπορείτε να μας κατηγορήσετε εξ ολοκλήρου. Αλλά ο διάβολος βρίσκεται στις λεπτομέρειες. Ο χρόνος που αγκαλιάζουμε αυτά τα βασικά:
Χρησιμοποιήστε έξυπνα αποσπάσματα
Ποια είναι η διαφορά ανάμεσα σε έξυπνα αποσπάσματα και χαζή αποσπάσματα; Τα έξυπνα αποσπάσματα (επίσης γνωστά ως βιβλία ή σγουρά ) είναι καμπύλα και έχουν και ένα στυλ ανοίγματος και κλεισίματος. Οι αλλοιώσεις ( ευθείες ) είναι συνήθως ευθείες προς τα πάνω και προς τα κάτω. Ένα απόστροφο είναι τυπογραφικά απλώς ένα μόνο απόσπασμα, έτσι ισχύει το ίδιο πρόβλημα. Μια χαζέτα παραπομπή (που ονομάζεται επίσης πρωταρχική ) πρέπει να χρησιμοποιείται μόνο μεταξύ μετρήσεων. Για παράδειγμα, το 6'4 "χρησιμοποιεί διπλά και μοναδικά πρωταρχικά εισαγωγικά.
Δυστυχώς, τα πληκτρολόγιά μας προεπιλογώνουν τα βασικά αποσπάσματα. Το Microsoft Word και άλλοι συντάκτες κειμένων απλώς διορθώνουν τα για εμάς καθώς γράφουμε. Η προσθήκη έξυπνων εισαγωγικών σε σελίδες HTML απαιτεί περισσότερη δουλειά από τον προγραμματιστή ιστού, επειδή πρέπει να χρησιμοποιήσετε τη σήμανση για την παραγωγή συμβόλων ανοίγματος και κλεισίματος. Βλέπω το ίδιο πρόβλημα με em και en-dashes, ελλείψεις, εμπορικά σήματα και σύμβολα πνευματικών δικαιωμάτων. Οι κωδικοποιητές παίρνουν την εύκολη διέξοδο αντικαθιστώντας τους με παύλες, πολλαπλές περιόδους, ένα μεγάλο TM και το περίφημο (C). Η χρήση των σωστών συμβόλων κάνει μια διαφορά οπτικά. Κάνετε το σωστό και κάνετε τους συντάκτες παντού χαμόγελο.
Πώς να κάνετε έξυπνα αποσπάσματα:
#8216; = άνοιγμα ενιαίας προσφοράς
’ = κλείσιμο ενιαίας προσφοράς
“ = άνοιγμα διπλής τιμής
” = κλείσιμο διπλής προσφοράς
Ξέρω - κανείς δεν θέλει να περάσει όλη την ημέρα το κυνήγι κάτω αποσπάσματα. Ευτυχώς, εργαλεία όπως Εξυπνάκιας και Textism μπορεί να κάνει μεγάλο μέρος του έργου για εσάς με την αυτόματη μορφοποίηση κειμένου που περιλαμβάνει έξυπνα εισαγωγικά και τα παρόμοια.
Ανάγνωση "Το πρόβλημα με EM και EN" από το A List Apart για περισσότερες λεπτομέρειες σχετικά με το θέμα και την κωδικοποίηση χαρακτήρων UTF-8 για τους περισσότερους συνηθισμένους ειδικούς χαρακτήρες.
Μια προειδοποίηση - πολλοί επεξεργαστές κειμένου CMS (όπως αυτός που χρησιμοποιεί αυτός ο ιστότοπος) δεν θα σας αφήσουν να εφαρμόσετε έξυπνα αποσπάσματα χωρίς πρόσθετα πρόσθετα. Λυπημένος, αλλά αληθινός.
Σταματήστε να τοποθετείτε δύο διαστήματα μετά από μια περίοδο. Σας παρακαλούμε! Δεν είναι απαραίτητο και πραγματικά μάλλον ενοχλητικό.
Στις συνδέσεις σας, χρησιμοποιήστε την κάτω όψη: 1px σταθερή αντί για κείμενο-διακόσμηση: υπογραμμισμένη . Οι υπογραμμίσεις μπορούν να περάσουν μέσα από τους χαρακτήρες descender (g, j, p, q, y) καθιστώντας τους δύσκολο να διαβάσουν, ειδικά όταν χρησιμοποιούν μικρότερα μεγέθη γραμματοσειρών.
Και ενώ δεν έχει καμία σχέση με την τυπογραφία, η εκτέλεση ενός γρήγορου ορθογραφικού ελέγχου ποτέ δεν σκότωσε κανέναν . Ακόμα κι αν το μόνο που κάνατε ήταν να αντιγράψετε και να επικολλήσετε, ένα λάθος ορθογραφίας που μετατοπίζεται σε ένα ζωντανό site αντανακλά άσχημα σε όλους τους εμπλεκόμενους.
Δώστε προσοχή σε αυτές τις 5 διορθώσεις και τα σχέδια του ιστότοπού σας είναι βέβαιο ότι θα βελτιωθούν. Θυμηθείτε ότι αυτά είναι απλά ένα σημείο εκκίνησης. Η καλή τυπογραφία είναι μια μαθητευόμενη δεξιότητα όπως και οτιδήποτε άλλο, και απαιτεί μελέτη και πρακτική . Να προσέχετε πάντα για ιστότοπους που το κάνουν σωστό και σημειώστε τι κάνουν. Χρειάζεστε έμπνευση; Ελέγξτε τις παρακάτω τοποθεσίες για παραδείγματα εξαιρετικής τυπογραφίας ιστού και δημοσιεύστε παραδείγματα που θεωρείτε ότι είναι εμπνευσμένα.
Έμπνευση Τύπος:
Γράφτηκε αποκλειστικά για το WDD από τον Mindy Wagner.
Τι πιστεύετε για αυτούς τους απλούς τρόπους βελτίωσης της τυπογραφίας σας; Τους εφαρμόζετε στους ιστοτόπους σας; Θα θέλαμε να σας ακούσουμε!