Luo otsikot suurilla ja pienillä päällekkäisillä tekstillä

Otsikot lisäävät sisältöä.

Voimme soveltaa monia vaikutuksia ja temppuja graafisiin otsikoihin houkutella lukijoita jatkamaan lukemista, sävyn asettamiseksi tai yhden otsikon erottelemiseksi monien joukossa.

Mutta joskus ilmeisimmät tekniikat, kuten visuaalisen painon ja ulkoasun muuttaminen, toimivat paljon paremmin.

Päällekkäisillä nimikkeillä on pieni määrä suurta tekstiä ja suuri määrä pieniä tekstiä, jotka kommunikoivat enemmän kuin tavallinen otsikko voisi tehdä yksin. Kuulostaa ristiriitaiselta? Vain jos huomiotta jäävät hienot pistokkeet.

Lue, miten voit luoda muistoja, joissa on päällekkäisiä tekstiä.

Mitä kummallisia muotoja edellä on tehtävä nimillä "WDD" ja " {$lang_domain} ”? Ne ovat valitettavia esineitä siitä, että he ovat asettaneet yhden tekstin päällekkäin, ei kuitenkaan sijoitusta tai yksityiskohtia. Tässä on loukkaavaa kuvaa:

Yllä olevassa kuvassa on yksinkertainen esitys blogin nimestä ja sen lyhenteestä. Kirjasintyyppi on virallinen blogin käyttämä kirjasintyyppi; kirkas oranssi tulee suoraan verkkosivujen teemasta; ja molemmat tekstirivit ovat lähes täydellisesti keskittyneet.

Se on jopa kirjoitettu ja aktivoitu blogin tyylin mukaan. Mutta se on amatöörimainen yritys jäljitellä päällekkäistä tekniikkaa lyömällä pitkän tekstirivin lyhyt. (Esimerkin heikkoudet ovat liioiteltuja, vaikkakaan harvinaiset.)

Yllä oleva varjostus paljastaa kaksi muotoilua muodostavien uusien muotojen. Kuinka molemmat rivit liittyvät kumpaankin, ja niiden lukemisjärjestys riippuu siitä, kuinka heidät on asetettu. Tekstissä on enemmän päällekkäistä tekstiä kuin asettaa toinen päällekkäin.

Tietenkin päällekkäisyys ei ole aina paras tapa järjestää lyhyt otsikko ja pitkä alikirjaus.

Alla olevat esimerkit kertovat mahdollisista hoidoista, kun malli vaatii jotain luovaa kuin tavallinen h1 ja h2 elementtejä.

Päällekkäinen teksti on tyylikäs, jota ei voi helposti kopioida HTML: llä (vielä). Kaksi riviä tekstiä yhdessä ovat usein suurempia kuin kunkin yksittäisen summan summa.

Päällekkäisen tekstin perusteet

Päällekkäinen teksti kontrasti kahta tyyppiä olevaa riviä toisiaan vastaan. Suuri teksti jää pienen tekstin taakse, joka usein sisältää enemmän sanoja. Vaikeat osat varmistavat, että molemmat linjat ovat yhtä luettavissa, joten molemmat työskentelevät yhdessä toistensa sijasta ja pitävät koko paketin aiheena.

Erilaiset tekniikat muuttavat päällekkäisen tekstin vaikutusta.

Tässä on neljä keskeistä tekijää, jotka vaikuttavat päällekkäiseen tekstiin:

• Sijoitus liittyy siihen, miten pieni teksti sijoitetaan suhteessa isoon tekstiin. Tämä vaikuttaa suoraan tekstin lukemiseen. Jos pieni teksti on ylhäältä vasemmalle, se luetaan todennäköisesti ensin (eli ennen suurta tekstiä). Jos pieni teksti on oikeassa alakulmassa, se luetaan todennäköisesti toiseksi.
• Suhteellinen paino tarkoittaa tarkkailun määrää yhden tekstin osaa suhteessa toiseen. Suuren koon vuoksi iso teksti pyrkii hallitsemaan. Jos iso teksti kuitenkin haalistuu taustalle, pieni teksti hypähtyy.
• Ääni (pääasiassa kirjasintyyppi ja väri) liittyy esteettisiin valintoihin, jotka asettavat typografian tunnelman.
• Vuorovaikutus on trickiest. Siinä on kyse siitä, miten tekstien kirjainmuodot toimivat keskenään. Vuorovaikutus riippuu sijoittelusta, kirjasintyypistä ja itse merkinnöistä. Tavoitteena on visuaalisesti sitoa näennäisesti vastakkaiset tekstirivit yhteen.

Sijoitus vaikuttaa siihen, miten linjat kokonaisuudessaan ovat luettuja

Järjestelmä, jossa haluat kävijöiden lukevan tekstin, on tärkein tekijä määritettäessä, kuinka järjestää tyypin rivejä. Englanti on vasemmalta oikealle, pieni vasemmalla oleva teksti lukee huomattavasti erilaisen kuin pienen tekstin oikealla puolella.

Pienellä tekstillä vasemmassa yläkulmassa edellä oleva kuvio lukee sellaisenaan: "Vältä kuin rutto. Clichés. "Silti" clichés "on kirjoitettu niin suuriksi, että ihmiset voisivat ensin lukea sitä. Tason ja sijoituksen välinen tasapaino asettaa kaksi riviä tasavertaisesti.

Yllä oleva versio on vähemmän epäselvä. Pientä tekstiä pienemmällä oikealla olevasta tekstistä on selkeä etusija suurelle tekstille. Nyt se kuuluu seuraavasti: "Clichés: vältä heitä kuin rutto."

Yllä olevat otsikot ovat keskenään vaihdettavissa, koska jokainen viiva on enemmän tai vähemmän itsenäinen. Kun viivat riippuvat toisistaan, sijoittelu on kriittisempi. Tässä on esimerkki huonosta työstä:

Pienen tekstin sijoittaminen oikeaan alakulmaan jättää lukijat roikkuvat. "Rutto: Vältä kliseitä kuin ..."? Vaikka useimmat ihmiset ymmärtävät sen, epäröinti hetki on keskinkertaisen ja hyvän esityksen välinen ero.

Yllä oleva järjestely on parasta, koska pieni teksti on lauseen ensimmäinen osa. Jos haluamme laittaa pienen tekstin oikealle, suuren tekstin täytyy muodostaa lauseen ensimmäinen osa. Mutta taas, on vika.

Riippuen lauseesta vain iso tekstin ensimmäinen sana ei riitä, koska tekstirivit toimivat yksitellen yhdessä. Edellä oleva teksti jakaa lause väärin. Komentoavalla verbillä "vältetään" ei ole tarpeeksi merkitystä itse itsenäisyyden takaamiseksi. Ja "kliseet kuten rutto" kuulostavat, että verrataan yli käytettyjä lauseita tautiin sen sijaan, että määrittelemme molempien välttäminen. Koko grafiikan merkitys muuttuu.

Vaikka suuren tekstin pitää kutistua sopivaksi, kahden tekstin (täydellinen lause) käyttäminen suurelle tekstille tekee molemmat rivit paremmin.

Päällekkäisen tekstin avulla oikea fraasisoituminen ulkoasun läpi on yhtä tärkeä kuin värin ja fontin valinta.

Tasapaino Dominanssi työskentelemällä, ei taaksepäin

Vaikka ison tekstin tarkoitus on hallita, se voi helposti piilottaa pienen tekstin. Mutta se ei ole aina paha. Hyvä tasapaino ei ole siitä, että suuri tekstin hallitseminen hallitsisi pientä tekstiä, vaan pikemminkin niiden suhteellista merkitystä.

Suuren tekstin koko luonnollisesti tekee sen tärkeimmän lausunnon. Se on hienoa, jos pieni teksti vain tukee suurta tekstiä. Esimerkiksi:

"WWW" hyppää ulos ensin. "Tervetuloa digitaaliseen aikakauteen" käsittelee ajatusta, joka tukee kolmea W: tä. Mutta entä jos pienellä tekstillä pitäisi olla pääviesti?

Yllä, pääteksti on "Tervetuloa digitaaliaikaan." Ja mitä tämä tarkoittaa? Haalistunut takana, "WWW" tarjoaa vihjeen.

Mitä enemmän iso teksti sekoittuu taustaan, sitä vähemmän merkitystä se vie. Kun suuri teksti on vain vähän näkyvissä, pieni teksti tulee tärkeimmäksi elementiksi.

Vuorovaikutus on yksityiskohdissa

Kirjasin muoto on avain sen selkeään ilmeeseen. Kun kaksi tekstiriviä on päällekkäin, ne luovat taskuja, parittomia muotoja ja muita hienovaraisia ​​häiriöitä.

Yllä, iso oranssi ja pieni valkoinen teksti lisää tarpeettomat sekavuutta laskureihin (eli kirjainten sisällä olevat reiät). Yksin, jokainen ylimääräinen bitti ei estä lukettavuutta paljon. Mutta tämä on osa ongelmaa: koska he eivät ole tarpeeksi huonoja tekemään tekstiä lukukelvottomiksi, heidät voitaisiin helposti erottaa merkityksettömiksi.

Jotta lukeminen olisi mahdollisimman helppoa, meidän on säilytettävä pienet kirjaimet.

Kuten edellä on esitetty, pienet säädöt ovat selvittäneet häiriöitä:

• Suuren "C: n" kiinnittimen kaltaisten liittimien välillä sana "teksti" on nyt paljon selkeämpi.
• Huomaa, kuinka "r": n ja "n": n pystytuet "selittävänä" täyttävät ison "C."
• P: n ja "o": n laskurit "tukevassa" sisältävät nyt vain mustan.
• Olemme leikkaaneet ison kirjaimen "A", jotta pienet kirjaimet "s" tukevat "selkeämpiä".

Tavoitteena on säilyttää pienten kirjainten muodot, vaikka lukijat eivät huomaa.

Tyypillinen tekee eron

Kaikki kirjasimet eivät ole sopivia sekä suurille että pienikokoisille. Pienellä pienemmällä koolla fonttityyppiset tiedot voivat kadota. Ja yksityiskohdat, jotka suurennetaan suurikokoisina, voivat joskus aiheuttaa epätavallisia ongelmia.

Neljä fonttiyhdistelmää epäonnistuvat eri syistä:

1. Tämä kirjoitusfontti on suunniteltu jäljittelemään käsinkirjoitusta. Sen reunat sisältävät satoja vektoripisteitä, joista suurin osa menetetään pienikokoisina.
2. Tee kuitenkin käsikirjoitus liian suureksi ja kirjaimet näyttävät vähemmän kuin käsinkirjoitukset ja enemmän kuin haukkuneet Illustrator-polut.
3. Zapfinon kalligrafiset reunat ovat parempia kuin Texas Heroin, mutta "b": n valtava nousu heittää koostumuksen tasapainosta.
4. Lucida Blackletter on liian monimutkainen, jotta se olisi käytännöllinen taustana, ainakin ilman pienestä tekstistä huolellista järjestelyä. Myös sen ainutlaatuinen hahmo katoaa pienessä koossa. Ovatko nämä swoops ja serifs, vai onko se vain sumea?

Suuri teksti, liian paksu tai liian ohut on aivan oikea

Kun päällekkäinen teksti, ajattele suurta tyyppiä sekä tekstinä että taustana . Mitä monimutkaisempia kirjaimia, sitä enemmän tekstuurit kuin ne tulevat. Toisin sanoen ne todennäköisemmin hämärtävät pienimuotoisen kirjaimen muodot.

Välttääksesi ongelmia, mene rasva tai ohut. Erittäin paksut ja erittäin kevyet muodot toimivat paremmin kuin tavalliset painot samasta kasvosta. Molemmat häiritsevät vähemmän, koska pienellä tekstillä on vähemmän mahdollisuus lyödä reunaa.

Esimerkiksi valon ja mustan suuren tekstin isossa tekstissä on vähemmän pieniä kirjaimia. Tietenkin jokainen kasvot - ja jokainen sanojen sarja - on erilainen. Yleensä keskipainot aiheuttavat kuitenkin enemmän ongelmia kuin ohut ja paksut painot.

Käytännön esimerkkejä

Kuinka tämä voisi toimia todennäköisemmällä tekstillä? Seuraavassa on muutama esimerkki päällekkäisestä tekstistä.

Miksi se toimii: Haalistunut taustalle, iso teksti antaa selkeän prioriteetin pienelle tekstille. Museon geometriset muodot ovat vähän häiritseviä.

Mahdolliset ongelmat: Tämä päällekkäisyys ei toimisi aivan, jos pieni teksti olisi lyhyempi. Viestin kuljettamiseksi pienten tekstien on oltava päällekkäisiä suurten tekstin kaikkien kuuden kirjaimen kanssa.

Miksi se toimii: Pieni teksti ylittää vain kolme paksua ja kaksi ohutta väriä. Paljon kontrastia, jopa lämmin värivalikoima.

Mahdolliset ongelmat: Suuren tekstin energiset reunat näyttävät toimivan pienen tekstin tyylikkäiden viivojen vastaisesti.

Miksi se toimii? Molempien tekstirivien terävät geometriset muodot ovat täsmällisiä.

Mahdolliset ongelmat: näkyykö pieni teksti hukkaan? Onko kirjasimet todella heijastavat " steampunk ?”

Miksi se toimii: Suuret kirjaimet sekä puhtaat viivat molemmissa teksteissä tekevät jokaisesta merkistä selkeän.

Mahdolliset ongelmat: Tekeako taustakuvio liian vaikea lukea?

Miksi se toimii: Paksu iso teksti on yksinään luettavissa, kun taas intiimi pieni teksti kutsuu lukemista. Useita ylimääräisiä täyttöjä ylläpitävät pääoman "S" kirjainten värisyvyys.

Mahdolliset ongelmat: SxSW tuotetaan tyypillisesti bittikarttasymboliin; nämä ovat tuotemerkkejä. Käytä myös pienten tekstien komentojonoja säästeliäästi.

Mutta onko se apua?

Käytetään näitä oppitunteja alkuperäiseen kokoonpanoon.

Miksi se toimii:

• Suuri teksti sekoittuu tummalle taustalle, mutta sen koko varmistaa sen näkyvän.
• Kirkas väri tekee pienestä tekstistä erottuvan. Oikea suuntaus tasapainottaa sen.
• Pienten kirjainten huolellinen välimatka ja isojen kirjainten yksinkertaisuus pysyvät ristiriidassa minimiin.
• Kaksi kirjasinta ovat yhteisiä elementtejä. Esimerkiksi kaksi "W" s kohdistaa, vaikka ne ovat eri pinnoissa.

Kirjoitettu yksinomaan Ben Gremillionin Webdesigner Depotille . Ben on web-suunnittelija, joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.

Mitkä ovat viimeisen esimerkin mahdolliset ongelmat? Jaa ajatuksesi alla oleviin kommentteihin.

• ← 10 symboliset fontit ja miksi et koskaan halua käyttää niitä
• 12 Merkittäviä sääntöjä, joita noudatetaan logon suunnittelussa →