Μια ματιά στην καλύτερη τυπογραφία για τους σύγχρονους ιστοχώρους

Το ψηφιακό κείμενο μπορεί να μορφοποιηθεί σε τόσες γεύσεις. Με την περαιτέρω εξέλιξη των γραμματοσειρών web και των σεναρίων περιήγησης, έχουμε δει νέο κώδικα έργου για τους προγραμματιστές που θα χρησιμοποιήσουν. Οι σχεδιαστές ιστοσελίδων, επίσης, αναζητούν την καλύτερη στρατηγική για τον κώδικα των ιστότοπων τους και την οικοδόμηση ενιαίου τυπογραφικού στυλ μεταξύ όλων των σελίδων τους.

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

Παρακάτω θα πάω σε μερικές φανταστικές ιδέες για επίδοξους σχεδιαστές τυπογραφίας που ενδιαφέρονται να οικοδομήσουν για το διαδίκτυο. Τα blogs, τα κοινωνικά δίκτυα και οι επιχειρήσεις προσπαθούν πάντα να ενημερώσουν την τρέχουσα ιστοσελίδα τους. Και τα στυλ CSS για τυπογραφία στο διαδίκτυο αποτελούν μια εξαιρετική πηγή για να αρχίσετε να ανανεώνετε τις σελίδες σας.

Διαφορές στο σημερινό Διαδίκτυο

Ο σύγχρονος ιστός έχει εξελιχθεί δραματικά από τις αρχές του 2000. Υπάρχουν πολλά νέα χαρακτηριστικά για τους σχεδιαστές ιστοσελίδων για τη δημιουργία φανταστικών έργων γραφιστικής, λογότυπων, πανό και πρακτικά οτιδήποτε άλλο. Η απελευθέρωση των προδιαγραφών HTML5 και CSS3 έχει επίσης επηρεάσει τον παλιό τρόπο δημιουργίας γραμματοσειρών web.

Τώρα είναι εξ ολοκλήρου δυνατό να συμπεριλάβετε τις δικές σας γραμματοσειρές με το CSS @ font-face ιδιοκτησία. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε TrueType(.ttf) ή OpenType(.otf) και αποθηκεύστε ένα αντίγραφο τοπικά στον διακομιστή σας. Στη συνέχεια, με κάποια μαγεία CSS3 συμπεριλάβετε την οικογένεια οπουδήποτε στην ιστοσελίδα σας!

Μόνο με αυτήν την τεχνική είναι δυνατόν να δούμε πόσο εξελίχθηκε το σύγχρονο Διαδίκτυο μας.

Και με το jQuery αυξάνεται σε δημοτικότητα κάθε μέρα δεν αποτελεί έκπληξη ότι μπορούμε να δημιουργήσουμε εκπληκτικά εφέ κίνησης σε συνδυασμό με προσαρμοσμένες γραμματοσειρές. Ως εναλλακτική λύση στη μέθοδο πάνω από το plugin TTFGen για το jQuery, μπορείτε να συμπεριλάβετε οποιαδήποτε γραμματοσειρά TrueType στην ιστοσελίδα σας.

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

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

Ο σκοπός της ψηφιακής τυπογραφίας

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

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

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

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

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

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

Κεφαλίδες ιστοσελίδων

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

προς το

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

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

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

Για παράδειγμα, το δικό σου

οι ετικέτες θα πρέπει να ξεχωρίζουν τις περισσότερες μεταξύ όλων των τίτλων σελίδας σας.

και

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

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

Δημιουργία μοναδικών υπερσυνδέσμων

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

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

Όταν πρόκειται να στυλ σας συνδέσεις θα πρέπει να εξετάσετε τα ακόλουθα - πώς θα εμφανιστούν οι αλλαγές στη ρύθμιση της σελίδας σας, τι είδους χρώμα φόντου εργάζεστε, και τι χρώμα είναι το κείμενο για αντίθεση?

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

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

Κατασκευή λιστών με στυλ

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

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

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

Πώς να δημιουργήσετε προσφορές στην σελίδα

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

Ο ιστότοπος HTML5 Doctor περιλαμβάνει έναν συναρπαστικό πόρο για τη συζήτηση αυτού του ακριβούς θέματος. Συζητούν τη χρήση περιεχομένου μέσα σε blockquotes όπως εμφανίζονται εσωτερικά στη δομή του εγγράφου. Έτσι, μπορείτε να συμπεριλάβετε επικεφαλίδες, παραγράφους και ακόμη και λίστες και υποσέλιδα. Η κύρια χρήση ενός