Οι περισσότεροι από εσάς, ίσως συνηθίζετε να χρησιμοποιείτε 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}
September 23rd, 2008 at 11:43 am
Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!
Στα περισσότερα επαγγελματικά blogs ή newsgroups (που διαβάζω περισσότερο) προτείνεται το font-size του body είτε να μην αρχικοποιείται καθόλου, είτε να ορίζεται ως 1em.
Δηλαδή με λίγα λόγια δεν πρέπει να πειράζεις το default font size που έχει ορίσει ο χρήστης στον browser του. Και κατ’ εμεέ είναι και σωστό. Εγώ πχ έχω font-size στον FF 14px. Φαντάζεσαι πώς θα είναι το 62.5%;
September 23rd, 2008 at 12:09 pm
Φοβερό post Σπύρο!!! Μακάρι να είχα βρει το άρθρο σου όταν έκανα τα πρώτα μου βήματα στον χώρο. Θα ξόδευα πολύ λιγότερο χρόνο και ενέργεια ψάχνοντας και προσπαθώντας να καταλάβω τι είναι το em…
Τέλος θα ήθελα να προσθέσω πως το em είναι η πιο παρεξηγημένη μονάδα μέτρησης στην CSS (και μία από της αγαπημένες μου ταυτόχρονα…). Ίσως αυτό συμβαίνει γιατί κάποιος νέος στον χώρο, χρειάζεται πολύ χρόνο τόσο για να εξοικειωθεί όσο και να νιώσει άνετα και να χρησιμοποιήσει την συγκεκριμένη μονάδα μέτρησης…
September 23rd, 2008 at 1:51 pm
Σχετικά με τα em…
Για να μαθαίνει ο κοσμάκης… τα em πρώτο χρησιμοποιηθήκαν λόγω του θέματος του IE6 να μην κάνει zoom προκαθορισμένα values. Με απλά Ελληνικά εάν έχεις ένα CSS με fonts σε pixels δεν μπορείς να κάνεις zoom το κείμενο μέσα από τις επιλογές του ΙΕ6…
“Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!”
Προσωπικά πιστεύω πως τα em όντως είναι μια παρεξηγημένη έννοια ειδικά στον Ελληνικό χώρο αφού η χρήση τους είναι λιγοστή. Το θέμα είναι πως χρησιμοποιώντας em πετυχαίνεις μέγιστη συμβατότητα και δεν έχεις φραγμούς σε θέματα με fonts.
Εγώ προσωπικά δεν χρησιμοποιώ em επειδή δεν έχουν καλό preview στο Dreamweaver… και τα sites που σχεδιάζω δεν βασίζονται στο accessibility αλλά περισσότερο στο design.
CYA
September 23rd, 2008 at 4:21 pm
Τα em όμως μπορούν να δημιουργήσουν πρόβλημα “πιξελιάσματος” των fonts? (Ειδικά αν μιλάμε για τπτ ie6 και γενικώς ie)… To έχω δει δλδ και η εξήγηση που είχα δώσει ήταν λόγω των em.. Ή φταίει κάτι άλλο;
September 23rd, 2008 at 7:23 pm
Παιδιά πολύ καλό το άρθρο! Βοηθάει πάρα πολύ στο να κατανοήσει κανείς τί είναι αυτό το em! Και αυτή η μέθοδος με το 62,5% άψογη! Κάνει την χρήση των em πολύ πιο εύκολη.
Αν μου επιτρέπουν τα παιδιά του Web Design Blog, θα ήθελα να σχολιάσω τον πρώτο σχολιαστή.
Χάρη, μάλλον φίλε δεν έχεις καταλάβει τι γράφει ο Σπύρος εδώ. Το ότι έχεις default size στο FF σου τα 14px δεν έχει καμιά σχέση. Έτσι και αλλιώς με τον CSS κώδικα θα γίνει πάλι redefine το font size. Αυτό δεν είναι το νόημα του CSS; Να φτιάχνεις την σελίδα όπως θέλεις;
Π.χ. όταν φτιάξεις μια σελίδα που της έχεις ορίσει στο body το font size να είναι 18px το ίδιο πράγμα δεν κάνεις; Πολύ άσκοπος χαρακτηρισμός το “Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!”
September 23rd, 2008 at 7:49 pm
>>Αυτό δεν είναι το νόημα του CSS; Να φτιάχνεις την σελίδα όπως θέλεις;
Όπως θέλεις ναι, αλλά λαμβάνοντας υπ’ όψιν τον τελικό χρήστη. Δεν κάνεις τη σελίδα για τον εαυτό σου.
Ο τελικός χρήστης έχει ένα ορισμένο font-size που θέλει να βλέπει τις σελίδες. Γιατί εσύ να του το αλλάξεις; Εγώ το θέλω 14. Δεν θέλω να στραβώνομαι με 10px fonts. (http://www.cs.tut.fi/~jkorpela/acc/1.11.html)
Φυσικά και θα βάλεις χρώματα, εικόνες, τυπογραφικά στοιχεία, ακόμα και διαφορές στο μέγεθος των γραμμάτων για αισθητικούς λόγους. Αλλά το βασικό content θεωρώ πρέπει να είναι όπως το θέλει ο χρήστης.
>>Π.χ. όταν φτιάξεις μια σελίδα που της έχεις ορίσει στο body το
>>font size να είναι 18px το ίδιο πράγμα δεν κάνεις;
Ναι. Και είναι λάθος!
Διάφορα κείμενα που με καλύπτουν όσον αφορά το web-design βρίσκονται εδώ:
http://www.cs.tut.fi/~jkorpela/
September 24th, 2008 at 11:37 am
Ευχαριστούμε πολύ για την συμμετοχή σας στο σημερινό άρθρο. Μελετήσαμε τις απαντήσεις / σχόλια σας και θα θέλαμε να πούμε πως ο κάθε σχεδιαστής έχει τις μεθόδους και τα “κόλπα” του. Μπορεί κάποιος να προτιμάει να χρησιμοποιεί keyword sizes, ή pixels, ή ems ή οτιδήποτε άλλο, αλλά στο τέλος αυτό που έρχεται να ορίσει ένα design είναι το ίδιο το σχεδιαστικό. Αυτό που έχει σημασία είναι ο κάθε επαγγελματίας να καταφέρει να παραδώσει σωστή και επαγγελματική δουλειά και να νιώθει καλά γι’αυτό που έφτιαξε.
Όσον αφορά το accessibility το οποίο είναι και ο λόγος που έγινε το αρχικό σχόλιο που “πυροδότησε” την εξέλιξη της συζήτησης, αυτό είναι κάτι το οποίο εφαρμόζεται ανάλογα με τις ανάγκες και τις απαιτήσεις που έχει η αγορά του εκάστοτε site. Δεν μπορούν όλα τα έργα να βασίζονται στο accessibility γιατί δεν μπορούν και όλα τα έργα να έχουν κοινό με τέτοιες ανάγκες. Στις μέρες μας το marketing, η δημιουργικότητα και η εξάπλωση του Internet και σαν ψυχαγωγική λύση, καλώς ή κακώς έχουν αλλάξει το πρόσωπο του διαδικτύου αλλάζοντας τις ανάγκες του. Έτσι τις περισσότερες φορές το μέγεθος της γραμματοσειράς αλλάζει ώστε να εξυπηρετεί τους ζητούμενους σκοπούς.