Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα Cascading Style Sheets (CSS) Χρήση των ιδιοτήτων γραμματοσειρών στα CSS Χρήση των ιδιοτήτων αραίωσης κειμένου (text spacing) στα CSS Δημιουργία ενός φύλλου στυλ με ιδιότητες γραμματοσειράς και κειμένου 1
Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Επιλέξτε λιγότερες γραμματοσειρές και μεγέθη Επιλογή διαθέσιμων γραμματοσειρών Σχεδιασμός για αναγνωσιμότητα Αποφυγή χρήσης κειμένου ως γραφικού 2
Επιλέξτε λιγότερους τύπους & μεγέθη γραμματοσειρών Οι σελίδες σας θα δείχνουν «καθαρότερες» όταν επιλέγετε λιγότερους τύπους και μεγέθη γραμματοσειρών Αποφασίστε για μία γραμματοσειρά για κάθε διαφορετικό επίπεδο σημασίας των θεμάτων σας, όπως τίτλους σελίδων, τίτλους ενοτήτων και σώματος κειμένου Επικοινωνήστε την ιεραρχία της πληροφορίας με αλλαγές στο μέγεθος, «βάρος» (weight) ή χρώμα γραμματοσειράς Αποτελεσματικός τυπογραφικός σχεδιασμός 3
Χρήση διαθέσιμων γραμματοσειρών Ο browser και το λειτουργικό σύστημα του χρήστη καθορίζουν πως εμφανίζεται μια γραμματοσειρά Για να ελέγξετε πιο αποτελεσματικά την εμφάνιση του κειμένου στις σελίδες σας, σκεφτείτε με βάση τις οικογένειες γραμματοσειρών (font families), όπως τις serif και sans serif Οι τύποι serif και sans serif sans serf είναι οι τύποι χωρίς serifs (τα πιο περίτεχνα τελειώματα στους χαρακτήρες) Τα sans serif είναι κατάλληλα λ για το web και τα serif για εκτύπωση Παραδείγματα sans serif fonts: Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana 4
Κοινές εγκατεστημένες γραμματοσειρές Σχεδιασμός για αναγνωσιμότητα Η εικόνα στην επόμενη διαφάνεια δείχνει την ίδια παράγραφο σε Times, Trebuchet, Arial, και Verdana στο προκαθορισμένο μέγεθος γραμματοσειράς των browsers Internet Explorer (αριστερά) και Mozilla Firefox Παρατηρήστε ότι ανεπαίσθητες μεταβολές στο βάρος, αραίωση και απόδοση (rendering) των font families επηρεάζουν τον τρόπο που εμφανίζεται η καθεμία στο χρήστη 5
Κοινές οικογένειες web γραμματοσειρών όπως δείχνουν στον Internet Explorer και στον Firefox Αποφεύγετε τη χρήση κειμένου ως γραφικού Κρατήστε τα text graphics για πιο σημαντικές χρήσεις, όπως το κύριο λογότυπο του site σας ή ως επαναχρησιμοποιήσιμα γραφικά πλοήγησης Θυμηθείτε πως χρησιμοποιώντας κείμενο ως γραφικά, αφαιρείτε από το χρήστη τη δυνατότητα να αναζητήσει για αυτό το κείμενο στη σελίδα σας 6
Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα CSS Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα CSS Τα CSS προσφέρουν ποικιλία μονάδων μέτρησης, ίσως μάλιστα υπερβολικά πολλές επιλογές Για παράδειγμα, για να ορίσετε το font size, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις μονάδες μέτρησης του πίνακα της επόμενης διαφάνειας 7
Μονάδες μέτρησης στα CSS Απόλυτες (absolute) μονάδες Προσδιορίζει μια συγκεκριμένη τιμή, π.χ.: p {margin: 1.25in;} Δεν προσαρμόζεται ανάλογα με την οθόνη του χρήστη Πρέπει να χρησιμοποιείται μόνο αν οι ακριβείς διαστάσεις του μέσου προορισμού είναι γνωστές 8
Σχετικές (relative) μονάδες Βοηθάει στο σχεδιασμό web σελίδων που προσαρμόζεται σε διαφορετικούς τύπους/μεγέθη οθονών Η χρήση τους συνίσταται στο web σχεδιασμό Οι σχετικές τιμές όπως τα em και px είναι σχεδιασμένα για να επιτρέπουν προσαρμογή των ιστοσελίδων σε διαφορετικούς τύπους και αναλύσεις οθονών Το W3C συστήνει τη χρήση σχετικών τιμών πάντοτε Η μονάδα em Το em αποτελεί μονάδα εκτύπωσης, παραδοσιακά ίση με το οριζόντιο μήκος του κεφαλαίου χαρακτήρα M σε κάποιο font size Στα CSS, η μονάδα em ισούται με το font size ενός στοιχείου Μπορεί να χρησιμοποιείται για οριζόντια και κάθετη μέτρηση 9
Η μονάδα ex Η μονάδα ex ισούται με το ύψος του πεζού χαρακτήρα x σε οποιοδήποτε font Όπως φαίνεται στην παρακάτω εικόνα, το ύψος του πεζού χαρακτήρα x διαφοροποιείται αρκετά από ένα τύπο γραμματοσειράς σε άλλο Η μονάδα px Τα pixels αποτελούν το βασικό απεικονιστικό στοιχείο μιας οθόνης Η/Υ Το μέγεθος ενός pixel καθορίζεται από την ανάλυση οθόνης Οι τιμές pixel λειτουργούν καλά για οθόνες Η/Υ, αλλά όχι εξίσου καλά σε άλλα μέσα όπως την εκτύπωση 10
Ποσοστά Οι τιμές ποσοστών είναι πάντοτε σχετικές με κάποια άλλη τιμή Για παράδειγμα,, το ακόλουθοι σύνολο κανόνων θέτει το font size για το στοιχείο <body> στο 1.5 φορές μεγαλύτερο από το προκαθορισμένο μέγεθος του browser: body {font-size: 150%;} Τα ενσωματωμένα στοιχεία ( παιδιά ) κληρονομούν τις τιμές ποσοστών από τους γονείς τους Για παράδειγμα, το κείμενο του στοιχείου < b> στο ακόλουθο παράδειγμα είναι 125% μεγαλύτερο από το <p> που το περιέχει: p {font-size: 12pt;} p b {font-size: 125%;} Χρησιμοποιώντας τις CSS Χρησιμοποιώντας τις CSS Font ιδιότητες 11
Χρησιμοποιώντας τις CSS Font ιδιότητες font family font size font style font variant font weight font (ιδιότητα συντόμευσης) Ορίζοντας την οικογένεια γραμματοσειράς Επιτρέπει τον προσδιορισμό γενικών ονομάτων font family (π.χ., χ sans serif) serif) ή ένα συγκεκριμένο όνομα (π.χ., Arial) p {font-family: sans-serif;} p {font-family: arial;} 12
Γενικές οικογένειες γραμματοσειρών στον Internet Explorer και στον Firefox Ορίζοντας το μέγεθος γραμματοσειράς Ο ακόλουθος κανόνας θέτει το στοιχείο <p> σε 1.5em Arial: p { } font-family: arial; font-size: 1.5em; 13
Διάφορα μεγέθη γραμματοσειρών Ορίζοντας το στυλ γραμματοσειράς Η ιδιότητα font style επιτρέπει να μορφοποιήστε κείμενο ως italic ή oblique (λιγότερο πλάγια γράμματα σε σχέση με τα italic) p {font-style: italic;} 14
Ορίζοντας την εκδοχή (variant) της γραμματοσειράς Η ιδιότητα font variant επιτρέπει να μορφοποιήσετε κείμενο ως μικρά κεφαλαία (small capitals), που συχνά χρησιμοποιείται στα ανοίγματα κεφαλαίων, ακρώνυμα και για άλλους ειδικούς σκοπούς: h1 {font-variant: small-caps;} Ορίζοντας την εκδοχή (weight) της γραμματοσειράς Η ιδιότητα font weight σας επιτρέπει να θέσετε το βάρος (weight) της γραμματοσειράς p {font-weight: bold;} 15
Χρησιμοποιώντας την ιδιότητα συντόμευσης font Η ιδιότητα συντόμευσης font επιτρέπει να ρυθμίσετε σε ένα κανόνα πολλές επιμέρους ιδιότητες γραμματοσειράς Οι παρακάτω κανόνες παράγουν ακριβώς το ίδιο αποτέλεσμα: p {font-weight: bold; font-size: 18pt; line-height: i ht 24pt; fontfamily: arial;} p {font: bold 18pt/24pt arial;} Χρησιμοποιώντας τις ιδιότητες αραίωσης κειμένου (text spacing) 16
Ιδιότητες αραίωσης κειμένου text indent text align text decoration line height vertical align letter spacing word spacing Ορίζοντας εσοχές κειμένου (text indents) Χρησιμοποιήστε την ιδιότητα text indent για να ρυθμίσετε το μέγεθος της εσοχής της πρώτης γραμμής στοιχείων όπως μια παράγραφος Οι ακόλουθοι κανόνες θέτουν εσοχή 24 points: p {font-family: text-indent: 24pt;} 17
Εσοχές κειμένου Ορίζοντας εσοχές κειμένου (text alignment) Χρησιμοποιήστε την ιδιότητα text align για να ορίσετε την οριζόντια στοίχιση των γραμμών κειμένου ενός στοιχείου p {text-align: justify} 18
Στοιχίσεις κειμένου Ορίζοντας διακοσμήσεις κειμένου (text decoration) Χρησιμοποιήστε την ιδιότητα text decoration για να προσθέσετε ήαφαιρέσετε υπογράμμιση από κείμεν0 Ο ακόλουθος κανόνας αφαιρεί την υπογράμμιση από συνδέσμους υπερκειμένου: a {text-decoration: none} 19
Διακοσμήσεις κειμένου Ορίζοντας το ύψος της γραμμής Τα CSS επιτρέπουν να προσδιορίσουμε σε ποσοστό ή απόλυτη τιμή το ύψος της γραμμής (λέγεται line height ή leading) O ακόλουθος κανόνας θέτει το ύψος της γραμμής σε 2 em: p {line-height: 2 em;} 20
Ύψος γραμμής H αύξηση του ύψους γραμμής μπορεί να βελτιώσει την αναγνωσιμότητα 21
Ορίζοντας την κατακόρυφη στοίχιση (vertical alignment) H ιδιότητα vertical align επιτρέπει να ρυθμίσετε την κατακόρυφη στοίχιση του κειμένου μέσα στο κουτί της γραμμής Το vertical align δουλεύει μόνο σε inline στοιχεία Τιμές της ιδιότητας vertical align 22
Παραδείγματα κατακόρυφων στοιχίσεων Ορίζοντας την κατακόρυφη στοίχιση (συνέχεια) Μπορείτε επίσης να χρησιμοποιήσετε κατακόρυφη στοίχιση για να στοιχίσετε κείμενο με γραφικά Ο ακόλουθος κανόνας, που προστίθεται σε ένα στοιχείο <img> με χρήση της ιδιότητας style, θέτει την κατακόρυφη στοίχιση σε top : <img src= image.gif style= vertical-align: text-top; > 23
Στοιχίζοντας κατακόρυφα κείμενο και γραφικά Ορίζοντας της απόσταση μεταξύ χαρακτήρων (letter spacing) Για να ρυθμίσετε διαγραμμάτωση (όρος που χρησιμοποιείται στις εκτυπώσεις για τη ρύθμιση του λευκού διαστήματος μεταξύ των χαρακτήρων, χρησιμοποιήστε την ιδιότητα letter spacing Ο ακόλουθος κανόνας θέτει τη διαγραμμάτωση στα 4 points h1 {letter-spacing: 4pt;} 24
Ορίζοντας της απόσταση μεταξύ χαρακτήρων Ορίζοντας της απόσταση μεταξύ λέξεων Η ιδιότητα word spacing σας επιτρέπει να ρυθμίσετε το λευκό περιθώριο ρ μεταξύ λέξεων στο κείμενο Ο ακόλουθος κανόνας θέτει την απόσταση μεταξύ λέξεων στα 2 em h1 {word-spacing: 2em;} 25
Ορίζοντας της απόσταση μεταξύ λέξεων Σύνοψη Χρησιμοποιήστε τη γραμματοσειρά για να επικοινωνήσετε τη δομή του περιεχομένου σας; Να είστε φειδωλοί με τον αριθμό των γραμματοσειρών που επιλέγετε και χρησιμοποιήστε τις γραμματοσειρές με συνέπεια Θυμηθείτε ότι τα HTML text downloads είναι πολύ γρηγορότερα από τα downloads γραφικών χρησιμοποιείτε HTML text οπουδήποτε είναι δυνατό Χρησιμοποιείτε browser ασφαλείς γραμματοσειρές που θα εμφανιστούν με τη μεγαλύτερη δυνατή συνέπεια σε όλα τα λειτουργικά συστήματα 26
Σύνοψη (συνέχεια) Τυποποιήστε τα στυλ σας δημιουργώντας εξωτερικά φύλλα στυλ και συνδέοντάς τα με πολλαπλά λά έγγραφα Ελέγξτε τη δουλειά σας Διαφορετικοί browsers και υπολογιστικές πλατφόρμες αποδίδουν το κείμενο σε διαφορετικά μεγέθη Χρησιμοποιείτε τις γραμματοσειρές αποδοτικά επιλέγοντας διαθέσιμους τύπους και μεγέθη Σχεδιάστε με στόχο την αναγνωσιμότητα και χρησιμοποιήστε το κείμενο για να επικοινωνήσετε πληροφορία δομής του περιεχομένου σας Σύνοψη (συνέχεια) Χρησιμοποιήστε την κατάλληλη μονάδα μέτρησης βάσει της πλατφόρμας προορισμού (της συσκευής του χρήστη) Όταν σχεδιάζετε για την οθόνη Η/Υ, οι μονάδες em, px και τα ποσοστά προσαρμόζονται στις προτιμήσεις και οθόνη του τελικού χρήστη Χρησιμοποιήστε της font ιδιότητες για να ελέγξετε τον τρόπο εμφάνισης του κειμένου σας Ορίστε τιμές υποκατάστασης της γραμματοσειράς για να διασφαλίσετε ότι το κείμενό σας εμφανίζεται καλά σε διαφορετικές πλατφόρμες Χρησιμοποιήστε τεχνικές απόστασης/αραίωσης κειμένου για να δημιουργήσετε οπτικά ενδιαφέρον και αναγνώσιμο κείμενο 27