Font Sizing με PX, ΕΜ και REM

Γράφτηκε από τον Παρασκευή, 28 Αυγούστου 2015

Ο καθορισμός μιας μονάδα μέτρησης για το μέγεθος του κειμένου σε μια ιστοσελίδα θα μπορούσε να είναι θέμα έντονων συζητήσεων, ακόμα και σήμερα όπου οι τεχνικές έχουν βελτιωθεί αρκετά και υπάρχουν πολλά εργαλεία για να μας βοηθήσουν. Δυστυχώς, υπάρχουν ακόμη πλεονεκτήματα και μειονεκτήματα που κάνουν τις διάφορες τεχνικές λιγότερο επιθυμητές. Απλά πρέπει να κατανοήσουμε ποια τεχνική είναι η πιο επιθυμητή και ποια λιγότερο επιθυμητή, σύμφωνα με το project μας.

Πλέον υπάρχουν 3 βασικές τεχνικές:

  1. Ορισμός μεγέθους με px (pixels)
  2. Ορισμός μεγέθους με em
  3. Ορισμός μεγέθους με rem

 

Ορισμός μεγέθους με px (pixels)

Στα αρχικά βήματα του WEB όλοι χρησιμοποιούσαν pixels για να ορίσουν το μέγεθος του κειμένου. Είναι αξιόπιστο, συνεπές και η πιο δημοφιλή μέθοδος ακόμη και σήμερα. Το μέγεθος του κειμένου ορίζεται καθ’ ύψος βάση του ποσού των pixels που έχουμε επιλέξει. Η τεχνική μειονεκτεί αρχικά στο χρήστες του Internet Explorer -μέχρι και τον IE9- δεν έχουν την δυνατότητα να κάνουν zoom στο κείμενο μέσω την λειτουργία του browser, μια λειτουργία που την υποστηρίζουν όλοι οι μοντέρνοι browsers. Σημαντικό μειονέκτημα επίσης είναι η προσαρμοστικότητα του κειμένου στην προβολή σε διαφορετικές οθόνες (κινητά, Tablet κλπ.) όπου ο developer θα πρέπει να αλλάζει το μέγεθος σε κάθε προβολή, αντί αυτή να γίνεται αναλογικά με την οθόνη.

Ορισμός μεγέθους με em

Η όλη ανικανότητα στην προσαρμοστικότητα του κειμένου στον IE συνέχιζε να προβληματίζει ώσπου να αρχίσουμε να χρησιμοποιούμε τις μονάδες em. Ο Richard Rutter στο άρθρο του «How to size text using ems» το 2004 παρουσίασε για πρώτη φορά την χρήση των em. H παρακάτω τεχνική τροποποιεί την βάση του μεγέθους της γραμματοσειράς του body.

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px */

Με την αναφορά επί τοις εκατό στο body πετυχαίνουμε ότι 1em ισούται με 10px, αντί για 16px που είναι η προεπιλογή. Άρα για να ορίσουμε το μέγεθος σε 14px αρκεί να ορίσουμε την αντίστοιχη τιμή στα 1.4em.

Το πρόβλημα είναι ότι με em-based font sizing τεχνικές τα μεγέθη περιπλέκονται καθώς προχωράμε στο επόμενο επίπεδο ενός στοιχείου, για παράδειγμα μια λιστα μεσα σε μια άλλη λιστα όπου τα στοιχεία του 2ου επιπέδου ενώ θα έπρεπε να έχουν μέγεθος 14px έχουν 20px, αντίστοιχα στο 3ο επίπεδο 27px κλπ. Αυτό μπορεί να αποφευφχθεί με το να ορίσουμε τα επόμενα επίπεδα με 1em, για να αποφύγουμε αυτήν την σύγχυση. Ωστόσο αξίζει να περιπλέκουμε τόσο πολύ τον κώδικα μας?

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px */
li li, li p /* etc */ { font-size: 1em; }

Ορισμός μεγέθους με rem

Με την είσοδο της CSS3 παρουσιάστηκαν κάποιες κανούργιες μονάδες, μια από αυτές είναι και το rem, που ουσιαστικά είναι συντόμευση του “root em”. Αν από μόνο του αυτό δεν είναι αρκετό ας δούμε λίγο πως χρησιμοποιούμε το rem.

Σε αντίθεση με το em το οποίο καθορίσει το μέγεθος από το στοιχείο γονέα και δημιουργεί το μπέρδεμα που αναφέραμε πιο πάνω, το μέγεθος του rem καθορίζεται από την ρίζα (root) όλων των στοιχείων, δηλαδή το <html>. Αυτό σημαίνει ότι μπορούμε να ορίσουμε μεμονομένα το μέγεθος του html στοιχείου και μαζί με αυτό όλα τα υπόλοιπα στοιχεία με rem τα οποία θα συνδέονται με αυτό με κάποιο ποσοστό επι τοις εκατό.

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Ορίσαμε την κλάση του μεγέθους της γραμματοσειράς στο 62.5% για να μπορούμε να ρυθμίζουμε αντίστοιχα τα υπόλοιπα στοιχεία, όπως θα κάναμε και με τα px.

Ας δούμε τώρα ποιοί browsers υπστηρίζουν την παραπάνω δομή. Προς έκπληξη μας μπορούμε να δούμε ότι η υποστήριξη έρχεται από όλους τους γνωστούς μας φυλλομετρητές: Safari 5, Chrome, Firefox 3.6 , ακόμη και Internet Explorer 9. Αξίζει να αναφέρουμε ότι ο IE9 υποστηρίζει και την αυξομείωση του κειμένου με την χρήση rem.

Για τους browsers που δεν υποστηρίζουν το rem (ΙΕ6, ΙΕ7… η χρήση τους είναι λιγότερο από 0.5% των υπολογιστών που έχουν πρόσβαση στο Διαδίκτυο) μπορούμε να ορίσουμε ενα fall-back με την αξιόπιστη λύση των px.

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

Τέλος! Έχουμε προβλέψει κάθε εκδοχή για όλους τους browsers και για οποιαδήποτε αλλαγή του κειμένου μας.