Ελαστικές γραμματοσειρές με CSS με την χρήση ems
Οι περισσότεροι από εσάς, ίσως συνηθίζετε να χρησιμοποιείτε pixels στα fonts που ορίζετε σε ένα CSS αρχείο αλλά και σε άλλα στοιχεία της σελίδας σας (αποστάσεις, κλπ). Αν και κάτι τέτοιο βοηθάει πολύ στον υπολογισμό των μεγεθών και σας δίνει μια οικεία αίσθηση (ιδιαίτερα εάν προέρχεστε από ένα γραφίστικο background), παρ’ όλα αυτά δεν ενδείκνυται αφού δεν προσφέρει την απαραίτητη “ελαστικότητα” που είναι καλό να υπάρχει σε ένα διαδικτυακό τόπο.
Τι ακριβώς όμως σημαίνει ο όρος em που χρησιμοποιείται στα CSS αρχεία; Σύμφωνα με τον συγγραφέα του βιβλίου “The Elements of Typographic Style“, Robert Bringhurst, το em είναι:
Μια ελαστική μονάδα μέτρησης μήκους. Ένα em είναι η απόσταση που ισοδυναμεί με το μέγεθος της γραμματοσειράς που χρησιμοποιείται. Για παράδειγμα, όταν χρησιμοποιείται μια γραμματοσειρά μεγέθους 10 points, τότε η απόσταση του ενός em ισοδυναμεί με 10 points. Αντίστοιχα, όταν χρησιμοποιείται μια γραμματοσειρά μεγέθους 34 points, τότε η απόσταση του ενός em ισοδυναμεί με 34 points. Από τα παραπάνω το συμπέρασμα που βγαίνει είναι πως η μονάδα μέτρησης μήκους em είναι αναλογικά ίση σε όλα τα μεγέθη.
Το προεπιλεγμένο μέγεθος γραμματοσειράς σε ένα έγγραφο (X)HTML στους περισσότερους browsers είναι τα 16px. Οπότε 1 em ισοδυναμεί με 16px. Το πλεονέκτημα της χρήσης της μονάδας μέτρησης em για τη μέτρηση γραμματοσειρών, του ύψους γραμμών και των αποστάσεων είναι πως όλες οι μετρήσεις προσαρμόζονται αναλογικά.
Ένας web designer ο Richard Rutter έχει σκεφτεί έναν εύκολο τρόπο για να διευκολύνει την χρήση των ems στον σχεδιασμό ιστοσελίδων και να τα κάνει να “μοιάζουν” περισσότερο με pixels. Πως το κάνει αυτό; Ο Richard Rutter υπολόγισε πως αφού τα 16px είναι το προεπιλεγμένο μέγεθος γραμματοσειράς σε μια ιστοσελίδα τότε αυτά ισοδυναμούν με την μονάδα μέτρησης των αποστάσεων της σελίδας. Για να στρογγυλέψει τα νούμερα και να φέρει τις μετρήσεις λίγο πιο κοντά στα μέτρα του αλλά και των περισσοτέρων άλλων, υπολόγισε πώς εάν στην αρχή του CSS αρχείου ορίσει
Body {font-size: 62.5%;}
τότε η μονάδα μέτρησης αποστάσεων και μεγεθών em μοιάζει περισσότερο με την μονάδα μέτρησης pixels. Ο λόγος είναι γιατί το 62.5% του 16px είναι τα 10px και αυτό το νούμερο είναι πολύ πιο εύκολο για κάποιον να το υπολογίζει και να το συγκρίνει με άλλα πιο “γνωστά” μεγέθη. Άρα αν ακολουθήσετε την μέθοδο του Richard Rutter, τότε το 1 em θα ισοδυναμεί με 10px, τα 1,5em με 15px, τα 0.9 em με 9px κλπ.
Παράδειγμα:
Body {font-size: 62,5%;}
H2 {font-size: 2em;}
H1 {font-size: 2,4em}
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Ελαστικές γραμματοσειρές με CSS με την χρήση ems γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
