Ο τυπογραφικός σχεδιασμός παίζει σημαντικό ρόλο στο σχεδιασμό ιστοσελίδων. Το καλά διαμορφωμένο και μορφοποιημένο περιεχόμενο κειμένου βοηθά έναν ιστότοπο να είναι πιο επιτυχημένος δημιουργώντας μια εμπειρία ανάγνωσης που είναι ευχάριστη και εύκολη στην κατανάλωση. Μέρος των προσπαθειών σας για εργασία με τύπο θα είναι να επιλέξετε τις σωστές γραμματοσειρές για το σχέδιό σας και στη συνέχεια να χρησιμοποιήσετε CSS για να προσθέσετε αυτές τις γραμματοσειρές και στυλ γραμματοσειράς στην οθόνη της σελίδας. Αυτό γίνεται χρησιμοποιώντας το λεγόμενο a στοίβα γραμματοσειρών.
Στοίβες γραμματοσειρών
Οταν εσύ καθορίστε μια γραμματοσειρά για χρήση σε μια ιστοσελίδα, είναι μια βέλτιστη πρακτική να συμπεριλαμβάνετε εναλλακτικές επιλογές σε περίπτωση που δεν μπορείτε να βρείτε την επιλογή γραμματοσειράς. Αυτές οι εναλλακτικές επιλογές παρουσιάζονται στο στοίβα γραμματοσειρών. Εάν το πρόγραμμα περιήγησης δεν μπορεί να βρει την πρώτη γραμματοσειρά που αναφέρεται στη στοίβα, μετακινείται στην επόμενη. Συνεχίζει αυτήν τη διαδικασία έως ότου εντοπίσει μια γραμματοσειρά που μπορεί να χρησιμοποιήσει ή δεν έχει επιλογές (στην περίπτωση αυτή επιλέγει απλώς οποιαδήποτε γραμματοσειρά συστήματος θέλει). Ακολουθεί ένα παράδειγμα για το πώς θα φαίνεται μια στοίβα γραμματοσειράς στο CSS όταν εφαρμόζεται στο στοιχείο "body":
σώμα {
font-family: Georgia, "Times New Roman", serif;
}
Η γραμματοσειρά Georgia εμφανίζεται πρώτη, οπότε από προεπιλογή, αυτό θα χρησιμοποιήσει η σελίδα, αλλά αν αυτή η γραμματοσειρά δεν είναι διαθέσιμη για κάποιο λόγο, η σελίδα επιστρέφει στο Times New Roman.
Επισυνάπτω Times New Roman σε διπλά εισαγωγικά επειδή είναι ένα όνομα πολλών λέξεων. Τα ονόματα γραμματοσειρών μίας λέξης, όπως η Γεωργία ή η Arial, δεν απαιτούν εισαγωγικά, αλλά το όνομα γραμματοσειράς πολλαπλών λέξεων με ενσωματωμένα κενά τα χρειάζεται, ώστε το πρόγραμμα περιήγησης να γνωρίζει ότι όλες αυτές οι λέξεις περιλαμβάνουν το όνομα της γραμματοσειράς.
Η στοίβα γραμματοσειρών τελειώνει με τη λέξη ελαφρή γραμμή. Αυτό είναι ένα γενικό όνομα οικογένειας γραμματοσειρών. Στην απίθανη περίπτωση που ένα άτομο δεν έχει Γεωργία ή Times New Roman στον υπολογιστή τους, ο ιστότοπος θα χρησιμοποιούσε οποιαδήποτε γραμματοσειρά serif μπορούσε να βρει. Το πρόγραμμα περιήγησης θα επιλέξει μια γραμματοσειρά για εσάς, αλλά τουλάχιστον προσφέρετε καθοδήγηση, ώστε να γνωρίζει τι είδους γραμματοσειρά θα λειτουργούσε καλύτερα στο σχεδιασμό.
Γενικές οικογένειες γραμματοσειρών
Το γενικό όνομα γραμματοσειράς που διατίθεται στο CSS είναι:
- ρέων
- φαντασία
- μονόχωρος
- ελαφρή γραμμή
- Σανς σέριφ
Ενώ υπάρχουν πολλές άλλες ταξινομήσεις γραμματοσειρών διαθέσιμες στο σχεδιασμό ιστοσελίδων και την τυπογραφία, συμπεριλαμβανομένου του slab-serif, blackletter, display, grunge και άλλα, αυτά τα πέντε γενικά ονόματα γραμματοσειρών είναι αυτά που θα χρησιμοποιούσατε σε μια στοίβα γραμματοσειρών στο CSS.
- Δροσερές γραμματοσειρές - συχνά διαθέτουν λεπτές, περίτεχνες επιστολές που προορίζονται να αναπαράγουν φανταχτερό χειρόγραφο κείμενο. Αυτές οι γραμματοσειρές, λόγω των λεπτών, λουλουδάτων γραμμάτων τους, δεν είναι κατάλληλες για ένα μεγάλο τμήμα περιεχομένου όπως το αντίγραφο του σώματος. Οι γραμμικές γραμματοσειρές χρησιμοποιούνται γενικά για επικεφαλίδες και μικρότερες ανάγκες κειμένου που μπορούν να εμφανίζονται σε μεγαλύτερα μεγέθη γραμματοσειρών.
- Γραμματοσειρές φαντασίας - είναι οι κάπως τρελές γραμματοσειρές που δεν εμπίπτουν πραγματικά σε καμία άλλη κατηγορία. Γραμματοσειρές που αναπαράγουν γνωστά λογότυπα, όπως τα γράμματα από το Χάρρυ Πόττερ ή Επιστροφή στο μέλλον ταινίες, εμπίπτουν σε αυτήν την κατηγορία. Αυτές οι γραμματοσειρές δεν είναι κατάλληλες για περιεχόμενο σώματος, δεδομένου ότι είναι συχνά τόσο στυλιζαρισμένες, ώστε η ανάγνωση μεγαλύτερων αποσπάσεων κειμένου που είναι γραμμένες σε αυτές τις γραμματοσειρές είναι πολύ δύσκολο να γίνει.
- Γραμματοσειρές Monospace - διαθέτουν γραμματοσειρές ίσου μεγέθους και σε απόσταση όπως θα έχετε βρει σε μια παλιά γραφομηχανή. Σε αντίθεση με άλλες γραμματοσειρές που έχουν μεταβλητά πλάτη για γράμματα ανάλογα με το μέγεθός τους (για παράδειγμα, ένα κεφαλαίο Δ καταλαμβάνει πολύ περισσότερο χώρο από ένα πεζά Εγώ), οι γραμματοσειρές monospace χρησιμοποιούν σταθερό πλάτος για όλους τους χαρακτήρες. Αυτές οι γραμματοσειρές χρησιμοποιούνται συχνά για αναγνώσεις κώδικα, επειδή φαίνονται σαφώς διαφορετικές από το άλλο κείμενο αυτής της σελίδας.
- Serif γραμματοσειρές - χρησιμοποιήστε λίγους επιπλέον συνδέσμους στα γράμματα. Αυτά τα επιπλέον κομμάτια καλούνται serifs. Οι κοινές γραμματοσειρές serif είναι η Georgia και οι Times New Roman. Οι γραμματοσειρές Serif λειτουργούν ιδανικά για μεγάλο κείμενο, όπως επικεφαλίδα, καθώς και μεγάλα αποσπάσματα κειμένου και σώμα.
- Σανς σέριφγραμματοσειρές - δεν έχετε συνδέσμους. Το όνομα σημαίνει χωρίς serifs. Οι δημοφιλείς γραμματοσειρές αυτής της κατηγορίας περιλαμβάνουν Arial ή Helvetica. Παρόμοια με τα serifs, οι γραμματοσειρές sans-serif αποδίδουν εξίσου καλά στις επικεφαλίδες καθώς και στο περιεχόμενο του σώματος, αν και μερικές Οι ειδικοί προτιμούν τα μεγάλα τμήματα κειμένου να αποφεύγουν τις γραμματοσειρές sans-serif επειδή είναι πιο δύσκολο να διαβαστούν σε μικρό σημείο μεγέθη.