The King is dead! RIP 2006-2012

Ένα μεγάλο ευχαριστώ σε όλη την παρέα
Περισσότερα στο lexx.gr

Τυπογραφία και Text-Size - Οι Μέθοδοι

16 Nov 2007 by lexx

Με αφορμή ένα σχόλιο που έγινε σήμερα θέλω να μιλήσω λίγο για την τυπογραφία και πιο συγκεκριμένα για τον τρόπο με τον οποίο είναι καταλληλότερο να ορίζουμε το μέγεθος των font σε μια σελίδα.

Το font-size καλό είναι να ορίζεται σε em ή %. Το να ορίζεις font σε Px θεωρείται λαθος. (Κομμάτι από το σχόλιο του Χάρη)

Ο Χάρης αν διαβάσετε ολόκληρο το σχόλιο έχει ένα μεγάλο δίκιο. Λέει ότι με την χρήση του em ο χρήστης σε πολλούς browser - όπως o ie6 - έχει την δυνατότητα να αλλάζει το μέγεθος της γραμματοσειράς πράγμα που δεν μπορεί να κάνει με τα px. Για να δούμε όμως το όλο θέμα αναλυτικότερα.

Αρχικά ποιες είναι μερικές δημοφιλείς επιλογές;

CSS relative sizes (Σχετικά Μεγέθη)

p { font-size: xx-large;} .small{ font-size: small;}

Υπέρ:

  • Επιτρέπει την αλλαγή του μεγέθους του font από τα ‘Text Size’ settings του browser.
  • Όλα τα μεγέθη είναι σχετικά μεταξύ τους και έτσι αλλάζουν μέγεθος με μια αναλογία

Κατά:

  • Τα relative size keywords μεταφράζονται διαφορετικά από κάθε browser. Μπορεί να είναι διαφορετικά στο IE6 των Windows και διαφορετικά σε έναν browser των Mac.

CSS pixel size

p { font-size: 14px;} .small{ font-size: 10px;}

Υπέρ:

  • Συμβαδίζουν με το pixel matrix της οθόνης και μπορούν τα font να οριστούν σε συγκεκριμένο μέγεθος pixel πράγμα που πολλές φορές είναι επιθυμητό, πχ για να μην χαλάει το layout με την αύξηση του font-size από τον ie.
  • Τα px μεταφράζονται με τον ίδιο τρόπο στους περισσότερους browser

Κατά:

  • Σε browser όπως ο ie 6 ο χρήστης δεν μπορεί να αλλάξει το μέγεθος των font από τα ‘Text Size’ settings
  • Σε πολλούς browser η μικρότερη τιμή που δέχονται είναι τα 9px

CSS point size

p { font-size: 12pt;} .small{ font-size: 8pt;}

Υπέρ:

  • Τα pt χρησιμοποιούνται περισσότερο σε έντυπα μιας και θεωρείται πως είναι πιο ευανάγνωστα

Κατά:

  • Σε browser όπως ο ie 6 ο χρήστης δεν μπορεί να αλλάξει το μέγεθος των font από τα ‘Text Size’ settings όπως και στα pixels
  • Δεν συμβαδίζουν με το pixel matrix της οθόνης και έτσι μπορούν να γίνουν δυσανάγνωστα σε αντίθεση με τα pixels

Η προτεινόμενη και επικρατέστερη μέθοδος

Η μέθοδος την οποία προτείνουν και θεωρείται ορθότερη είναι ο συνδυασμός ενός ποσοστού και τιμών em. Με αυτόν τον τρόπο επιτρέπεται από τους χρήστες να αλλάζουν text-size από τα settings του browser τους χωρίς να χάνει ο designer τον έλεγχο πάνω στο μέγεθος.

To default μέγεθος του text-size στους browser είναι 16pt. Και το 1em αντιστοιχεί σε 16pt. Για να δουλέψουμε καλύτερα και ανακτήσουμε τον έλεγχο μέσω του ποσοστού ορίζουμε το default μέγεθος της σελίδα μας σε 10pt:

body{font-size: 62.5%;} /* 10 / 16 = 0.625 */

Τώρα λοιπόν ξέρουμε για παράδειγμα ότι 12pt = 1.2em και 8pt = 0.8em

Οπότε πλέον στο css μας δουλεύουμε ως εξής:

p { font-size: 1.2em;} .small{ font-size: 0.8em;}

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