Εφαρμογή καλής τυπογραφίας στο Web (μέρος 2ο)

Ένα από τα βασικότερα χαρακτηριστικά που κάνουν το κείμενο ευκολοδιάβαστο στο Web είναι ο κάθετος ρυθμός (vertical rhythm). Με άλλα λόγια πρόκειται για το κενό που παρεμβάλλεται μεταξύ των γραμμών του κειμένου είτε πρόκειται για κείμενο μέσα στην παράγραφο είτε για την απόσταση μεταξύ headers και κειμένου.

Για τι πράγμα ακριβώς μιλάμε;

Οι δύο παρακάτω εικόνες περιέχουν το ίδιο κείμενο με τον ίδιο τίτλο. Η μόνη τους διαφορά έχει να κάνει με το γεγονός ότι στο δεύτερο υπάρχει επεξεργασία στην τυπογραφία με το αποτέλεσμα να είναι ολοφάνερο.

Στην παραπάνω εικόνα τόσο ο τίτλος όσο και το κυρίως κείμενο δεν έχουν καμία μορφοποίηση όσον αφορά τον κάθετο ρυθμό.

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

Ας υποθέσουμε ότι θέλουμε να πετύχουμε ένα κάθετο ρυθμό σαν αυτό της 2ης εικόνας. Τι πρέπει να κάνουμε;

To (x)HTML κομμάτι του κώδικα

Κατ’ αρχάς θεωρείται δεδομένο ότι η (x)HTML αναλαμβάνει να συμπεριλάβει το κείμενο και μόνο. Ο ρυθμός και οι κανόνες επιτυγχάνονται μέσω του CSS.

Το παραπάνω κείμενο σε κώδικα μεταφράζεται ως εξής:

<h1>Gutenberg (ca. 1450-1480) & The Impact of Printing>/h1>
<p>Before the printing press…</p>
<p>This remained true…</p>

Ο μηδενισμός των default τιμών των browsers μέσω CSS

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

Οι περισσότεροι browsers δίνουν μια default τιμή στο μέγεθος των γραμμάτων ίση με 16 pixels. Αν υποθέσουμε ότι το κυρίως κείμενο θέλουμε να έχει μέγεθος 10 pixels πρέπει να το δηλώσουμε. Αυτό γίνεται με δύο τρόπους. Ο πρώτος είναι να δώσουμε ποσοστό % ως εξής:

body {
font-size: 62.5%;
}

(Ο αριθμός 62.5% προκύπτει από τη διαίρεση του 10 με το 16.)

Ο παραπάνω κώδικας δηλώνει στον browser ότι το κείμενο θα έχει μέγεθος 10px. Γιατί όμως να μην ορίσει κανείς απευθείας τα 10px και να χρησιμοποιήσει ποσοστό; Γιατί χρησιμοποιώντας ποσοστά βεβαιωνόμαστε ότι όταν ο επισκέπτης της σελίδας θα δοκιμάσει να μικρύνει ή να μεγαλώσει το κείμενο (με τη χρήση των πλήκτρων Ctrl- και Ctrl+) όλοι οι browsers, ακόμα και οι πιο παλιοί, θα ανταποκριθούν.

Το ίδιο με το παραπάνω επιτυγχάνεται, αν αντί για ποσοστό % δώσουμε τιμή για το μέγεθος των γραμμάτων σε ems. O Em Calculator αναλαμβάνει τη δουλειά. Άρα, στην περίπτωση των ems το CSS αρχείο θα είναι:

body {
font-size: .63em;
}

Αυτή τη στιγμή έχουμε δηλώσει το μέγεθος των γραμμάτων που επιθυμούμε ξεπερνώντας το τι θέτει ως default κάθε browser. Χρειάζεται να γίνει το ίδιο για τα margins και τα paddings που ορίζει ο κάθε browser. Θυμίζω στα γρήγορα με μια εικόνα τι είναι το margin και τι το padding. Την εικόνα έφτιαξε ο μάγος του design, Jon Hicks.

Ο μηδενισμός των margins και των paddings γίνεται εύκολα:

body, h1, p {
margin: 0;
padding: 0;
}

Τώρα έχουμε μηδενίσει και τις default αποστάσεις μεταξύ των πραγράφων και των τίτλων.

Η ώρα της αρμονίας

Για να πετύχουμε την αρμονία πρέπει να δώσουμε επαρκείς αποστάσεις

• στις σειρές του κειμένου μεταξύ τους
• μεταξύ των παραγράφων
• μεταξύ τίτλων και παραγράφων

Τα δύο πρώτα θα τα πετύχουμε με ένα κανόνα στο CSS αρχείο μας:

p {
font-size: 1em;
line-height: 1.5em;
margin: 1em 0 2em 0;
}

Τι λέει το παραπάνω; Κατ’ αρχήν ότι το μέγεθος του κειμένου μέσα στην παράγραφο θα είναι όσο το ορίσαμε, 1em ή 10px.

Στη συνέχεια αυξάνουμε την απόσταση μεταξύ των γραμμών σε 1.5em. Δίνοντας αέρα 1.5em μπορούμε να είμαστε σίγουροι ότι οι γραμμές μας “αναπνέουν” και το κείμενο είναι πιο ευκολοδιάβαστο. Αν λειτουργούσαμε με pixels, θα δίναμε: line-height: 15px για μέγεθος γραμματοσειράς 10px.

Τέλος, αυξάνουμε την απόσταση των παραγράφων μεταξύ τους. Τώρα η απόστασή τους είναι 3em. To margin: 1em 0 2em 0 σημαίνει ότι μία παράγραφος απέχει από την προηγούμενή της 1em, από δεξιά 0, από την επόμενή της 2em και από αριστερά 0 (οι τιμές διαβάζονται με τη φορά των δεικτών του ρολογιού). Μπορεί φυσικά κάποιος να παίξει με τις αποστάσεις για να βρει τη δική του αρμονία.

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

h1 {
font-size: 1.5em;
line-height: 1.5em;
margin: 1.5em 0 2.5em 0;
}

O τίτλος μας πια έχει αλλάξει μέγεθος κι έχει γίνει 1.5em δηλαδή 15px. Ίδια είναι και η απόσταση μεταξύ των τίτλων. Τα αντίστοιχα margins είναι πια (σε pixels): 15px, 0, 25px, 0. Προφανώς τα margins καθορίζονται με βάση το μέγεθος των γραμμάτων του h1.

Επίλογος

Το παραπάνω παράδειγμα δεν είναι βέβαια δεσμευτικό. Ο καθένας μπορεί να βρει το δικό του ρυθμό. Βασικό ρόλο παίζει και η γραμματοσειρά. Άλλιώς φαίνεται με τις παραπάνω τιμές π.χ. η Verdana κι αλλιώς η Georgia ή η Trebuchet.

Ένα εξαιρετικό κείμενο περί κάθετου ρυθμού έγραψε ο Richard Rutter για το 24 ways. To κείμενο εκείνο ήταν η αφορμή να γράψω αυτό εδώ και μπορεί να σας φανεί χρήσιμο. Στο ίδιο στυλ υπάρχει και το Setting Type on the Web to a Baseline Grid στο (πού αλλού;) A List Apart.

Ο κάθετος ρυθμός δεν εξαντλείται στους τίτλους και τις παραγράφους. Υπάρχουν και οι λίστες οι οποίες μπορούν να ομορφύνουν πολύ, αν εφαρμοσθούν κάποιοι ανάλογοι κανόνες.

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