Κατανόηση της τυπογραφικής γραφής για το διαδίκτυο

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

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

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

Μετρήστε τις παραγράφους σας

Δεν θα χρειαστεί να βγείτε από το ραβδί αυλής για αυτό το είδος μέτρησης. Στην πραγματικότητα, το μέτρο σε σχέση με την τυπογραφία αναφέρεται στο πλάτος (οριζόντια) κάθε δεδομένης παραγράφου στη σελίδα σας. Δεν είναι ένα θέμα που συζητείται πάντα, αλλά επηρεάζει την αναγνωσιμότητα του περιεχομένου σας. Ως γενικός κανόνας, θέλετε να περιορίσετε κάθε ενιαία γραμμή μήκους περίπου 75-85 χαρακτήρων (όχι απαραίτητα συμπεριλαμβανομένων των διαστημάτων).

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

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

Κορυφαίες εξηγήσεις

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

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

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

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

Χρησιμοποιήστε τα μεγέθη φυσικών γραμματοσειρών

Υπάρχει ακόμα μια χούφτα ιστοσελίδων που επιλέγουν να κολλήσουν με μικρότερα από το μέσο μέγεθος γραμματοσειράς. Το 11px-12px μπορεί να φαίνεται πολύ περισσότερο από το “επαγγελματίας” για επιχειρηματικές διατάξεις. Αλλά αυτά τα μεγέθη δεν βοηθούν την πλειοψηφία των επισκεπτών που αναζητούν συγκεκριμένες πληροφορίες.

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

Απαντήστε στο περιβάλλον του χρήστη

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

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

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

Στυλ βασισμένο στο πλαίσιο

Κάποια άλλα πολύ όμορφα κόλπα CSS έχουν κρυφτεί από το mainstream design. Συγκεκριμένα, υπάρχουν τάσεις που αντιγράφονται από την εργασία εκτύπωσης που μπορούν να εφαρμοστούν στο σωστό πλαίσιο.

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

Υπάρχει άλλος τύπος επιλογέα CSS γνωστού ως a ψευδο στοιχείο. Αυτό μπορεί να στοχεύσει σε ένα συγκεκριμένο τμήμα οποιουδήποτε επιλογέα περιεχομένου. Ο ψευδο-επιλογέας CSS3: πρώτου γράμματος είναι ιδανικός για τη δημιουργία φανταχτεριών μορφών σε σημαντικές παραγράφους. Μπορείτε να τζαζω την αρχική επιστολή κάθε παραγράφου - παρόμοια με μια ιστορία ιστορίας - χρησιμοποιώντας τολμηρά, πλάγια γράμματα ή ακόμα και την αλλαγή του τύπου. Ελέγξτε αυτό το όμορφο παράδειγμα cap caps που περιλαμβάνει κάποιο επιπλέον CSS κώδικα που μπορείτε να χρησιμοποιήσετε.

Παίζοντας με το γράμμα διαστήματος

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

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

Συχνά χρησιμοποιώ μερικά pixel / σημεία αποστάσεως γραμμάτων σε κεφαλίδες με όλα τα κεφαλαία. Αυτό διαχωρίζει τους μεμονωμένους χαρακτήρες με κάποιο επιπλέον χώρο και εμφανίζεται επίσης ως ένα πολύ καθορισμένο “επικεφαλίδα” Κοίτα. Το αρνητικό διάστημα των γραμμάτων λειτουργεί επίσης στο σωστό πλαίσιο. Εγώ γενικά κολλήσει σε μικρότερες μονάδες, ίσως -0.03em ή -0.1em το πολύ.

Συνδυασμός και αντιστοίχιση γραμματοσειρών

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

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

Επιπλέον, οι γραμματοσειρές sans-serif είναι καθαρότερες και ευκολότερες στο γράψιμο μαζί σε προτάσεις. Αυτό δεν σημαίνει ότι οι γραμματοσειρές serif δεν θα λειτουργήσουν σε παραγράφους. Στην πραγματικότητα υπάρχουν πολλά υπέροχα παραδείγματα! Αλλά μια λίγο-γνωστή έννοια που ονομάζεται x-ύψος είναι ζωτικής σημασίας για τη διάκριση της πολυπλοκότητας ενός τύπου. Από την εξέταση της γραμμής βάσης μιας λέξης-ζεύγους θα πάρετε το πώς αυτές οι γραμματοσειρές θα “χωράω” ο ένας με τον άλλο.

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

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

συμπέρασμα

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

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

Περισσότερο…

Ακολουθούν περισσότερες δημοσιεύσεις σχετικές με την τυπογραφία:

• Παρουσίαση σχεδίων ιστοσελίδων με όμορφη τυπογραφία
• Καλύτερη τυπογραφία για σύγχρονους ιστοτόπους
• Γρήγορος οδηγός για την τυπογραφία: Μάθετε και εμπνευστείτε