The King is dead! RIP 2006-2012

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

Web Safe γραμματοσειρές και οι διαφορές τους

22 Apr 2008 by thpoul

Κύριο μέλημα ενός web designer πριν ακόμα την γραφική σχεδίαση μίας ιστοσελίδας αποτελεί η χρηστικότητα της. Ένας από τους παράγοντες που συντελούν user friendly ένα site είναι αυτός της επιλογής της κύριας γραμματοσειράς. Γράφω κύριας γιατί βλέπουμε συχνά συνδυασμούς γραμματοσειρών με πολύ όμορφα αποτελέσματα. Έχουμε και λέμε λοιπόν...

Ποιες γραμματοσειρές μπορώ να χρησιμοποιήσω;

Οι γραμματοσειρές χωρίζονται σε δύο κατηγορίες:

  • Σε αυτές που είναι web safe, δηλαδή είναι προεγκατεστημένες στο λογισμικό του υπολογιστή μας
  • Σε αυτές που δεν είναι web safe, δηλαδή αυτές που εγκαθιστούμε εμείς προαιρετικά.

Στη συνέχεια οι web safe χωρίζονται σε άλλες μεταξύ τους κατηγορίες ανάλογα το λογισμικό που χρησιμοποιούμε, δηλαδή:

  • Γραμματοσειρές Windows
  • Γραμματοσειρές Mac
  • Γραμματοσειρές Linux
  • κ.ο.κ

Οι κυριότερες web safe γραμματοσειρές που θα συναντήσουμε κατά 99,9% στο διαδίκτυο είναι οι εξής δέκα:

  1. Arial (Monotype Typography, 1982)
  2. Arial Black (Monotype Typography, 1982)
  3. Comic Sans MS (Microsoft, 1995)
  4. Courier New (IBM, 1955)
  5. Georgia (Microsoft, 2000)
  6. Impact (Stephenson Blake, 1965)
  7. Times New Roman (Linotype, 1931)
  8. Trebuchet MS(Microsoft, 1996)
  9. Verdana (Microsoft, 1996)
  10. Wingdings (Microsoft, 1990)

Οι εννιά πρώτες αφορούν την εμφάνιση των κειμένων στην ιστοσελίδα ενώ η δέκατη τα διάφορα σύμβολα που χρησιμοποιούμε κατά καιρούς στον html κώδικά μας.

Ποιες γραμματοσειρές είναι κοινές στα τρία κυριότερα λειτουργικά συστήματα;

Οι γραμματοσειρές που θεωρούνται default σε Windows, Mac, Linux είναι οι εξής:

  • Arial / Helvetica
  • Times New Roman / Times
  • Courier New / Courier

Υπάρχει και μία δεύτερη λίστα με κοινές γραμματοσειρές για τα παραπάνω λειτουργικά συστήματα, όχι όμως πάντα:

  • Palatino
  • Garamond
  • Bookman
  • Avant Garde

Κοινές γραμματοσειρές Windows και Mac:

  • Verdana
  • Georgia
  • Comic Sans MS
  • Trebuchet MS
  • Arial Black
  • Impact

Το κάθε λογισμικό έχει τις δικές του default γραμματοσειρές:

  • Windows
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Microsoft Sans Serif
  • MS Mincho
  • Palatino Linotype
  • Symbol
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Mac
  • American Typewriter
  • Andale Mono
  • Arial
  • Arial Black
  • Arial Narrow
  • Brush Script MT
  • Capitals
  • Apple Chancery
  • Baskerville
  • Big Caslon
  • Charcoal
  • Chicago
  • Comic Sans MS
  • Copperplate
  • Courier
  • Courier New
  • Didot
  • Gadget
  • Geneva
  • Gill Sans
  • Futura
  • Helvetica
  • Helvetica Neue
  • Georgia
  • Herculanum
  • Hoefler Text
  • Impact
  • Lucida Grande
  • Marker FeltMonaco
  • New York
  • Optima
  • Papyrus
  • Sand
  • Skia
  • Techno
  • Textile
  • Times
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino
  • Linux (εξαρτάται από την εκάστοτε διανομή)

Ποιες είναι οι κύριες διαφορές μεταξύ των πιο διάσημων web safe γραμματοσειρών;

