Δημιουργία επικεφαλίδων με μεγάλο και μικρό επικαλυπτόμενο κείμενο

Οι επικεφαλίδες εισάγουν περιεχόμενο.

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

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

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

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

Ποια είναι τα παραπάνω περίεργα σχήματα με τα ονόματα "WDD" και " {$lang_domain} "; Είναι ατυχή αντικείμενα από το να βάλουν ένα κείμενο πάνω από το άλλο χωρίς να λαμβάνει υπόψη την τοποθέτηση ή τις λεπτομέρειες. Εδώ είναι η προσβλητική εικόνα:

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

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

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

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

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

Το επικαλυπτόμενο κείμενο έχει μια κομψότητα που δεν μπορεί εύκολα να αναπαραχθεί με HTML (ακόμα). Δύο σειρές κειμένων μαζί συχνά υπερβαίνουν το άθροισμα καθεμιάς από αυτές.

Βασικές αρχές επικαλυπτόμενου κειμένου

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

Διάφορες τεχνικές αλλάζουν την επίδραση του επικαλυπτόμενου κειμένου.

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

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

Η τοποθέτηση επηρεάζει το πώς διαβάζονται οι γραμμές ως σύνολο

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

Με το μικρό κείμενο στην πάνω αριστερή γωνία, το παραπάνω γράφημα διαβάζεται ως εξής: "Αποφύγετε τα σαν την πανούκλα. Clichés. "Παρόλα αυτά, τα" κλισέ "γράφονται τόσο μεγάλα ώστε οι άνθρωποι να το διαβάσουν πρώτα. Η ισορροπία μεταξύ μεγέθους και τοποθέτησης θέτει τις δύο γραμμές σε ισότιμη βάση.

Η παραπάνω έκδοση είναι λιγότερο αμφίσημη. Η μετατόπιση του μικρού κειμένου στο κάτω-δεξί δίνει σαφή προτεραιότητα στο μεγάλο κείμενο. Τώρα λέει ως εξής: "Κλίκες: Αποφύγετε τους σαν την πανούκλα".

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

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

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

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

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

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

Ισορροπία κυριαρχίας με την εργασία με, όχι ενάντια, το υπόβαθρο

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

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

Το "WWW" πηδά πρώτα. «Καλώς ήλθατε στην ψηφιακή εποχή» επεξεργάζεται την ιδέα, υποστηρίζοντας τα τρία Ws. Αλλά τι θα έπρεπε αν το μικρό κείμενο έπρεπε να φέρει το κύριο μήνυμα;

Πάνω, το κύριο κείμενο είναι "Καλώς ήλθατε στην ψηφιακή εποχή." Και τι σημαίνει αυτό; Ξεθωριασμένος πίσω, το "WWW" παρέχει μια υπόδειξη.

Όσο περισσότερο το μεγάλο κείμενο αναμειγνύεται στο παρασκήνιο, τόσο μικρότερη σημασία έχει. Όταν το μεγάλο κείμενο είναι ελάχιστα ορατό, το μικρό κείμενο γίνεται το κύριο στοιχείο.

Η αλληλεπίδραση είναι στις λεπτομέρειες

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

Πάνω, το μεγάλο πορτοκαλί και το μικρό λευκό κείμενο προσθέτουν περιττές ακαταστασίες στους μετρητές (δηλ. Τις τρύπες μέσα στα γράμματα). Μόνο, κάθε επιπλέον bit δεν παρεμποδίζει την αναγνωσιμότητα πολύ. Αλλά αυτό είναι μέρος του προβλήματος: επειδή δεν είναι αρκετά κακοί για να καταστήσουν το κείμενο δυσανάγνωστο, θα μπορούσαν εύκολα να απορριφθούν ως ασήμαντοι.

Για μέγιστη ευκρίνεια, πρέπει να διατηρήσουμε τα γράμματα του μικρού κειμένου.

Όπως φαίνεται παραπάνω, οι μικρές ρυθμίσεις έχουν καταργήσει την παρεμβολή:

