Δημήτρης Γιώτας

Σαν web designer & developer, πρώτο μέλημα είναι να σχεδιάζουμε σελίδες που να είναι όσο το δυνατόν πιο όμοιες σε διαφορετικούς browser. Για εμένα, η πιο συνηθισμένη τακτική μετά το Reset CSS είναι να ορίσω τα μεγέθη των γραμματοσειρών. Υπάρχουν διαφορετική τρόποι για τον ορισμό του μεγέθους της γραμματοσειράς. Πιο συχνά συναντάμε 3: Fixed, Relative percentage & Συνδυασμός percentage & em.

Fixed font size

Σε αυτό τον τρόπο ο web designer ορίζει κάθε κομμάτι να έχει το δικό του συγκεκριμένο μέγεθος σε pixels, ανάλογα με αυτά που έχει προσθέσει στο πρόγραμμα που έχει σχεδιάσει το template. Οι πιο συνηθισμένες τιμές ξεκινάνε από 10px σαν βάση για το κυρίως κείμενο και το body και ανεβαίνουν ανά 2px ανάλογα με το στοιχείο (h6: 12px, h5: 14px κλπ).

Relative percentage font size

Σε αυτό το τρόπο ο web designer ορίζει το κάθε κομμάτι να έχει το δικό του μέγεθος σε επί τοις εκατό (%). Έχοντας σαν βάση ότι το ορισμένο από τον browser μέγεθος των γραμματοσειρών είναι 16px, η πιο συνηθισμένη τιμή για το κυρίως κείμενο και το body κυμαίνεται από 62.5% και υπολογίζεται από τον τύπο:
(10px * 100%) / 16px = 62.5%
Έχοντας σαν βάση ότι το 100% πλέον είναι ίσο με 10px μπορείς να υπολογίσεις αναλογικά και τα υπόλοιπα στοιχεία.
h6: 110% = 11px, h5: 120% = 12px, h6: 130% = 13px κλπ.

Συνδυασμός percentage & em

Η μέθοδος αυτή είναι μια παραλλαγή της προηγούμενης μόνο που αντί να ορίζεις τα υπόλοιπα στοιχεία σε percentage (%) τα ορίζεις σε em. Με τον ίδιο τύπο ορίζεις το βασικό μέγεθος της γραμματοσειράς και μετά έχοντας σαν βάση ότι το 10px είναι ίσο με 1em μπορείς να υπολογίσεις και τα υπόλοιπα στοιχεία της σελίδας παρόμοια με την προηγούμενη μέθοδο.
h6: 1.1em = 11px, h5: 1.2em = 12px, h6: 1.3em = 13px κλπ.
Όποιος έχει την διάθεση θα δει ότι αυτή η σελίδα είναι φτιαγμένη με αυτό τον τρόπο, με βάση όμως το 72% περίπου ίσο με 11.5px.

Πια μέθοδος είναι η καλύτερη

Αυτό είναι ένα ερώτημα που έχει πολλές απόψεις και πολλές γνώμες. Η πρώτη μέθοδος ήταν πολύ διαδεδομένη με τον IE 6 και τους σχεδιαστές που λειτουργούσαν περισσότερο με την λογική του έντυπου. Όταν όριζες ένα μέγεθος σε pixels ο IE 6 εφάρμοζε την λογική κατά γράμμα, αφαιρώντας την δυνατότητα στον χρήστη να αλλάξει το μέγεθος της γραμματοσειράς, δίνοντας έτσι την δύναμη στον σχεδιαστή να ορίσει ότι ήθελε όπως ήθελε.

Με την πρώτη έκδοση του Mozilla Firefox που έδινε την δυνατότητα στον χρήστη να μεγαλώσει το μέγεθος της γραμματοσειράς (και βάζω τον Mozilla Firefox γιατί με αυτόν έγινε η μεγάλη “επανάσταση” στον χώρο των browser), που άρχισε να γίνεται πιο γνωστή και η ανάγκη να δώσουμε την δύναμη στον χρήστη να μπορεί να αλλάξει το πως εμφανίζεται η σελίδα, όλες οι μέθοδοι λειτουργούν παρόμοια (εξαιρώντας τον IE 6) με μόνη ουσιαστική διαφορά τον υπολογισμό ή όχι του μεγέθους που παραμένει στην κρίση του σχεδιαστή.

Πλέον υπάρχουν και πολλά CSS Frameworks (960 Grid System, Blueprint, YAML) που μπορούν να βοηθήσουν ώστε να σχεδιάσει κάποιος μια σελίδα.

Τελικά, όλα είναι θέμα της διάθεσης και της κρίσης του σχεδιαστή αφού σκεφτεί πρώτα από όλα τον χρήστη.