Μονάδες μέτρησης για γραμματοσειρές (ποσοστό, em, px, pt)

• 13 Νοεμβρίου 2012
• by: Georgios
• in: Web Development

Συχνά ένα από τα ποιο δύσκολα κομμάτια στη μορφοποίηση ενός HTML εγγράφου είναι η επιλογή μεγέθους γραμματοσειράς. Στα CSS έχουμε στη διάθεση μας τέσσερις διαφορετικές μονάδες μέτρησης, με τις οποίες μπορούμε να ορίσουμε το μέγεθος της γραμματοσειράς, όπως εμείς θέλουμε να εμφανίζεται στην οθόνη των web browsers.

Το βασικό ερώτημα όμως είναι, ποια μονάδα μέτρησης είναι η ποιο κατάλληλη για να τη χρησιμοποιήσουμε στο διαδίκτυο; Η απάντηση είναι τόσο δύσκολη, όσο και η ίδια η ερώτηση.

Οι μονάδες μέτρησης

1. em : Τα em είναι μια επεκτάσιμη μονάδα που χρησιμοποιείτε ευρέος στο διαδίκτυο. Ένα em είναι ίσο με το τρέχον μέγεθος της γραμματοσειράς, για παράδειγμα, αν το μέγεθος της γραμματοσειράς του εγγράφου είναι 12pt, τότε 1em = 12 pt. Τα em είναι επεκτάσιμα από τη φύση τους, έτσι 2em  = 24pt, .5em = 6pt και πάει λέγοντας. Η μονάδα μέτρησης em έχει αρχίσει να αυξάνετε ραγδαία στα HTML έγγραφα, λόγο της επεκτασιμότητας τους και λόγο της φιλικής τους φύσης προς τις κινητές συσκευές.
2. Εικονοστοιχεία (px) : Τα pixels είναι σταθερές μονάδες μέτρησης που χρησιμοποιούνται σε οθόνες. Ένα pixel είναι ίσο με μία κουκκίδα της οθόνης. Πολλοί web designers, χρησιμοποιούν αυτή τη μονάδα μέτρησης, για να επιτύχουν όσο το δυνατόν καλύτερη αναπαράσταση του έργου τους, σε επίπεδο pixel στους web browsers. Το βασικότερο πρόβλημα με αυτή τη μονάδα μέτρησης είναι πως δεν κλιμακώνετε προς τα επάνω ή προς τα κάτω σε μεγαλύτερες ή μικρότερες οθόνες, έτσι ώστε να προσαρμόζεται στην εκάστοτε οθόνη.
3. Points (pt) : Η μονάδα μέτρησης pt, παραδοσιακά χρησιμοποιείτε στις εκτυπώσεις. Ένα pt είναι ίσο με 1/72 της ίντσας. Τα pt έχουν πολλά από τα χαρακτηριστικά που έχουν και τα pixels, όπως για παράδειγμα, έχουν σταθερό μέγεθος και δεν κλιμακώνονται.
4. Ποσοστό (%) : Η ποσοστιαία μονάδα μέτρησης είναι παρόμοια με τα em, και διαφοροποιούνται μόνο σε μερικά βασικά στοιχεία. Η βασικότερη διαφορά, το τρέχον μέγεθος γραμματοσειράς είναι 100%. Για παράδειγμα τα 12pt είναι ίσα με 100%. Ενώ χρησιμοποιείτε μονάδες επί τις εκατό, το κείμενο κλιμακώνετε σε κινητές συσκευές και σε συσκευές σχεδιασμένες για προσβασιμότητα.

Ωραία, και ποια είναι η διαφορά;

Για να κατανοήσουμε την διαφορά θα πρέπει να δούμε ένα ζωντανό παράδειγμα.

Ο γενικός κανόνας που ισχύει είναι ο ακόλουθος:

1em = 12pt = 16px = 100%

Ας δούμε στην πράξη αυτές τις μονάδες μέτρησης και πως συμπεριφέρονται.

	body{ font-size: 100%; }	body{ font-size: 140%; }
font-size: 1em	1em text	1em text
font-size: 12pt	12pt text	12pt text
font-size: 16px	16px text	16px text
font-size: 100%	100% text	100% text

Όπως μπορείτε να δείτε τόσο τα em όσο και οι ποσοστιαίες μονάδες μεγαλώνουν, όταν αυξάνετε και το font-size του εγγράφου, ενώ τα px και τα pt παραμένουν σταθερά.

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

Em ή %

Μετά από τη δοκιμή που πραγματοποιήσαμε παραπάνω, διαπιστώσαμε πως τα px και τα pt είναι ακατάλληλες μονάδες μέτρησης για το διαδίκτυο.

Θεωρητικά, τόσο τα em όσο και οι ποσοστιαίες μονάδες μέτρησης είναι όμοιες, αλλά στην πράξη, έχουν μερικές διαφορές μείζονος σημασίας.

Στο προηγούμενο παράδειγμα, ως μέγεθος γραμματοσειράς χρησιμοποιήσαμε ποσοστιαίες μονάδες μέτρησης. Αν όμως αλλάξουμε το μέγεθος της γραμματοσειράς του εγγράφου μας από ποσοστό σε em (για παράδειγμα body {font-size: 1em;}) τότε μάλλον δεν θα παρατηρήσετε καμία διαφορά.

Ας δούμε τι συμβαίνει όταν ορίσουμε ως μέγεθος γραμματοσειράς του εγγράφου μας το 1em, για το στοιχείο body, και  ο χρήστης αλλάξει το μέγεθος γραμματοσειράς μέσω του web browser του.

body = 1em	Text-Size: “Smallest”	Text-Size: “Largest”
font-size: 1em	This is a small text	This is a large text
font-size: 100%	This is a small text	This is a large text

Όταν ο web browser του χρήστη έχει ρυθμιστεί να εμφανίζει τις γραμματοσειρές σε ένα μέτριο μέγεθος, τότε δεν υπάρχει διαφορά μεταξύ των em και των % μονάδων.

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

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

Συμπέρασμα

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

Βάση των παραπάνω παραδειγμάτων είναι ξεκάθαρο πως οι ποσοστιαίες μονάδες μέτρησης για το μέγεθος της γραμματοσειράς είναι προτιμότερες.