Τελικός οδηγός για την τυπογραφία: Μέγεθος σημείου, κεφαλαία έναντι πεζών, Em και En Dashes και άλλα

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

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

Σε αυτό το άρθρο, θα εξετάσουμε μερικές από τις μικρότερες - αλλά ακόμα σημαντικές - λεπτομέρειες που σχετίζονται με την τυπογραφία όπως το μέγεθος σημείου, κεφαλαία έναντι πεζών γραμμάτων, em vs en dashes, kerning και πολλά άλλα.

Μέγεθος σημείου

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

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

html{ font-size:16px; } body{ font-size:1em; // 1em is equal to 16px }

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

Στις ψηφιακές γραμματοσειρές, ένα σημείο ισούται με το 1/72 της ίντσας . Δώδεκα πόντοι κάνουν ένα pica. Έξι picas κάνουν μια ίντσα. Ένας κοινός τρόπος αναπαραγωγής picas και πόντων είναι ο εξής:

  • 1 pica = 1p
  • 1 πόντο = 1 πόντο ή p1
  • 6 πίκες και 3 πόντοι = 6p3
  • Open Sans 7 πόντων με 9 πόντους από το προβάδισμα = 7/9 Open Sans

Το βέλτιστο μέγεθος σημείου για εκτύπωση είναι συνήθως μεταξύ 10-12 σημείων, ενώ αυτό για τον ιστό, το βέλτιστο μέγεθος σημείου είναι μεταξύ 15-25 σημείων.

Στο CSS, θα πρέπει να ορίσετε το μέγεθος της γραμματοσειράς σε ems ή rem σε σχέση με τα pixel, καθώς τα πρώτα είναι επεκτάσιμα στη φύση. Πρόσφατα, έχουν γίνει πολλές συζητήσεις σχετικά με την υγρή τυπογραφία χρησιμοποιώντας τις νέες μονάδες vw και vh.

Μάθετε περισσότερα για αυτό εδώ: Fluid Typography

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

ΚΕΦΑΛΑΙΑ και πεζα

Το κεφαλαίο (UC) αναφέρεται εναλλακτικά ως κεφαλαία και κεφαλαία. Είναι μια γραμματοσειρά με μεγαλύτερους χαρακτήρες. Το πεζά (LC) είναι μια γραμματοσειρά μικρών χαρακτήρων. Εφόσον δεν πατάτε το πλήκτρο shift και το κλείδωμα Caps δεν είναι ενεργό, όλα που πληκτρολογείτε είναι πεζά. Το κεφαλαίο και το πεζά είναι συχνά συνώνυμο με το Majuscule και το Minuscule.

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

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

Κεφαλαία:

ABCDEFGHIJKLMNOPQRSTU VWXYZ

Πεζά:

abcdefghijklmnopqrstu vwxyz

Η χρήση κεφαλαίων είναι σημαντική για τους ακόλουθους λόγους:

  • Κωδικοί πρόσβασης: οι κωδικοί πρόσβασης είναι πεζών-κεφαλαίων, οπότε η χρήση κεφαλαίων προσθέτει ένα επιπλέον επίπεδο ασφάλειας.
  • Μετρήσεις: Όταν ασχολείστε με μετρήσεις υπολογιστή και άλλες μετρήσεις, η χρήση κεφαλαίων είναι σημαντική για τον προσδιορισμό του ακριβούς τύπου μέτρησης. Για παράδειγμα, τα "Mb" (συντομογραφία για Megabit) και "MB" (συντομογραφία για Megabyte) είναι δύο διαφορετικοί τύποι μετρήσεων με διαφορετικές τιμές.
  • Εντολές
  • Ονόματα αρχείων, κατάλογοι και διαδρομές.

Ems και Ens

Τα Ems και Ens είναι μια μορφή του σημείου στίξης που ονομάζεται «παύλα». Αν και μοιάζει με εμφάνιση παύλας, εξυπηρετούν διαφορετικούς σκοπούς.

Em Dash

Χρησιμοποιήστε μια παύλα Em για να υποδηλώσετε ένα διάλειμμα στην πρόταση. Αντικαταστήστε το για κόμμα ή για να δηλώσετε μια παύση σε μια πρόταση. Χρησιμοποιούνται επίσης για να αποδώσουν μια προσφορά σε έναν ομιλητή. Μια παύλα Em έχει πλάτος ένα - το πλάτος ενός σημείου μεγέθους μιας γραμματοσειράς. Μην τοποθετείτε κενά πριν και μετά από μια παύλα.

Για παράδειγμα: Ο θόρυβος από το σπίτι του γείτονα - με σκοτώνει.

  • Εντολή για μια παύλα Em σε mac: Shift-Option-Hyphen
  • Εντολή για μια παύλα Em στο Microsoft Word: Alt + Ctrl + (μείον)
  • Em dash σε HTML: ή

Εν Νας

Χρησιμοποιήστε μια παύλα ως αντικατάσταση της λέξης «to» ή για να δηλώσετε μια σειρά αριθμών. Το En dash είναι το μισό πλάτος μιας παύλας Em. Μην τοποθετείτε κενά πριν και μετά από μια παύλα.

Για παράδειγμα: Ο πρώτος παγκόσμιος πόλεμος διήρκεσε από το 1914-1918.

  • Εντολή για μια παύλα En σε mac: Option-Hyphen
  • Εντολή για μια παύλα στο Microsoft Word: Ctrl + (μείον)
  • Εντός παύσης σε HTML: ή

Kerning και παρακολούθηση

Το Kerning αναφέρεται στο διάστημα μεταξύ δύο μεμονωμένων χαρακτήρων μέσα σε μια λέξη.

Η παρακολούθηση αναφέρεται στο διάστημα μεταξύ των λέξεων.

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

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

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

Αναγνωσιμότητα και αναγνωσιμότητα

Αναγνωσιμότητα

Η αναγνωσιμότητα σημαίνει ότι μπορείτε να διαφοροποιήσετε διαφορετικούς χαρακτήρες σε ένα κείμενο. Το ευανάγνωστο κείμενο σημαίνει ότι μπορεί εύκολα να ερμηνευτεί. Κοιτάξτε τα μοναδικά χαρακτηριστικά μιας γραμματοσειράς όταν εξετάζετε την αναγνωσιμότητα. Μερικές από τις σκέψεις είναι οι εξής:

  • Θα πρέπει να χρησιμοποιείτε κάθε γραμματοσειρά ανάλογα με το περιβάλλον και την προβλεπόμενη χρήση . Εξετάστε το ιστορικό του και είναι σενάρια βέλτιστης χρήσης. Για παράδειγμα: Το Garamond χρησιμοποιείται καλύτερα για μεγάλα σώματα κειμένου σε έντυπη μορφή, ενώ η Γεωργία για οθόνη.
  • Λάβετε υπόψη εάν η γραμματοσειρά είναι για κείμενο ή σώμα .
  • Το ύψος x μιας γραμματοσειράς είναι το μέγεθος του πεζού «x» σε μια γραμματοσειρά. Μια γραμματοσειρά με μεσαίο έως υψηλό ύψος x οδηγεί σε κείμενο ευανάγνωστο ακόμη και σε μικρά μεγέθη.
  • Συμβατικά, οι γραμματοσειρές serif είναι πιο ευανάγνωστες για το κείμενο του σώματος από τις αντίστοιχες του sans-serif.

Ευανάγνωστο

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

Ο Stephen Coles παρατηρεί ότι η αναγνωσιμότητα, όχι μόνο θέτει το ερώτημα «Μπορείτε να το διαβάσετε;» αλλά αν "θέλετε να το διαβάσετε;" .

Ο Jason Santa Maria επισημαίνει στο βιβλίο του On Web Typography ότι η ανάγνωση δεν είναι γραμμική δραστηριότητα. Διαβάζουμε εμπρός και πίσω κίνηση που ονομάζεται σακκάδες , που είναι τα μάτια μας να μεταπηδούν από το ένα σημείο στο άλλο. Επίσης, το κείμενο με γνωστές λέξεις μας διευκολύνει στην ανάγνωση. Ορισμένα βασικά σημεία που πρέπει να θυμάστε όταν εξετάζετε την αναγνωσιμότητα είναι τα εξής:

  • Η αντίθεση αναφέρεται στην αλλαγή στο πάχος της διαδρομής σε διαφορετικά μέρη του γράμματος. Όσο υψηλότερη είναι η αντίθεση, τόσο μεγαλύτερη είναι η αλλαγή στο εγκεφαλικό. Χρησιμοποιήστε γραμματοσειρές μεσαίας έως χαμηλής αντίθεσης για μεγάλα σώματα κειμένου.
  • Line Height αναφέρεται στην απόσταση μεταξύ δύο γραμμών κειμένου. Δεν θέλετε να κάνετε το μπλοκ κειμένου ούτε πολύ σφιχτό ούτε πολύ χαλαρό. Μπορείτε να ελέγξετε το ύψος γραμμής σε CSS από την ιδιότητα "line-height". Για τα περισσότερα κείμενα, μπορείτε να το ορίσετε από 1,2 έως 1,5 (χωρίς μονάδες).
  • Το μήκος γραμμής (μέτρο) αναφέρεται στον μέσο αριθμό χαρακτήρων σε μια γραμμή κειμένου. Ένα μεγάλο μήκος παρεμποδίζει την αναγνωσιμότητα, καθιστώντας δύσκολο για τα μάτια μας τη σάρωση του κειμένου. Συνήθως περίπου 45-75 χαρακτήρες ανά γραμμή είναι βέλτιστοι για ένα σώμα κειμένου. Εάν σκοπεύετε να αυξήσετε το μήκος της γραμμής πέρα ​​από αυτό, τότε προσέξτε επίσης να αυξήσετε το ύψος της γραμμής έτσι ώστε να υπάρχει αρκετός χώρος μεταξύ δύο γραμμών κειμένου. Στο CSS, μπορείτε να ορίσετε το πλάτος του κοντέινερ και χρησιμοποιώντας τη μονάδα em, μπορείτε να πλησιάσετε έναν καθορισμένο αριθμό χαρακτήρων, ανάλογα με την αναλογία πλάτους προς ύψος της γραμματοσειράς. Παράδειγμα: πλάτος: 35em;
  • Η παρακολούθηση αναφέρεται στην προσαρμογή του διαστήματος μεταξύ χαρακτήρων σε ένα κείμενο. Η προσθήκη παρακολούθησης σημαίνει την προσθήκη κενού διαστήματος μεταξύ χαρακτήρων και αντίστροφα. Σε μικρά μεγέθη γραμματοσειρών, δηλαδή λιγότερο από 10pts, η προσθήκη παρακολούθησης βοηθά στη βελτίωση της αναγνωσιμότητας. Παρομοίως, για μεγάλες επικεφαλίδες, χρησιμοποιήστε αρνητική παρακολούθηση για να πλησιάσετε τα γράμματα. Μπορείτε να ελέγξετε την παρακολούθηση στο CSS μέσω της ιδιότητας "γράμμα-απόσταση". Για παράδειγμα: απόσταση γραμμάτων: 0,05em
  • Το μέγεθος γραμματοσειράς αναφέρεται στο μέγεθος της γραμματοσειράς που χρησιμοποιείται σε ένα κείμενο. Για οθόνη για κινητά, χρησιμοποιήστε μεγέθη τουλάχιστον 12 εικονοστοιχείων. Μπορείτε να ελέγξετε το μέγεθος της γραμματοσειράς σε CSS μέσω της ιδιότητας "font-size". Παράδειγμα: μέγεθος γραμματοσειράς: 48 εικονοστοιχεία;

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

Χρώμα και τονική τιμή

Στη θεωρία χρωμάτων, μια τονική τιμή παράγεται προσθέτοντας λευκό, γκρι ή μαύρο σε ένα επιλεγμένο χρώμα. Αυτό δεν αλλάζει την απόχρωση αλλά αλλάζει το πολύχρωμο, γνωστό και ως κορεσμός. Κατά τη συζήτηση της τονικής αξίας, υπάρχουν τρεις βασικοί όροι που πρέπει να συζητηθούν: Tint, Tone και Shade.

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

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

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

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

Περισσότερα για την τυπογραφία:

  • Τυπογραφία: ανατομία γραμμάτων
  • Πλέγμα 8 σημείων: τυπογραφία στον Ιστό
  • Γιατί η τυπογραφία μπορεί να κάνει ή να σπάσει το σχέδιό σας