Opprett overskrifter med stor og liten overlappende tekst
Overskrifter presenterer innhold.
Vi kan bruke mange effekter og triks til grafisk baserte overskrifter for å lokke leserne til å fortsette å lese, for å angi tonen eller for å få en posisjon til å skille seg ut blant mange.
Men noen ganger fungerer de mest åpenbare teknikkene, for eksempel å endre visuell vekt og layout, mye bedre.
Overlappende titler bruker en liten mengde stor tekst og en stor mengde liten tekst til å kommunisere mer enn en vanlig overskrift kan gjøre selv. Høres motstridende? Bare hvis du ignorerer de fine poengene.
Les videre for å lære hvordan du lager minneverdige overskrifter med overlappende tekst.
Hva har de ulike figurene ovenfor å gjøre med navnene "WDD" og " {$lang_domain} “? De er uheldig artefakter fra å ha lagt en tekst over den andre uten hensyn til plassering eller detalj. Her er det fornærmende bildet:
På et øyeblikk er grafikken over en enkel presentasjon av et bloggnavn og forkortelse. Skriften er den offisielle som brukes av bloggen; Den lyse oransjen kommer rett fra nettstedets tema; og begge tekstlinjer er sentrert nesten perfekt.
Det er til og med stavet og kapitalisert i henhold til bloggens stil. Men det er et amatørlig forsøk på å etterligne overlappingsteknikken ved å slå en lang linje med tekst på en kort. (Svakhetene i dette eksemplet er overdrevne, men ikke uvanlige.)
Skyggen over viser de nye figurene som er opprettet av de to tekststykkene. Hvordan de to linjene relaterer seg til hver og ordren der de er lest, avhenger av hvordan de er lagt ut. Det er mer å overlappe tekst enn å sette en på toppen av den andre.
Selvfølgelig er overlapping ikke alltid den beste måten å ordne en kort tittel og lang undertittel på.
Eksemplene nedenfor viser noen mulige behandlinger når et design krever noe mer kreativt enn vanlig h1 og h2 elementer.
Overlappende tekst har en eleganse som ikke lett kan dupliseres med HTML (ennå). To tekstlinjer sammen tilsvarer ofte mer enn summen av hver enkelt.
Grunnleggende om overlappende tekst
Overlappende tekst kontrasterer to linjer av typen mot hverandre. Den store teksten hviler på den lille teksten, som ofte inneholder flere ord. De vanskelige delene sikrer at begge linjene er like lesbare, slik at begge arbeider sammen i stedet for mot hverandre og holder hele pakken på emnet.
Ulike teknikker endrer effekten av overlappende tekst.
Her er de fire hovedfaktorene som påvirker overlappende tekst:
- Plassering har å gjøre med hvordan den lille teksten plasseres i forhold til den store teksten. Dette påvirker direkte hvordan teksten leses. Hvis den lille teksten er øverst til venstre, vil den sannsynligvis bli lest først (dvs. før den store teksten). Hvis den lille teksten er mot nederst til høyre, vil den sannsynligvis bli lest andre.
- Relativ vekt refererer til mengden oppmerksomhet et stykke tekst trekker i forhold til det andre. Gitt sin størrelse, den store teksten har en tendens til å dominere. Men hvis den store teksten blir bleknet i bakgrunnen, vil den lille teksten hoppe ut.
- Stemme (hovedsakelig skrift og farge) relaterer seg til de estetiske valgene som setter stemningen til typografien.
- Interaksjon er den vanskeligste. Det har å gjøre med hvordan brevformene i teksten samarbeider med hverandre. Interaksjonen avhenger av plassering, skrift og tegnene selv. Målet er å visuelt knytte tilsynelatende motsatte linjer med tekst sammen.
Plassering påvirker hvordan linjer som en hel leses
Ordren der du vil at besøkende skal lese teksten, er den viktigste faktoren for å bestemme hvordan man skal ordne linjene av typen. Engelsk er et venstre til høyre språk, liten tekst til venstre vil lese vesentlig annerledes enn liten tekst til høyre.
Med den lille teksten øverst i venstre hjørne står grafikken over som sådan: "Unngå dem som pesten. Clichés. "Still," clichés "er skrevet så stort at folk kan lese det først. Balansen mellom størrelse og plassering setter de to linjene på lik linje.
Utgaven ovenfor er mindre tvetydig. Skalering av den lille teksten til nedre høyre gir klar forrang til den store teksten. Nå står det som: "Clichés: Unngå dem som pesten."
Overskriftene ovenfor er utskiftbare fordi hver linje er mer eller mindre uavhengig. Når linjene er avhengige av hverandre, er plassering mer kritisk. Her er et eksempel på en dårlig jobb:
Når du legger den lille teksten i nedre høyre blader, henger leserne. "Pest: Unngå clichés som ..."? Selv om de fleste vil finne ut av det, er tingenes øyeblikk forskjellen mellom en middelmådig og en god presentasjon.
Ordningen rett over er best fordi den lille teksten er den første delen av setningen. Hvis vi vil legge den lille teksten til høyre, må den store teksten danne første del av setningen. Men igjen er det en hitch.
Avhengig av setningen er det ikke nok å bruke bare det første ordet for den store teksten, fordi tekstlinjene må arbeide individuelt så vel som sammen. Teksten over deler frasen feil. Det kommende verbet "unngå" har ikke nok mening i seg selv for å garantere uavhengighet. Og "klichéer som pesten" høres ut som om vi sammenligner overbrukte fraser til sykdom, i stedet for å foreskrive unngåelse av begge. Betydningen av hele grafikken endres.
Selv om vi må krympe den store teksten slik at den passer, bruker to ord (en komplett setning) for den store teksten, at begge linjene leses bedre.
Med overlappende tekst er å få riktig frasering gjennom layout like viktig som farge- og skriftvalg.
Balanse Dominans ved å jobbe med, ikke mot, bakgrunnen
Selv om formålet med stor tekst er å dominere, kan den også lett smøre liten tekst også. Men det er ikke alltid dårlig. God balanse handler ikke om å hindre stor tekst fra å dominere liten tekst, men heller om å vise sin relative betydning.
Størrelsen på den store teksten gjør det selvfølgelig den viktigste setningen. Det er flott hvis den lille teksten bare skal støtte den store teksten. For eksempel:
"WWW" hopper ut først. "Velkommen til den digitale tidsalderen" utdyper ideen, og støtter de tre Ws. Men hva om den lille teksten skulle bære hovedbudskapet?
Ovenfor er hovedteksten "Velkommen til den digitale tidsalderen." Og hva betyr det? Bleknet bak, "WWW" gir et hint.
Jo mer den store teksten blandes inn i bakgrunnen, desto mindre viktig det tar på. Når den store teksten er knapt synlig, blir den lille teksten hovedelementet.
Interaksjon er i detaljene
Formen på et skrifttype er nøkkelen til sitt distinkte utseende. Når to linjer med tekst overlapper, lager de lommer, ulike figurer og andre subtile distraksjoner.
Ovenfor legger den store oransje og små hvite teksten unødvendig rot på tellerne (dvs. hullene i bokstavene). Alene, hver ekstra bit hindrer ikke lesbarhet mye. Men det er en del av problemet: fordi de ikke er dårlige nok til å gjøre teksten ulastelig, kan de lett bli avvist som ubetydelig.
For å få maksimal lesbarhet må vi beholde bokstaver i små tekster.
Som vist ovenfor har små justeringer fjernet forstyrrelsen:
- Erstatt mellom klemme-like terminaler av den store "C", ordet "tekst" er nå mye klarere.
- Legg merke til hvordan de vertikale stilkene av "r" og "n" i "forklarende" møter kantene på den store "C."
- Tellerne i "p" og "o" i "støttende" inneholder nå bare svart.
- Vi har kuttet stor bokstav "A" for å gjøre små bokstaver "s" i "støttende" klarere.
Målet er å bevare former av små bokstaver, selv om leserne ikke legger merke til det.
Typeface gjør en forskjell
Ikke alle skrifttyper passer for både store og små størrelser. I en liten nok størrelse kan et skrifts detaljer forsvinne. Og detaljer som forstørres i stor størrelse, kan noen ganger skape uvanlige problemer.
De fire skriftkombinasjonene ovenfor mislykkes av forskjellige grunner:
- Dette skriptet var designet for å etterligne håndskrift. Den ragged kaninen inneholder hundrevis av vektor poeng, hvorav de fleste går tapt i liten størrelse.
- Men gjør skriptet for stort og bokstavene ser mindre ut som håndskrift og mer som scalloped Illustrator-stier.
- Zapfinos kalligrafiske kanter går bedre enn Texas Heroes, men den enorme stigeren på "b" kaster komposisjonen ut av balanse.
- Lucida Blackletter er for komplisert til å være praktisk som bakgrunn, i hvert fall uten å være veldig forsiktig med den lille teksten. Dessuten forsvinner sin unike karakter i en liten størrelse. Er de swoops og serifs, eller er det bare fuzzy?
For stor tekst, for tykk eller for tynn er bare riktig
Når du overlapper tekst, tenk på stor type som både tekst og bakgrunn . Jo mer kompliserte bokstavene, desto mer teksturlignende blir de. Det vil si at de er mer sannsynlig å skjule brevformene i den lille teksten.
For å unngå problemer, gå fett eller tynn. Ekstra tykke og ekstra lyse former fungerer bedre enn en vanlig vekt på samme ansikt. Begge forstyrre mindre fordi den lille teksten har mindre sjanse til å treffe en kant.
For eksempel treffer den store teksten i lys og svarte variasjoner over færre små bokstaver. Selvfølgelig er hvert ansikt - og hvert sett med ord - annerledes. Men generelt gir middels vekter flere problemer enn tynne og tykke vekter.
Praktiske eksempler
Hvordan kan dette fungere med mer sannsynlig tekst? Her er noen eksempler på overlappende tekst.
Hvorfor det virker: Blek i bakgrunnen, den store teksten gir klar prioritet til den lille teksten. Museos geometriske former har få forstyrrelser.
Potensielle problemer: Denne overlappingen ville ikke fungere dersom den lille teksten var kortere. For å bære meldingen må den lille teksten overlappe alle seks bokstavene i den store teksten.
Hvorfor fungerer det: Den lille teksten krysser over bare tre tykke og to tynne fargestrøk. Masse kontrast, selv for en varm fargepalett.
Potensielle problemer: Den store tekstens energiske kanter ser ut til å virke mot de elegante linjene i den lille teksten.
Hvorfor fungerer det: Begge tekstlinjer har skarpe geometriske former og justeres nøyaktig.
Potensielle problemer: Ser den lille teksten litt tapt ut? Skrive skrifter virkelig ånden til " steampunk ?”
Hvorfor det virker: Generøs sporing i store bokstaver og rene linjer i begge tekster gjør hvert tegn klart.
Potensielle problemer: Gjør bakgrunnsstrukturens tekstur for vanskelig å lese?
Hvorfor det virker: Den tykke store teksten er lesbar på egenhånd, mens den intime lille teksten inviterer til å lese. Flere ekstra fyllinger opprettholder fargedybden på hovedstaden "S" bokstaver.
Potensielle problemer:
Men hjelper det?
La oss bruke disse leksjonene til vår opprinnelige sammensetning.
Hvorfor det virker:
- Den store teksten smelter inn i den mørke bakgrunnen, men størrelsen sikrer at den er synlig.
- Den lyse fargen gjør at den lille teksten skiller seg ut. Høyrejusteringen balanserer den.
- Forsiktig avstand mellom de små bokstaver og enkelheten til de store bokstavene holder konflikten til et minimum.
- De to skrifttyper deler felles elementer. For eksempel justerer de to "W" s, til tross for at de er i forskjellige ansikter.
Skrevet utelukkende for Webdesigner Depot av Ben Gremillion . Ben er en webdesigner som løser kommunikasjonsproblemer med bedre design.
Hva er noen av de potensielle problemene i det siste eksemplet? Vennligst del dine tanker i kommentarene nedenfor.