Αναπνοή

Τα καλά, τα κακά και τα σπουδαία παραδείγματα τυπογραφίας ιστού. Το καλό, το κακό και τα μεγάλα παραδείγματα τυπογραφίας Ιστού Όμορφη τυπογραφία

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

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

Έτσι, σήμερα, θα αγνοήσουμε τις τάσεις της μόδας και θα επικεντρωθούμε στη θεωρία της τυπογραφίας και στο πώς οι «κανόνες» μπορούν να μας βοηθήσουν να δημιουργήσουμε όμορφο κείμενο.

Μέγεθος και ιεραρχία

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

Η αναγνώσιμη τυπογραφία έχει πολλαπλά επίπεδα ιεραρχίας. Αυτά τα επίπεδα λένε στον χρήστη τι να διαβάσει πρώτο, δεύτερο και τρίτο. Επίσης, υπάρχει μια προφανής ιεραρχία στα μεγέθη του κειμένου - ένα μέγεθος για τις επικεφαλίδες, ένα άλλο για το κυρίως κείμενο και ένα τρίτο για τις υποκεφαλίδες.

Tracking και kerning

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

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

Περιορίστε τον αριθμό των στυλ γραμματοσειράς που εφαρμόζετε

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

Ανακατέψτε και συγκρίνετε στυλ

Συνιστώ να επιλέξετε δύο διαφορετικά στυλ. Το πιο κοινό ζευγάρι είναι το serif και το sans serif. Όταν συνδυάζετε διαφορετικά στυλ και πινελιές, αναζητήστε γράμματα που έχουν το ίδιο ύψος και σχήμα κυπέλλου (το κενό μέσα σε κλειστά γράμματα όπως "o").

Αυτές οι μικρές λεπτομέρειες θα κάνουν μεγάλη διαφορά στο πώς φαίνονται αυτές οι γραμματοσειρές μαζί και πόσο εύκολο είναι να διαβαστεί το κείμενο.

Μεταφορές και ευθυγραμμίσεις

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

Μην αλλάζετε γραμματοσειρές

Μην αλλάζετε ποτέ τη γραμματοσειρά. Μην προσπαθήσετε να το κάνετε πιο χοντρό, λεπτό ή ψηλότερο. Καλύτερα να διαλέξεις ένα άλλο.

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

Εάν η γραμματοσειρά δεν σας ταιριάζει, τότε ψάξτε για κάτι άλλο. Χρησιμοποιήστε το εργαλείο παρόμοιας γραμματοσειράς Identifont, ένα εργαλείο που προσδιορίζει παρόμοιες γραμματοσειρές.

Αντίθεση

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

Το χρώμα είναι ένας από τους πιο αποτελεσματικούς και απλούστερους τρόπους για να δημιουργήσετε αντίθεση. Η ιδανική αντίθεση είναι το σκούρο κείμενο σε ανοιχτόχρωμο φόντο (ή το αντίστροφο). Έχετε μια σχεδόν απεριόριστη επιλογή χρωμάτων που θα σας βοηθήσουν να επιτύχετε αυτόν τον στόχο. Όταν παίζετε με το χρώμα και την τυπογραφία, να έχετε κατά νου ότι ορισμένοι χρωματικοί συνδυασμοί, όπως το έντονο κόκκινο σε έντονο μπλε, μπορεί να είναι αρκετά δύσκολο να διαβαστούν.

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

Μορφή λωρίδας κλήσης

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

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

Από το The Elements of Typographic Style: «Οποιοσδήποτε αριθμός χαρακτήρων, που κυμαίνεται από 45 έως 75, θεωρείται ικανοποιητικό μήκος γραμμής για στοιχειοθεσία μονής στήλης. Μια συμβολοσειρά 66 χαρακτήρων (συμπεριλαμβανομένων γραμμάτων και διαστημάτων) θεωρείται ιδανική. Για πληκτρολόγηση πολλών στηλών, η ιδανική μεσαία επιλογή θα ήταν μια γραμμή μήκους 40-50 χαρακτήρων.»

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

Μετάφραση του άρθρου από την Carrie Cousins

