Η τυπογραφία ως κομμάτι του design

H Wikipedia ορίζει την τυπογραφία ως:

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

Νομίζω ότι αυτός ο ορισμός θέτει το θέμα στη σωστή του βάση. Η τυπογραφία είναι κάτι περισσότερο από το να δίνει κάποιος μερικές ιδιότητες στο κείμενο. Γιατί είναι και τέχνη και τεχνική. Στην πραγματικότητα είναι ένα κομμάτι του design, για το λόγο ότι -όπως ειπώθηκε- απαιτεί συγκεκριμένες αποφάσεις σχετικές με το design.

H τυπογραφία ζει και εξελίσσεται μέσα στο χρόνο. Είναι βέβαια μια ελληνική λέξη και περισσότερα για την ετυμολογία της μπορεί να βρει κάποιος στο παραπάνω link. Αντί για να μιλήσω θεωρητικά για την τυπογραφία, νομίζω ότι θα ήταν πιο χρήσιμο να δώσω μερικά παραδείγματα, που λένε πιο καλά αυτό που εννοώ.

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

Βήμα #1

Υλικά:

• Γραμματοσειρά: Verdana
• Μέγεθος: 16px
• Χρώμα: #000
• Στυλ: κανένα

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

Βήμα #2

Υλικά:

• Γραμματοσειρά: Georgia (για το “porcupine colors”), Verdana (για το “| Web Design and spare parts”)
• Μέγεθος: 16px
• Χρώμα: #000
• Στυλ: κανένα

Σχόλια:
Στο σημείο αυτό αποφασίζω να αλλάξω τη γραμματοσειρά του τίτλου. Χρησιμοποιώ μια serif γραμματοσειρά για να το κάνω να ξεχωρίζει. Ωστόσο, ο τίτλος πια δείχνει πολύ μικρός σε σχέση με το υπόλοιπο λογότυπο.

Βήμα #3

Υλικά:

• Γραμματοσειρά: Georgia (για το “porcupine colors”), Verdana (για το “| Web Design and spare parts”)
• Μέγεθος: 18px (για το “porcupine colors”), 12px (for “| Web Design and spare parts”)
• Χρώμα: #000
• Στυλ: κανένα

Σχόλια:
Ο τίτλος έχει αποκτήσει ένα καλό μέγεθος σε σχέση με τον υπότιτλο. Μπορούμε να προχωρήσουμε σε αλλαγές σε σχέση με το χρώμα.

Βήμα #4

Υλικά:

• Γρμματοσειρά: Georgia (για το “porcupine colors”), Verdana (για το “| Web Design and spare parts”)
• Μέγεθος: 18px (για το “porcupine colors”), 12px (για το “| Web Design and spare parts”)
• Χρώμα: #000 (για το “porcupine colors”), #ccc (για το “|”), #999 (για το “Web Design and spare parts”)
• Στυλ: κανένα

Σχόλια:
Προσπαθώ να κάνω τη διαφορά μεταξύ τίτλου και υπότιτλου ακόμα πιο φανερή με το να αλλάξω τα χρώματα. Το μαύρο για τον τίτλο είναι καλό, το γκρι για τον υπότιτλο είναι εύκολο να διαβαστεί και το ακόμα πιο ανοιχτό γκρι της κάθετης γραμμής την κάνει να “συμμετέχει” λίγο λιγότερο στο λογότυπο.
Το μήνυμα έχει γίνει καθαρό: ο τίτλος του τόπου είναι “porcupine colors” και το site αυτό μιλάει για Web Design κι άλλα πράγματα.

Βήμα #5 (Τελευταίο)

Υλικά:

• Γραμματοσειρά: Georgia (για το “porcupine colors”), Verdana (για το “| Web Design and spare parts”)
• Μέγεθος: 18px (για το “porcupine colors”), 16px (για το “| Web Design and spare parts”)
• Χρώμα: #000 (για το “porcupine colors”), #ccc (για το “|”), #999 (για το “Web Design and spare parts”)
• Στυλ: Italic (για το “porcupine colors”), τίποτα για το υπόλοιπο

Σχόλια:
Το τελευταίο βήμα σκοπεύει να δόσει ακόμα περισσότερη έμφαση στον τίτλο. Η italic Georgia δημιουργεί μια ροή στο διάβασμα του κειμένου, που οδηγεί το μάτι αρμονικά στον υπότιτλο. Η Georgia σε italic δείχνει πολύ όμορφη.

Κατά τη διάρκεια αυτών των βημάτων επέλεξα να χρησιμοποιήσω standard γραμματοσειρές και αποχρώσεις του μαύρου μόνο, γιατί πιστεύω ότι η τυπογραφία διέπεται από απλούς κανόνες. Βέβαια, το να τους μάθει κάποιος αυτούς τους κανόνες απαιτείται χρόνος, εμπειρία και σίγουρα δουλειά.