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

Η τυπογραφία αποτελεί βασίκο κομμάτι του Web design. Στο παρελθόν ασχολήθηκα αρκετές φορές, αλλά συχνά είναι καλύτερα να επιστρέφεις στα βασικά και να ξεκινάς από εκεί.

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

Τα βασικά

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

Το βασικό ύψος μιας γραμματοσειράς είναι το x-height. Όμως υπάρχουν γράμματα όπως το “h” ή το “g” που βγαίνουν εκτός του x-height. Το τμήμα του γράμματος που βγαίνει προς τα πάνω λέγεται ascender κι αυτό προς τα κάτω είναι το descender. Τα ύψη αυτά καθορίζουν και τα ascender line και descender line.

Kerning και Letter-spacing

Το kerning είναι η απόσταση μεταξύ δύο γραμμάτων.

To letter-spacing είναι η μέση απόσταση μεταξύ όλων των γραμμάτων. Στην πράξη δηλαδή, και μόνο για το Web γιατί στο έντυπο τα πράγματα αλλάζουν, το kerning και το letter-spacing είναι το ίδιο πράγμα.

Leading (ή line-height)

Το leading είναι η απόσταση μεταξύ των γραμμών ενός κειμένου. Ο όρος leading προήλθε από τα κομμάτια μόλυβου (lead) που έβαζαν οι τυπογράφοι στις εφημερίδες ανάμεσα στις γραμμές ώστε να δώσουν κάποια απόσταση μεταξύ τους.

Ο όρος line-height καθιερώθηκε στα CSS ώστε να καθορίζει την απόσταση μεταξύ των γραμμών. Αν κάποιος γνωρίζει, πολύ θα ήθελα να μάθω γιατί δε χρησιμοποιούμε το leading και στα CSS.

em και points

Aν το pixel είναι γνωστό σε όλους, το em έχει τη δική του ιστορία. Δείχνει το πλάτος του κεφαλαίου “M”. Πιο σωστά ορίζεται ως ως ο αριθμός των points που αντιστοιχεί στο συγκεκριμένο πλάτος. Αν δηλαδή το πλάτος του “Μ” είναι 14 points, τότε το 1em είναι 14 points.

To point είναι ένας τρόπος μέτρησης στην τυπογραφία. Αντιστοιχεί σχεδόν στο 1/72 της ίντσας.

Στο Web design είναι καλό να χρησιμοποιούνται ems αντί για pixels. Ένας από τους λόγους που προτιμάται το em είναι γιατί αυξομειώνοντας το μέγεθος του κειμένου στον browser (με το συνδυασμό πλήκτρων Ctrl+ ή Ctrl-), οι παλιές εκδόσεις του Internet Explorer αρνούνται να το κάνουν αυτό όταν το κείμενο είναι δοσμένο σε pixels.

Ένας άλλος λόγος είναι η χρήση του elastic layout το οποίο μπορεί να αυξομειώσει το μέγεθος όλου του layout με βάση το μέγεθος του κειμένου όταν αυτό είναι δοσμένο σε ems.

Serif και Sans-serif γραμματοσειρές

Πρόκειται για έναν από τους πιο εύκολους τρόπους να διαχωρίσει κάποιος τις γραμματοσειρές. Οι serif γραμματοσειρές έχουν στις άκρες τους διάφορα ειδικά τελειώματα όπως στρογγυλεμένες και πιο γεμάτες απολήξεις. Οι sans-serif είναι πιο απλές.

Βέβαια υπάρχουν γραμματοσειρές που ακροβατούν μεταξύ των serif και των sans-serif, έτσι για να μας κάνουν τη ζωή πιο ενδιαφέρουσα.

Ο συνδυασμός μιας serif γραμματοσειράς (συνήθως για τους τίτλους) και μιας sans-serif μπορεί να απογειώσει ολόκληρο το design.

Επίλογος

Για τα παραδείγματα χρησιμοποίησα τη Georgia (serif) και την ιστορική Helvetica (sans-serif). Ελπίζω αυτά τα λίγα να σας άρεσαν όσο κι εμένα. Στο επόμενο μέρος της μίνι σειράς θα προσπαθήσω να πω περισσότερα για την εφαρμογή των πιο πάνω στο Web design.