• Μετατοπισμένος μεταξύ των ακροδεκτών που μοιάζουν με σφιγκτήρες του μεγάλου "C", η λέξη "κείμενο" είναι τώρα πολύ πιο ξεκάθαρη.
• Παρατηρήστε πώς οι κατακόρυφοι μίσχοι των "r" και "n" στο "επεξηγηματικό" πληρούν τις άκρες του μεγάλου "C."
• Οι μετρητές στο "p" και "o" στο "υποστηρικτικό" τώρα περιέχουν μόνο μαύρο.
• Έχουμε κόψει το μεγάλο γράμμα "Α" για να καταστήσουμε σαφέστερες τις πεζούλες "s" στο "υποστηρικτικό".

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

Το Typeface κάνει τη διαφορά

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

Οι παραπάνω τέσσερις συνδυασμοί γραμματοσειρών αποτυγχάνουν για διάφορους λόγους:

1. Αυτή η γραμματοσειρά σεναρίου σχεδιάστηκε για να μιμείται το χειρόγραφο. Τα ακανθωτά άκρα του περιέχουν εκατοντάδες διανυσματικά σημεία, τα περισσότερα από τα οποία χάνονται σε μικρό μέγεθος.
2. Αλλά κάνετε το σενάριο πάρα πολύ μεγάλο και τα γράμματα μοιάζουν λιγότερο με το χειρόγραφο και μάλλον με τα διαγραμμένα μονοπάτια Illustrator.
3. Οι καλλιγραφικές ακμές του Zapfino ταιριάζουν καλύτερα από το Texas Hero's, αλλά ο τεράστιος ανελκυστήρας στο "b" ρίχνει τη σύνθεση εκτός ισορροπίας.
4. Lucida Blackletter είναι πολύ περίπλοκη για να είναι πρακτική ως φόντο, τουλάχιστον χωρίς πολύ προσεκτική ρύθμιση του μικρού κειμένου. Επίσης, ο μοναδικός χαρακτήρας του εξαφανίζεται σε μικρό μέγεθος. Είναι αυτά swoops και serifs, ή είναι απλά ασαφής;

Για Μεγάλο Κείμενο, Πάρα πολύ ή Πολύ Λεπτό Είναι Ακριβώς Δεξί

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

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

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

Πρακτικά παραδείγματα

Πώς μπορεί αυτό να λειτουργήσει με πιο πιθανό κείμενο; Ακολουθούν μερικά παραδείγματα επικαλυπτόμενου κειμένου.

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

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

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

Πιθανά προβλήματα: Οι ενεργειακές ακμές του μεγάλου κειμένου φαίνεται να λειτουργούν ενάντια στις κομψές γραμμές του μικρού κειμένου.

Γιατί λειτουργεί: Και οι δύο γραμμές κειμένου έχουν αιχμηρά γεωμετρικά σχήματα και είναι ευθυγραμμισμένα με ακρίβεια.

Πιθανά προβλήματα: Μήπως το μικρό κείμενο μοιάζει λίγο χαμένο; Οι χαρακτήρες αντικατοπτρίζουν πραγματικά το πνεύμα του " steampunk ; "

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

Πιθανά προβλήματα: Η υφή φόντου κάνει τον τύπο πολύ δύσκολο να διαβαστεί;

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

Πιθανά προβλήματα: Το SxSW εμφανίζεται συνήθως σε μια γραμματοσειρά bitmap. αυτά είναι εκτός εμπορικού σήματος. Επίσης, χρησιμοποιήστε τα σενάρια σε μικρά κείμενα με φειδώ.

Αλλά Βοηθάει;

Ας εφαρμόσουμε αυτά τα μαθήματα στην αρχική μας σύνθεση.

Γιατί λειτουργεί:

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

Γράφτηκε αποκλειστικά για το Webdesigner Depot από τον Ben Gremillion . Ο Ben είναι σχεδιαστής ιστοσελίδων που επιλύει προβλήματα επικοινωνίας με καλύτερο σχεδιασμό.

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

• ← 10 εικονικές γραμματοσειρές και γιατί δεν πρέπει ποτέ να τις χρησιμοποιήσετε
• 12 Βασικοί κανόνες που πρέπει να τηρούνται κατά το σχεδιασμό ενός λογότυπου →