Arial:

  • Διαθεσιμότητα: Είναι από τις πιο κοινές γραμματοσειρές. Έρχεται πακέτο με τα windows από την εποχή των 3.1.
  • Αναγνωσιμότητα στην οθόνη: Όχι η χειρότερη αλλά σίγουρα όχι και η καλύτερη, ειδικά στα μικρά μεγέθη, γίνεται πάρα πολύ στενή και το διάστημα μεταξύ των χαρακτήρων πάρα πολύ μικρό.
  • Χαρακτήρας: Σαφής αλλά βαρετός.
  • Η αντιστοιχία της Arial σε Mac είναι η Helvetica.

Times New Roman:

  • Διαθεσιμότητα: Είναι από τις πιο κοινές γραμματοσειρές. Έρχεται και αυτή πακέτο με τα windows από την εποχή των 3.1.
  • Αναγνωσιμότητα στην οθόνη: Αποδεκτή για μεγέθη 12pt και μεγαλύτερα , αλλά πολύ δυσανάγνωστη για μικρότερα.
  • Χαρακτήρας: Σοβαρός, επίσημος αλλά ντεμοντέ.
  • Η αντιστοιχία της Times New Roman είναι η Times.

Verdana:

  • Διαθεσιμότητα: Πολύ κοινή γραμματοσειρά, την οποία συναντάμε αρχικά με την έκδοση 3 του Internet Explorer, όταν απαίτησε η εκθετική αύξηση του διαδικτύου μια νέα γραμματοσειρά που ήταν εύκολο να διαβαστεί στην οθόνη.
  • Αναγνωσιμότητα στην οθόνη: Εξαιρετική. Το πλάτος της την καθιστά ευανάγνωστη ακόμη και στα μικρά μεγέθη.
  • Χαρακτήρας: Σύγχρονος, φιλικός και επαγγελματικός.

Georgia:

  • Διαθεσιμότητα: Αρκετά κοινή γραμματοσειρά, την οποία συναντάμε αρχικά με την έκδοση 4 του Internet Explorer, όταν η ανάγκη για μια γραμματοσειρά με πολύ καλύτερη αναγνωσιμότητα από την Times New Roman έγινε εμφανής.
  • Αναγνωσιμότητα στην οθόνη: Πολύ καλή. Είναι η καλύτερη γραμματοσειρά για ανάγνωση στο internet δεδομένου ότι σχεδιάστηκε συγκεκριμένα για αυτό τον σκοπό.
  • Χαρακτήρας: Σύγχρονος, φιλικός και επαγγελματικός.

Η εξέλιξη.

Η Microsoft διέδωσε δύο ακόμη γραμματοσειρές, την Comic Sans Serif και την Trebuchet MS. Την Comic Sans Serif τη συναντάμε για πρώτη φορά στον Internet Explorer 3 που προσπαθεί να μιμηθεί τον τρόπο γραφής των κόμικ ενώ η Trebuchet MS θυμίζει μία καλύτερη έκδοση της Arial. Φυσικά μια ακόμη γραμματοσειρά που άφησε εποχή και πλέον χρησιμοποιείται μονάχα για να διαβάζουμε πηγαίο κώδικα σε κείμενο είναι η Courier New η οποία είναι βασισμένη στις παλιές γραφομηχανές.

Τελικά άκρη δε βγάλαμε, τι να επιλέξω τελικά;

Σίγουρα οι επιλογές δεν είναι και τόσες πολλές για να τις σκεφτούμε διεξοδικά. Προσωπικά λατρεύω τις Tahoma, Verdana, Trebuchet MS ακόμη κι αν οι φίλοι μου από Linux έχουν προβλήματα να επισκέπτονται τα site που σχεδιάζω. Η γραμματοσειρά είναι καθαρά προσωπικό θέμα. Η χρήση των κατάλληλων μεγεθών (προς Θεού πάντα με em) και οι μικρές παραλλαγές (όπως καλή ώρα αυτές που έχει κάνει ο Αλέξανδρος στο webz) μπορούν να καταστήσουν οποιαδήποτε γραμματοσειρά ευανάγνωστη και καλαίσθητη.

Δεν έγραψα τίποτα περί css (font families, em, κτλ) διότι ο Αλέξανδρος ετοιμάζει έναν πολύ καλό οδηγό. Για όσους όμως ενδιαφέρονται μπορείτε να επισκεφτείτε το http://typetester.maratz.com και να τεστάρετε διάφορους συνδυασμούς.