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

Σχολιάστε

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