23Σεπ

Ελαστικές γραμματοσειρές με CSS με την χρήση ems

, 23 Σεπτεμβρίου 2008 | WEB DESIGN - AUTHORING | 7 Σχόλια

Οι περισσότεροι από εσάς, ίσως συνηθίζετε να χρησιμοποιείτε 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 μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

7 comments so far

  • Χάρης Says: Σεπτέμβριος 23, 2008 at 11:43 πμ

    Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!

    Στα περισσότερα επαγγελματικά blogs ή newsgroups (που διαβάζω περισσότερο) προτείνεται το font-size του body είτε να μην αρχικοποιείται καθόλου, είτε να ορίζεται ως 1em.

    Δηλαδή με λίγα λόγια δεν πρέπει να πειράζεις το default font size που έχει ορίσει ο χρήστης στον browser του. Και κατ’ εμεέ είναι και σωστό. Εγώ πχ έχω font-size στον FF 14px. Φαντάζεσαι πώς θα είναι το 62.5%; :)

    Απάντηση
  • John Tsevdos Says: Σεπτέμβριος 23, 2008 at 12:09 μμ

    Φοβερό post Σπύρο!!! Μακάρι να είχα βρει το άρθρο σου όταν έκανα τα πρώτα μου βήματα στον χώρο. Θα ξόδευα πολύ λιγότερο χρόνο και ενέργεια ψάχνοντας και προσπαθώντας να καταλάβω τι είναι το em…

    Τέλος θα ήθελα να προσθέσω πως το em είναι η πιο παρεξηγημένη μονάδα μέτρησης στην CSS (και μία από της αγαπημένες μου ταυτόχρονα…). Ίσως αυτό συμβαίνει γιατί κάποιος νέος στον χώρο, χρειάζεται πολύ χρόνο τόσο για να εξοικειωθεί όσο και να νιώσει άνετα και να χρησιμοποιήσει την συγκεκριμένη μονάδα μέτρησης…

    Απάντηση
  • webmaster_x Says: Σεπτέμβριος 23, 2008 at 1:51 μμ

    Σχετικά με τα em…

    Για να μαθαίνει ο κοσμάκης… τα em πρώτο χρησιμοποιηθήκαν λόγω του θέματος του IE6 να μην κάνει zoom προκαθορισμένα values. Με απλά Ελληνικά εάν έχεις ένα CSS με fonts σε pixels δεν μπορείς να κάνεις zoom το κείμενο μέσα από τις επιλογές του ΙΕ6…

    “Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!”

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

    Εγώ προσωπικά δεν χρησιμοποιώ em επειδή δεν έχουν καλό preview στο Dreamweaver… και τα sites που σχεδιάζω δεν βασίζονται στο accessibility αλλά περισσότερο στο design.

    CYA

    Απάντηση
  • Natalia Says: Σεπτέμβριος 23, 2008 at 4:21 μμ

    Τα em όμως μπορούν να δημιουργήσουν πρόβλημα «πιξελιάσματος» των fonts? (Ειδικά αν μιλάμε για τπτ ie6 και γενικώς ie)… To έχω δει δλδ και η εξήγηση που είχα δώσει ήταν λόγω των em.. Ή φταίει κάτι άλλο;

    Απάντηση
  • Palpatine Says: Σεπτέμβριος 23, 2008 at 7:23 μμ

    Παιδιά πολύ καλό το άρθρο! Βοηθάει πάρα πολύ στο να κατανοήσει κανείς τί είναι αυτό το em! Και αυτή η μέθοδος με το 62,5% άψογη! Κάνει την χρήση των em πολύ πιο εύκολη.

    Αν μου επιτρέπουν τα παιδιά του Web Design Blog, θα ήθελα να σχολιάσω τον πρώτο σχολιαστή.

    Χάρη, μάλλον φίλε δεν έχεις καταλάβει τι γράφει ο Σπύρος εδώ. Το ότι έχεις default size στο FF σου τα 14px δεν έχει καμιά σχέση. Έτσι και αλλιώς με τον CSS κώδικα θα γίνει πάλι redefine το font size. Αυτό δεν είναι το νόημα του CSS; Να φτιάχνεις την σελίδα όπως θέλεις;

    Π.χ. όταν φτιάξεις μια σελίδα που της έχεις ορίσει στο body το font size να είναι 18px το ίδιο πράγμα δεν κάνεις; Πολύ άσκοπος χαρακτηρισμός το «Νομίζω είναι μέγα λάθος αυτή η προσέγγιση!»

    Απάντηση
  • Χάρης Says: Σεπτέμβριος 23, 2008 at 7:49 μμ

    >>Αυτό δεν είναι το νόημα του 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/

    Απάντηση
  • Σπύρος Παπασπυρόπουλος | Internet Specialist Says: Σεπτέμβριος 24, 2008 at 11:37 πμ

    Ευχαριστούμε πολύ για την συμμετοχή σας στο σημερινό άρθρο. Μελετήσαμε τις απαντήσεις / σχόλια σας και θα θέλαμε να πούμε πως ο κάθε σχεδιαστής έχει τις μεθόδους και τα «κόλπα» του. Μπορεί κάποιος να προτιμάει να χρησιμοποιεί keyword sizes, ή pixels, ή ems ή οτιδήποτε άλλο, αλλά στο τέλος αυτό που έρχεται να ορίσει ένα design είναι το ίδιο το σχεδιαστικό. Αυτό που έχει σημασία είναι ο κάθε επαγγελματίας να καταφέρει να παραδώσει σωστή και επαγγελματική δουλειά και να νιώθει καλά γι’αυτό που έφτιαξε.

    Όσον αφορά το accessibility το οποίο είναι και ο λόγος που έγινε το αρχικό σχόλιο που «πυροδότησε» την εξέλιξη της συζήτησης, αυτό είναι κάτι το οποίο εφαρμόζεται ανάλογα με τις ανάγκες και τις απαιτήσεις που έχει η αγορά του εκάστοτε site. Δεν μπορούν όλα τα έργα να βασίζονται στο accessibility γιατί δεν μπορούν και όλα τα έργα να έχουν κοινό με τέτοιες ανάγκες. Στις μέρες μας το marketing, η δημιουργικότητα και η εξάπλωση του Internet και σαν ψυχαγωγική λύση, καλώς ή κακώς έχουν αλλάξει το πρόσωπο του διαδικτύου αλλάζοντας τις ανάγκες του. Έτσι τις περισσότερες φορές το μέγεθος της γραμματοσειράς αλλάζει ώστε να εξυπηρετεί τους ζητούμενους σκοπούς.

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter