Twórz nagłówki z dużym i małym nakładającym się tekstem

Nagłówki wprowadzają treść.

Możemy zastosować wiele efektów i trików do nagłówków graficznych, aby zachęcić czytelników do kontynuowania czytania, nadawania tonów lub wyróżniania jednego z wielu.

Ale czasami najbardziej oczywiste techniki, takie jak modyfikowanie masy wizualnej i układu, działają o wiele lepiej.

Nakładające się tytuły wykorzystują niewielką ilość dużego tekstu i dużą ilość małego tekstu, aby przekazać więcej, niż zwykły nagłówek mógłby zrobić samodzielnie. Brzmi sprzecznie? Tylko jeśli zignorujesz dobre punkty.

Czytaj dalej, aby dowiedzieć się, jak tworzyć niezapomniane nagłówki z nakładającym się tekstem.

Co dziwne kształty powyżej mają wspólnego z nazwami "WDD" i " {$lang_domain} "? Są to niefortunne artefakty, od umieszczenia jednego tekstu na drugim bez względu na umiejscowienie lub szczegóły. Oto obraz urażający:

W skrócie, powyższa grafika to prosta prezentacja nazwy blogu i jego skrótu. Krój pisma jest oficjalny używany przez bloga; jasna pomarańcza pochodzi prosto z motywu strony; a obie linie tekstu są prawie idealnie wyśrodkowane.

Jest nawet pisane i pisane wielką literą zgodnie ze stylem bloga. Ale jest to amatorska próba naśladowania nakładającej się techniki poprzez uderzenie długiej linii tekstu na krótką. (Słabości w tym przykładzie są przesadzone, choć nie są rzadkie).

Powyższe cieniowanie pokazuje nowe kształty utworzone przez dwa fragmenty tekstu. To, w jaki sposób te dwie linie odnoszą się do każdego z nich i kolejność, w jakiej są czytane, zależy od sposobu ich rozmieszczenia. Jest więcej nakładających się tekstów niż ustawianie jednego na drugim.

Oczywiście nakładanie się nie zawsze jest najlepszym sposobem na ułożenie krótkiego tytułu i długiego podtytułu.

Poniższe przykłady pokazują niektóre możliwe sposoby leczenia, gdy projekt wymaga czegoś bardziej kreatywnego niż zwykłe h1 i h2 elementy.

Nakładający się tekst ma elegancję, której nie można w łatwy sposób powielić za pomocą HTML (jeszcze). Dwa wiersze tekstu razem to często więcej niż suma każdego z osobna.

Podstawy nakładania się tekstu

Nakładający się tekst kontrastuje dwie linie tekstu ze sobą. Duży tekst spoczywa za małym tekstem, który często zawiera więcej słów. Trudne części zapewniają, że obie linie są jednakowo czytelne, dzięki czemu zarówno pracują razem, zamiast ze sobą i utrzymują cały pakiet na temat.

Różne techniki zmieniają efekt nakładania się tekstu.

Oto cztery główne czynniki wpływające na nakładanie się tekstu:

• Umieszczenie ma związek z rozmieszczeniem małego tekstu względem dużego tekstu. Wpływa to bezpośrednio na sposób czytania tekstu. Jeśli mały tekst znajduje się w lewym górnym rogu, prawdopodobnie zostanie odczytany jako pierwszy (tj. Przed dużym tekstem). Jeśli mały tekst znajduje się w prawym dolnym rogu, prawdopodobnie zostanie odczytany jako drugi.
• Względna waga odnosi się do uwagi, jaką przyciąga jeden fragment tekstu w stosunku do drugiego. Biorąc pod uwagę jego rozmiar, duży tekst ma tendencję do dominacji. Jeśli jednak duży tekst zniknie z tła, mały tekst wyskoczy.
• Głos (głównie krój pisma i kolor) odnosi się do wyborów estetycznych, które określają nastrój typografii.
• Interakcja jest najtrudniejsza. Ma to związek z tym, jak formy literowe tekstów działają ze sobą. Interakcja zależy od umiejscowienia, kroju pisma i samych znaków. Celem jest wizualne powiązanie pozornie przeciwstawnych linii tekstu.

Umieszczenie wpływa na to, jak linie jako całość są odczytywane

Kolejność, w jakiej użytkownicy mają czytać tekst, jest najważniejszym czynnikiem określającym sposób ułożenia linii tekstu. Ponieważ angielski jest językiem od lewej do prawej, mały tekst po lewej stronie będzie się znacznie różnił od małego tekstu po prawej stronie.

Z małym tekstem w lewym górnym rogu powyższa grafika brzmi: "Unikaj" ich jak ognia. Klisze. "Mimo to," stereotypy "są tak duże, że ludzie mogą je najpierw przeczytać. Równowaga między wielkością i położeniem sprawia, że ​​obie linie są na równi.

Powyższa wersja jest mniej niejednoznaczna. Przekierowanie małego tekstu do dolnego prawego brzegu daje wyraźne pierwszeństwo dużemu tekstowi. Teraz brzmi: "Klisze: Unikaj ich jak ognia".

Powyższe nagłówki są wymienne, ponieważ każda linia jest bardziej lub mniej niezależna. Gdy linie zależą od siebie, położenie jest bardziej krytyczne. Oto przykład słabej pracy:

Umieszczenie małego tekstu w prawym dolnym rogu zwisa czytelników. "Plaga: Unikaj takich stereotypów jak ..."? Chociaż większość ludzi to zrozumie, moment wahania jest różnicą między przeciętną a dobrą prezentacją.

Układ powyżej jest najlepszy, ponieważ mały tekst jest pierwszą częścią zdania. Jeśli chcemy umieścić mały tekst po prawej stronie, duży tekst będzie musiał utworzyć pierwszą część zdania. Ale znowu jest problem.

W zależności od zdania użycie tylko pierwszego słowa w przypadku dużego tekstu nie wystarczy, ponieważ linie tekstu muszą pracować zarówno indywidualnie, jak i razem. Powyższy tekst nieprawidłowo dzieli frazę. Czasownik nakazujący "unikaj" sam w sobie nie ma wystarczającego znaczenia, aby zagwarantować niezależność. A "stereotypy jak dżuma" brzmią, jakbyśmy porównali nadużywane frazy do choroby, zamiast zalecać unikanie obu. Zmienia się znaczenie całej grafiki.

Nawet jeśli musimy zmniejszyć duży tekst, aby dopasować, użycie dwóch słów (pełnej frazy) dla dużego tekstu sprawia, że ​​obie linie są lepiej czytane.

Przy nakładającym się tekście uzyskanie prawidłowego wyglądu poprzez układ jest równie ważne, jak wybór koloru i czcionki.

Dominacja równowagi przez pracę, a nie przeciw, tło

Mimo że dominuje duży tekst, może on łatwo tłumić również mały tekst. Ale nie zawsze jest źle. Dobra równowaga nie polega na tym, aby duży tekst nie dominował nad małym tekstem, ale raczej na pokazaniu ich względnego znaczenia.

Rozmiar dużego tekstu naturalnie czyni go głównym stwierdzeniem. To świetnie, jeśli mały tekst ma jedynie obsługiwać duży tekst. Na przykład:

"WWW" wyskakuje pierwszy. "Witaj w erze cyfrowej" rozwija pomysł, wspierając trzy Ws. Ale co, jeśli mały tekst miał nosić główną wiadomość?

Powyżej głównym tekstem jest "Witamy w erze cyfrowej". Co to znaczy? Wyblakłe z tyłu "WWW" dostarcza podpowiedzi.

Im większy tekst wtapia się w tło, tym mniej ma znaczenia. Gdy duży tekst jest ledwo widoczny, mały tekst staje się głównym elementem.

Interakcja jest w szczegółach

Kształt kroju pisma jest kluczem do jego wyrazistego wyglądu. Kiedy dwie linie tekstu pokrywają się, tworzą kieszenie, dziwne kształty i inne subtelne zakłócenia.

Powyżej duży pomarańczowy i mały biały tekst dodaje niepotrzebnego bałaganu do liczników (tj. Dziur wewnątrz liter). Same, każdy dodatkowy bit nie utrudnia dużo czytelności. Ale to jest część problemu: ponieważ nie są wystarczająco złe, aby tekst był nieczytelny, można je łatwo odrzucić jako nieważne.

Aby zachować maksymalną czytelność, musimy zachować litery małego tekstu.

Jak pokazano powyżej, nieznaczne korekty usunęły zakłócenia:

• Umieszczone między zaciskami terminali dużego "C", słowo "tekst" jest teraz znacznie wyraźniejsze.
• Zwróć uwagę, że pionowe pnie "r" i "n" w "objaśnieniach" spotykają się z krawędziami dużego "C".
• Liczniki w "p" i "o" w "wspomagającym" zawierają teraz tylko czerń.
• Przecięliśmy dużą literę "A", aby ułatwić pisanie małymi literami "wspierające".

Celem jest zachowanie kształtu małych liter, nawet jeśli czytelnicy tego nie zauważają.

Krój czyni różnicę

Nie każdy krój nadaje się zarówno do dużych, jak i małych rozmiarów. W niewielkim rozmiarze szczegóły kroju pisma mogą zniknąć. A szczegóły, które są powiększane w dużym rozmiarze, mogą czasami powodować nietypowe problemy.