Ο επιμελητής του πόρου γραμματοσειράς Typewolf, Jeremy Shoaf, επέλεξε παραδείγματα τοποθεσιών με ενδιαφέρουσες λύσεις γραμματοσειρών και περιέγραψε τα πλεονεκτήματα και τα μειονεκτήματά τους.

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

Simply Gum

Χάρη στις γραμματοσειρές Ιστού που βοηθούν στην αντιστοίχιση της τυπογραφίας της συσκευασίας του προϊόντος με την τυπογραφία του ιστότοπου του κατασκευαστή. Αυτό συμβαίνει όλο και πιο συχνά. Η Simply Gum επέλεξε την Gotham ως την ταυτότητα της επωνυμίας της, διατηρώντας την ταυτότητα συνεπή τόσο σε διαδικτυακά όσο και εκτός σύνδεσης κανάλια.

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

Τα λογότυπα στην κεφαλίδα και το υποσέλιδο είναι σε μορφή PNG, έτσι χάνουν τη σαφήνεια και την επεκτασιμότητα μιας γραμματοσειράς Ιστού. Η χρήση γραμματοσειράς Ιστού για το λογότυπό σας δεν είναι πάντα εφικτή, ειδικά εάν χρειάζεστε καλό έλεγχο της πυρήνωσης. Ωστόσο, μια εικόνα SVG είναι καλύτερη από μια εικόνα PNG σε αυτήν την περίπτωση, επειδή μπορεί να κλιμακωθεί και να διατηρήσει την ευκρίνειά της.

Σύντομο συμπέρασμα

Ευτυχώς, τα παραπάνω παραδείγματα έδειξαν πώς ορισμένες αποφάσεις τυπογραφίας μπορούν να επηρεάσουν ένα σχέδιο. Εδώ είναι μερικές βασικές σκέψεις:

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

Η λίστα αυτή καταρτίστηκε με βάση τα αποτελέσματα του δεύτερου τριμήνου. 2008. Προηγούμενες «παρελάσεις επιτυχιών» μπορούν να βρεθούν και.

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

Συνέδριο Σπόρων

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

Σχεδιάζοντας τα Νέα

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

OmniTI

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

Designr.it

Πανέμορφο περίτεχνο λογότυπο (ξέρει κανείς τι γραμματοσειρά είναι αυτή;) και πολλές εξαιρετικές λεπτομέρειες.

Προβολή σχεδίου

Ο Andy Rutledge είναι ένας σχεδιαστής που εφαρμόζει τις ίδιες αρχές που πρεσβεύει. Μου αρέσει το πώς αλλάζει το μέγεθος της γραμματοσειράς ανάλογα με την ημερομηνία δημοσίευσης του άρθρου, έτσι ώστε το πιο πρόσφατο κείμενο να αντιστοιχεί στο μεγαλύτερο μέγεθος γραμματοσειράς.

WordPress.org & WP 2.5.x Διαχειριστής

Αν και η πλατφόρμα blogging WordPress δεν βασίζεται σε ιστότοπους, ο ιστότοπός τους εμφανίζεται σε χιλιάδες, αν όχι εκατομμύρια, οθόνες μας κάθε μέρα. Μακάρι περισσότερες διαδικτυακές και εκτός σύνδεσης εφαρμογές να φαίνονται τόσο καλές.

OurType

Πραγματικά δεν ήθελα να συμπεριλάβω αυτόν τον ιστότοπο στην κριτική επειδή χρησιμοποιεί Flash. Ωστόσο, κάνει εξαιρετική δουλειά στο να εμφανίζει μερικές εξαιρετικές γραμματοσειρές (και μερικές από τις αγαπημένες μου, θα μπορούσα να προσθέσω).

Το κατάστρωμα

Ένας άλλος ιστότοπος που βασίζεται απλώς σε γραμματοσειρές. Ένα εξαιρετικό παράδειγμα ιεραρχίας και διάταξης. Ποιος είπε ότι «μια φωτογραφία μιλάει περισσότερες από χίλιες λέξεις»; Όχι, η γραμματοσειρά μιλάει καλύτερα.