Erstellen Sie Überschriften mit großem und kleinem überlappendem Text
Überschriften führen Inhalte ein.
Wir können viele Effekte und Tricks auf grafische Überschriften anwenden, um die Leser dazu zu verleiten, weiter zu lesen, den Ton anzugeben oder eine Überschrift unter vielen hervorzuheben.
Aber manchmal sind die offensichtlichsten Techniken, wie das Ändern des visuellen Gewichts und des Layouts, viel besser.
Überlappende Titel verwenden eine kleine Menge an großem Text und eine große Menge an kleinem Text, um mehr zu kommunizieren, als eine einfache Überschrift alleine tun könnte. Klingt widersprüchlich? Nur wenn Sie die Feinpunkte ignorieren.
Lesen Sie weiter, um zu erfahren, wie Sie einprägsame Überschriften mit überlappendem Text erstellen können.
Was haben die oben genannten Formen mit den Namen "WDD" und " {$lang_domain} "? Sie sind unglückliche Artefakte, weil sie einen Text über den anderen gelegt haben, ohne Rücksicht auf Platzierung oder Details. Hier ist das beleidigende Bild:
Auf einen Blick ist die Grafik oben eine einfache Darstellung eines Blog-Namens und seiner Abkürzung. Die Schrift ist die offizielle, die der Blog verwendet; das helle Orange kommt direkt vom Thema der Webseite; und beide Textzeilen sind fast perfekt zentriert.
Es wird sogar nach dem Stil des Blogs buchstabiert und groß geschrieben. Aber es ist ein amateurhafter Versuch, die überlappende Technik nachzuahmen, indem man eine lange Textzeile auf eine kurze Textzeile klopft. (Die Schwächen in diesem Beispiel sind übertrieben, wenn auch nicht ungewöhnlich.)
Die obige Schattierung zeigt die neuen Formen, die von den zwei Textteilen erzeugt werden. Wie sich die beiden Zeilen auf die einzelnen Zeilen beziehen und in welcher Reihenfolge sie gelesen werden, hängt davon ab, wie sie angeordnet sind. Es gibt mehr zu überlagernden Text, als wenn Sie einen über den anderen legen.
Überlappungen sind natürlich nicht immer der beste Weg, um einen kurzen Titel und einen langen Untertitel zu arrangieren.
Die folgenden Beispiele zeigen einige mögliche Behandlungen, wenn ein Design etwas kreativer als normal erfordert h1 und h2 Elemente.
Überlappender Text hat eine Eleganz, die mit HTML (noch) nicht einfach dupliziert werden kann. Zwei Textzeilen zusammen ergeben oft mehr als die Summe von jedem einzeln.
Grundlagen des Überlappenden Textes
Überlappender Text kontrastiert zwei Linien des Typs gegeneinander. Der große Text ruht hinter dem kleinen Text, der oft mehr Wörter enthält. Die kniffligen Teile sind, dass beide Linien gleich gut lesbar sind, sodass beide zusammen anstatt gegeneinander arbeiten und das ganze Paket zum Thema halten.
Verschiedene Techniken ändern den Effekt von überlappendem Text.
Hier sind die vier Hauptfaktoren, die sich auf überlappenden Text auswirken:
- Platzierung hat damit zu tun, wie der kleine Text relativ zum großen Text positioniert wird. Dies wirkt sich direkt darauf aus, wie der Text gelesen wird. Wenn der kleine Text nach oben links liegt, wird er wahrscheinlich zuerst gelesen (dh vor dem großen Text). Wenn der kleine Text sich rechts unten befindet, wird er wahrscheinlich als zweiter gelesen.
- Relatives Gewicht bezieht sich auf die Aufmerksamkeit, die ein Textstück relativ zum anderen aufbringt. Angesichts seiner Größe neigt der große Text dazu, zu dominieren. Wenn jedoch der große Text in den Hintergrund eingeblendet wird, springt der kleine Text heraus.
- Sprache (hauptsächlich Schrift und Farbe) bezieht sich auf die ästhetischen Entscheidungen, die die Stimmung der Typografie bestimmen.
- Interaktion ist die schwierigste. Es hat damit zu tun, wie die Buchstabenformen der Texte miteinander funktionieren. Die Interaktion hängt von Platzierung, Schriftart und den Zeichen selbst ab. Ziel ist es, scheinbar gegensätzliche Textzeilen visuell zu verknüpfen.
Platzierung beeinflusst, wie Zeilen als Ganzes gelesen werden
Die Reihenfolge, in der Besucher den Text lesen sollen, ist der wichtigste Faktor für die Anordnung der Textzeilen. Da Englisch eine Sprache von links nach rechts ist, wird kleiner Text auf der linken Seite deutlich anders gelesen als kleiner Text auf der rechten Seite.
Mit dem kleinen Text in der oberen linken Ecke liest die Grafik oben so: "Vermeiden Sie sie wie die Seuche. Klischees. "Dennoch sind" Klischees "so groß geschrieben, dass die Leute es zuerst lesen könnten. Das Gleichgewicht zwischen Größe und Platzierung bringt die beiden Linien auf Augenhöhe.
Die obige Version ist weniger zweideutig. Den kleinen Text nach rechts unten zu verschieben, gibt dem großen Text klare Priorität. Jetzt heißt es: "Klischees: Vermeide sie wie die Pest."
Die obigen Überschriften sind austauschbar, da jede Zeile mehr oder weniger unabhängig ist. Wenn die Linien voneinander abhängen, ist die Platzierung kritischer. Hier ist ein Beispiel für einen schlechten Job:
Wenn man den kleinen Text unten rechts einfügt, bleiben die Leser hängen. "Pest: Vermeiden Sie Klischees wie ..."? Obwohl die meisten Leute es herausfinden werden, ist der Moment des Zögerns der Unterschied zwischen einer mittelmäßigen und einer guten Präsentation.
Die obige Anordnung ist am besten, weil der kleine Text der erste Teil des Satzes ist. Wenn wir den kleinen Text auf die rechte Seite stellen wollen, muss der große Text den ersten Teil des Satzes bilden. Aber wieder, da ist ein Problem.
Je nach Satz genügt es nicht, nur das erste Wort für den großen Text zu verwenden, weil die Textzeilen sowohl einzeln als auch zusammen funktionieren müssen. Der obige Text teilt den Ausdruck falsch auf. Das verbiegende Verb "vermeiden" hat nicht genug Bedeutung, um Unabhängigkeit zu garantieren. Und "Klischees wie die Pest" klingt, als würden wir überstrapazierte Phrasen mit Krankheit vergleichen, anstatt die Vermeidung von beiden zu verschreiben. Die Bedeutung der gesamten Grafik ändert sich.
Selbst wenn wir den großen Text so verkleinern müssen, dass er passt, macht die Verwendung von zwei Wörtern (eine vollständige Phrase) für den großen Text beide Zeilen besser lesbar.
Bei überlappendem Text ist es genauso wichtig wie die richtige Farbe und Schriftart, die richtige Formulierung durch das Layout zu bekommen.
Balance Dominanz durch die Arbeit mit, nicht gegen den Hintergrund
Obwohl der Zweck des großen Textes darin besteht, zu dominieren, kann er auch kleinen Text leicht ersticken. Aber das ist nicht immer schlecht. Bei einer guten Ausgewogenheit geht es nicht darum, zu verhindern, dass großer Text kleinen Text dominiert, sondern um deren relative Wichtigkeit zu zeigen.
Die Größe des großen Textes macht es natürlich zur Hauptaussage. Das ist toll, wenn der kleine Text nur den großen Text unterstützen soll. Beispielsweise:
"WWW" springt zuerst heraus. "Willkommen im digitalen Zeitalter" geht auf die Idee ein und unterstützt die drei Ws. Aber was, wenn der kleine Text die Hauptbotschaft tragen sollte?
Oben ist der Haupttext "Willkommen im digitalen Zeitalter". Und was heißt das? Faded hinterlässt "WWW" einen Hinweis.
Je mehr der große Text in den Hintergrund übergeht, desto weniger wichtig ist er. Wenn der große Text kaum sichtbar ist, wird der kleine Text zum Hauptelement.
Interaktion ist in den Details
Die Form einer Schrift ist der Schlüssel zu ihrem unverwechselbaren Aussehen. Wenn sich zwei Textzeilen überlappen, erzeugen sie Taschen, seltsame Formen und andere subtile Ablenkungen.
Oben, fügen der große orange und kleine weiße Text unnötigen Durcheinander zu den Zählern hinzu (dh die Löcher innerhalb der Buchstaben). Jedes einzelne Bit behindert die Lesbarkeit nicht sonderlich. Aber das ist Teil des Problems: Weil sie nicht schlimm genug sind, um den Text unleserlich zu machen, könnten sie leicht als unwichtig abgetan werden.
Für eine maximale Lesbarkeit müssen wir die kleinen Buchstaben des Textes bewahren.
Wie oben gezeigt, haben geringfügige Anpassungen die Störung aufgeklärt:
- Neu positioniert zwischen den klammerartigen Anschlüssen des großen "C" ist das Wort "Text" nun viel klarer.
- Beachten Sie, wie die vertikalen Stämme von "r" und "n" in "erklärend" die Kanten des großen "C" treffen.
- Die Zähler in "p" und "o" in "unterstützend" enthalten jetzt nur noch Schwarz.
- Wir haben den großen Buchstaben "A" abgeschnitten, um das Kleinbuchstabe "s" in "unterstützend" klarer zu machen.
Ziel ist es, die Formen der Kleinbuchstaben zu bewahren, auch wenn die Leser dies nicht bemerken.
Schriftbild macht einen Unterschied
Nicht jede Schrift ist für große und kleine Größen geeignet. Bei einer kleinen Größe können die Details eines Schriftbilds verschwinden. Und Details, die in großer Größe vergrößert werden, können manchmal zu ungewöhnlichen Problemen führen.
Die oben genannten vier Schriftkombinationen schlagen aus verschiedenen Gründen fehl:
- Diese Skriptschriftart wurde entwickelt, um Handschrift nachzuahmen. Seine ausgefransten Kanten enthalten Hunderte von Vektorpunkten, von denen die meisten bei geringer Größe verloren gehen.
- Aber machen Sie das Skript zu groß und die Buchstaben sehen weniger wie Handschrift aus, sondern eher wie überbackene Illustrator-Pfade.
- Zapfinos kalligraphische Kanten sind besser als die von Texas Hero, aber die enorme Oberlänge auf dem "b" wirft die Komposition aus dem Gleichgewicht.
- Lucida Blackletter ist zu kompliziert, um als Hintergrund praktisch zu sein, zumindest ohne sehr sorgfältige Anordnung des kleinen Textes. Auch sein einzigartiger Charakter verschwindet bei einer kleinen Größe. Sind diese Swoops und Serifen, oder ist es nur verschwommen?
Für großen Text, zu dick oder zu dünn ist genau richtig
Wenn Sie Text überlappen, denken Sie an einen großen Typ als Text und Hintergrund . Je komplizierter die Buchstaben, desto texturierter werden sie. Das heißt, sie verdecken eher die Buchstabenformen im kleinen Text.
Um Probleme zu vermeiden, gehen Sie dick oder dünn. Extra dicke und extra leichte Formen arbeiten besser als ein normales Gewicht des gleichen Gesichts. Beide stören weniger, weil der kleine Text weniger Chancen hat, eine Kante zu treffen.
Zum Beispiel trifft der große Text in den obigen Variationen von Light und Black weniger kleine Buchstaben. Natürlich ist jedes Gesicht - und jede Wortgruppe - anders. Aber im Allgemeinen verursachen mittlere Gewichte mehr Probleme als dünne und dicke Gewichte.
Praktische Beispiele
Wie könnte das mit wahrscheinlicherem Text funktionieren? Hier sind ein paar Beispiele für überlappenden Text.
Warum es funktioniert: In den Hintergrund gedrängt, gibt der große Text dem kleinen Text klare Priorität. Museo geometrische Formen haben wenig Ablenkungen.
Mögliche Probleme: Diese Überlappung würde nicht funktionieren, wenn der kleine Text kürzer wäre. Um die Nachricht zu tragen, muss der kleine Text alle sechs Buchstaben des großen Textes überlappen.
Warum es funktioniert: Der kleine Text überquert nur drei dicke und zwei dünne Farbstriche. Viel Kontrast, auch für eine warme Farbpalette.
Mögliche Probleme: Die energetischen Ränder des großen Textes scheinen den eleganten Linien des kleinen Textes entgegenzuwirken.
Warum es funktioniert: Beide Textzeilen haben scharfe geometrische Formen und sind präzise ausgerichtet.
Mögliche Probleme: Sieht der kleine Text etwas verloren aus? Reflektieren die Schriften wirklich den Geist von " Steampunk "
Warum es funktioniert: Großzügiges Tracking in den großen Buchstaben und klare Linien in beiden Texten machen jeden Charakter deutlich.
Mögliche Probleme: Macht die Hintergrundtextur den Typ zu schwer lesbar?
Warum es funktioniert: Der dicke, große Text ist für sich allein lesbar, während der intime kleine Text zum Lesen einlädt. Mehrere zusätzliche Füllungen erhalten die Farbtiefe der Großbuchstaben.
Potenzielle Probleme:
Aber hilft es?
Lassen Sie uns diese Lektionen auf unsere ursprüngliche Komposition anwenden.
Warum es funktioniert:
- Der große Text fügt sich in den dunklen Hintergrund ein, aber seine Größe sorgt dafür, dass er sichtbar ist.
- Die helle Farbe hebt den kleinen Text hervor. Die richtige Ausrichtung gleicht sie aus.
- Ein sorgfältiger Abstand der kleinen Buchstaben und die Einfachheit der großen Buchstaben halten Konflikte auf ein Minimum.
- Die beiden Schriftarten haben gemeinsame Elemente. Zum Beispiel sind die zwei "W" ausgerichtet, obwohl sie in verschiedenen Flächen sind.
Geschrieben exklusiv für Webdesigner Depot von Ben Gremillion . Ben ist ein Webdesigner, der Kommunikationsprobleme mit besserem Design löst.
Was sind einige der möglichen Probleme des letzten Beispiels? Bitte teilen Sie Ihre Gedanken in den Kommentaren unten.