Cztery powyższe kombinacje czcionek nie powiodły się z różnych powodów:

1. Ten krój pisma został zaprojektowany w celu naśladowania pisma ręcznego. Jego postrzępione krawędzie zawierają setki punktów wektorowych, z których większość jest zagubiona w niewielkim rozmiarze.
2. Ale spraw, aby skrypt był zbyt duży, a litery wyglądały mniej jak pismo ręczne i bardziej przypominały zapętlone ścieżki programu Illustrator.
3. Kaligraficzne krawędzie Zapfino wyglądają lepiej niż Texas Hero, ale olbrzymi wznoszący się na "b" wyrzucają kompozycję z równowagi.
4. Lucida Blackletter jest zbyt skomplikowana, aby była praktyczna jako tło, przynajmniej bez bardzo starannego układania małego tekstu. Jego unikalny charakter znika również w niewielkim rozmiarze. Czy te nurty i szeryfy, czy jest to po prostu niewyraźne?

W przypadku dużego tekstu, zbyt gruby lub zbyt cienki jest odpowiedni

Gdy nakładasz się na tekst, myśl o dużym typie jako tekstu i tła . Im bardziej skomplikowane litery, tym bardziej przypominają teksturę. Oznacza to, że są bardziej prawdopodobne, że ukryją kształty liter w małym tekście.

Aby uniknąć problemów, chudnij lub chudnij. Bardzo grube i wyjątkowo lekkie kształty działają lepiej niż zwykła waga tej samej twarzy. Oba zakłócają mniej, ponieważ mały tekst ma mniejsze szanse na uderzenie w krawędź.

Na przykład duży tekst w wariancie Światło i czerń ma mniej liter. Oczywiście każda twarz - i każdy zestaw słów - jest inny. Generalnie jednak średnie ciężary powodują więcej problemów niż cienkie i grube ciężary.

Praktyczne przykłady

Jak to może działać z bardziej prawdopodobnym tekstem? Oto kilka przykładów nakładania się tekstu.

Dlaczego to działa: Zanurzony w tle duży tekst daje wyraźny priorytet małemu tekstowi. Geometryczne kształty Museo mają niewiele rozrywek.

Potencjalne problemy: to pokrywanie się nie działałoby, gdyby mały tekst był krótszy. Aby przenieść wiadomość, mały tekst musi pokrywać wszystkie sześć liter dużego tekstu.

Dlaczego to działa: Mały tekst przechodzi tylko trzy grubości i dwa cienkie kreski. Mnóstwo kontrastu, nawet dla ciepłej palety kolorów.

Potencjalne problemy: energetyczne krawędzie dużego tekstu działają na tle eleganckich linii małego tekstu.

Dlaczego to działa: Obie linie tekstu mają ostre geometryczne kształty i są dokładnie wyrównane.

Potencjalne problemy: Czy mały tekst wygląda na zagubiony? Czy kroje pisma rzeczywiście odzwierciedlają ducha " steampunk ? "

Dlaczego to działa: Hojne śledzenie dużymi literami i czyste linie w obu tekstach sprawiają, że każda postać jest czysta.

Potencjalne problemy: Czy tekstura tła sprawia, że ​​tekst jest zbyt trudny do odczytania?

Dlaczego to działa: gruby duży tekst jest czytelny sam, a intymny mały tekst zachęca do czytania. Kilka dodatkowych wypełnień utrzymuje głębię kolorów liter "S" kapitału.

Potencjalne problemy: SxSW jest zwykle renderowany w czcionce bitmapowej; są to produkty spoza marki. Ponadto oszczędnie wykorzystuj skrypty w małym tekście.

Ale czy to pomaga?

Zastosujmy te lekcje do naszej oryginalnej kompozycji.

Dlaczego to działa:

• Duży tekst wtapia się w ciemne tło, ale jego rozmiar gwarantuje, że jest widoczny.
• Jasny kolor sprawia, że ​​mały tekst się wyróżnia. Prawidłowe wyrównanie to równoważy.
• Staranne rozmieszczenie małych liter i prostota dużych liter powodują konflikt do minimum.
• Obydwa kroje pisma mają wspólne elementy. Na przykład dwa "W" są wyrównane, mimo że znajdują się w różnych płaszczyznach.

Napisany specjalnie dla Webdesigner Depot przez Ben Gremillion . Ben jest projektantem stron internetowych, który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.

Jakie są potencjalne problemy z ostatniego przykładu? Podziel się swoimi przemyśleniami w komentarzach poniżej.

• ← 10 ikonicznych czcionek i dlaczego nie należy ich używać
• 12 Niezbędne zasady do naśladowania przy projektowaniu logo →