Maak koppen met grote en kleine overlappende tekst
Koppen introduceren inhoud.
We kunnen veel effecten en trucs toepassen op op afbeeldingen gebaseerde koppen om lezers te verleiden om verder te lezen, om de toon in te stellen of om een kop onder velen te laten uitkomen.
Maar soms werken de meest voor de hand liggende technieken, zoals het aanpassen van het visuele gewicht en de lay-out, een stuk beter.
Overlappende titels gebruiken een kleine hoeveelheid grote tekst en een grote hoeveelheid kleine tekst om meer te communiceren dan een gewone kop op zich zou kunnen. Klinkt het tegenstrijdig? Alleen als je de fijne punten negeert.
Lees verder om te leren hoe u memorabele koppen kunt maken met overlappende tekst.
Wat hebben de vreemde vormen hierboven te maken met de namen "WDD" en " {$lang_domain} “? Het zijn ongelukkige artefacten omdat ze de ene tekst boven de andere hebben geplaatst zonder rekening te houden met plaatsing of details. Dit is de aanstootgevende afbeelding:
In één oogopslag is de bovenstaande afbeelding een eenvoudige weergave van een blognaam en zijn afkorting. Het lettertype is het lettertype dat door de blog wordt gebruikt; het heldere oranje komt rechtstreeks uit het thema van de website; en beide tekstregels zijn bijna perfect gecentreerd.
Het is zelfs gespeld en gekapitaliseerd volgens de stijl van de blog. Maar het is een amateuristische poging om de overlappende techniek na te bootsen door een lange rij tekst op een korte tekst te slaan. (De zwakke punten in dit voorbeeld zijn overdreven, hoewel niet ongebruikelijk.)
De schaduw boven onthult de nieuwe vormen die door de twee stukken tekst zijn gemaakt. Hoe de twee lijnen met elkaar te maken hebben en de volgorde waarin ze worden gelezen, hangt af van hoe ze zijn ingedeeld. Er is meer aan elkaar overlappende tekst dan een boven elkaar plaatsen.
Natuurlijk is overlapping niet altijd de beste manier om een korte titel en een lange ondertitel te regelen.
De onderstaande voorbeelden tonen enkele mogelijke behandelingen wanneer een ontwerp iets creatiever dan normaal vraagt h1 en h2 elementen.
Overlappende tekst heeft een elegantie die (nog) niet gemakkelijk met HTML kan worden gedupliceerd. Twee regels tekst bij elkaar bedragen vaak meer dan de som van elk afzonderlijk.
Grondbeginselen van overlappende tekst
Overlappende tekst stelt twee regels tekst tegenover elkaar. De grote tekst rust achter de kleine tekst, die vaak meer woorden bevat. De lastige delen zorgen ervoor dat beide regels even leesbaar zijn, waardoor ze beide samenwerken in plaats van tegen elkaar en het hele pakket over het onderwerp houden.
Verschillende technieken veranderen het effect van overlappende tekst.
Dit zijn de vier belangrijkste factoren die van invloed zijn op overlappende tekst:
- Plaatsing heeft te maken met hoe de kleine tekst ten opzichte van de grote tekst wordt gepositioneerd. Dit heeft rechtstreeks invloed op hoe de tekst wordt gelezen. Als de kleine tekst links bovenaan staat, wordt deze waarschijnlijk als eerste gelezen (dus vóór de grote tekst). Als de kleine tekst naar rechts-rechts is gericht, wordt deze waarschijnlijk als tweede gelezen.
- Relatief gewicht verwijst naar de hoeveelheid aandacht die een stuk tekst trekt ten opzichte van de ander. Gezien de omvang ervan neigt de grote tekst te domineren. Als de grote tekst echter op de achtergrond verdwijnt, springt de kleine tekst eruit.
- Stem (vooral lettertype en kleur) heeft betrekking op de esthetische keuzes die de sfeer van de typografie bepalen.
- Interactie is het lastigste. Het heeft te maken met hoe de lettervormen van de teksten met elkaar werken. Interactie hangt af van plaatsing, lettertype en de personages zelf. Het doel is om ogenschijnlijk tegenover elkaar liggende tekstregels visueel te verbinden.
Plaatsing beïnvloedt hoe lijnen als geheel worden gelezen
De volgorde waarin u wilt dat bezoekers de tekst lezen, is de belangrijkste factor bij het bepalen hoe de regels van het type moeten worden gerangschikt. Omdat Engels een van links naar rechts geschreven taal is, zal kleine tekst aan de linkerkant beduidend anders zijn dan kleine tekst aan de rechterkant.
Met de kleine tekst in de linkerbovenhoek, ziet de bovenstaande afbeelding er als volgt uit: "Vermijd ze als de pest. Clichés. "Toch zijn 'clichés' zo groot dat mensen het eerst kunnen lezen. De balans tussen grootte en plaatsing plaatst de twee lijnen op gelijke voet.
De bovenstaande versie is minder dubbelzinnig. Rangeren van de kleine tekst naar rechtsonder geeft duidelijk de voorkeur aan de grote tekst. Nu luidt het als: "Clichés: vermijd hen als de pest."
De kopjes hierboven zijn uitwisselbaar omdat elke regel min of meer onafhankelijk is. Wanneer de lijnen van elkaar afhankelijk zijn, is plaatsing kritischer. Hier is een voorbeeld van een slechte baan:
Door de kleine tekst in de rechterbenedenhoek te plaatsen, blijven de lezers hangen. "Plague: vermijd clichés zoals de ..."? Hoewel de meeste mensen erachter komen, is het moment van aarzeling het verschil tussen een middelmatige en een goede presentatie.
De bovenstaande regeling is het beste omdat de kleine tekst het eerste deel van de zin is. Als we de kleine tekst aan de rechterkant willen plaatsen, moet de grote tekst het eerste deel van de zin vormen. Maar nogmaals, er is een probleem.
Afhankelijk van de zin is alleen het eerste woord voor de grote tekst niet genoeg, omdat de tekstregels zowel afzonderlijk als samen moeten werken. De bovenstaande tekst splitst de frase verkeerd. Het meest gebruikte werkwoord "vermijden" heeft op zich niet voldoende betekenis om onafhankelijkheid te waarborgen. En 'clichés zoals de pest' klinkt alsof we overmatig gebruikte zinnen vergelijken met ziekte, in plaats van het voorschrijven van het vermijden van beide. De betekenis van de hele grafische veranderingen.
Zelfs als we de grote tekst moeten verkleinen om te passen, maakt het gebruik van twee woorden (een volledige zin) voor de grote tekst het beter om beide regels te lezen.
Bij overlappende tekst is het verkrijgen van de juiste frasering door lay-out net zo belangrijk als kleur- en lettertype-keuze.
Balans dominantie door te werken met, niet tegen, de achtergrond
Hoewel het doel van grote tekst is om te domineren, kan het ook kleine tekst gemakkelijk smoren. Maar dat is niet altijd slecht. Een goede balans is niet om te voorkomen dat grote tekst kleine tekst domineert, maar veeleer om het relatieve belang ervan te laten zien.
De grootte van de grote tekst maakt het natuurlijk tot de belangrijkste uitspraak. Dat is geweldig als de kleine tekst alleen maar bedoeld is om de grote tekst te ondersteunen. Bijvoorbeeld:
"WWW" springt eerst uit. "Welcome to the digital age" gaat dieper in op het idee en ondersteunt de drie W's. Maar wat als de kleine tekst de hoofdboodschap zou moeten dragen?
Hierboven staat de hoofdtekst: "Welkom in het digitale tijdperk." En wat betekent dat? Achteraan verdwenen, "WWW" geeft een hint.
Hoe meer de grote tekst overgaat in de achtergrond, hoe minder belangrijk het wordt. Wanneer de grote tekst nauwelijks zichtbaar is, wordt de kleine tekst het belangrijkste element.
Interactie zit in de details
De vorm van een lettertype is de sleutel tot zijn aparte uiterlijk. Wanneer twee regels tekst elkaar overlappen, creëren ze zakken, vreemde vormen en andere subtiele afleidingen.
Hierboven voegen de grote oranje en kleine witte tekst onnodige rommel toe aan de tellers (de gaten in de letters). Alleen, elk extra bit belemmert de leesbaarheid niet veel. Maar dat is een deel van het probleem: omdat ze niet slecht genoeg zijn om de tekst onleesbaar te maken, kunnen ze gemakkelijk als onbelangrijk worden afgedaan.
Voor maximale leesbaarheid moeten we de letters van de kleine tekst behouden.
Zoals hierboven weergegeven, hebben kleine aanpassingen de storing verholpen:
- Verplaatst tussen de klemachtige aansluitingen van de grote "C", is het woord "tekst" nu veel duidelijker.
- Merk op hoe de verticale stelen van "r" en "n" in "verklarend" de randen van de grote "C" ontmoeten.
- De tellers in de "p" en "o" in "ondersteunend" bevatten nu alleen zwart.
- We hebben de grote letter "A" doorgesneden om de kleine letters in "ondersteunend" duidelijker te maken.
Het doel is om de vormen van de kleine letters te behouden, zelfs als de lezer het niet opmerkt.
Lettertype maakt een verschil
Niet elk lettertype is geschikt voor zowel grote als kleine formaten. Bij een kleine genoeg grootte kunnen de details van een lettertype verdwijnen. En details die op een groot formaat worden uitvergroot, kunnen soms ongebruikelijke problemen veroorzaken.
De vier bovenstaande lettercombinaties mislukken om verschillende redenen:
- Dit scriptlettertype is ontworpen om handschrift na te bootsen. De rafelige randen bevatten honderden vectorpunten, waarvan de meeste op een klein formaat verloren zijn gegaan.
- Maar maak het script te groot en de letters lijken minder op handschrift en meer op geschulpte Illustrator-paden.
- Zapfino's kalligrafische randen doen het beter dan Texas Hero's, maar de enorme opgaande beweging op de "b" gooit de compositie uit balans.
- Lucida Blackletter is te gecompliceerd om praktisch te zijn als achtergrond, althans zonder een zeer zorgvuldige indeling van de kleine tekst. Ook verdwijnt het unieke karakter ervan in een klein formaat. Zijn die opstoten en scheldwoorden, of is het gewoon vaag?
Voor grote tekst is te dik of te dun precies goed
Bij overlappende tekst, denk aan groot type als zowel tekst als achtergrond . Hoe ingewikkelder de letters, hoe textuurachtig ze worden. Dat wil zeggen, ze hebben meer kans om de lettervormen in de kleine tekst te verbergen.
Om problemen te voorkomen, gaat u dik of dun. Extra dikke en extra lichte vormen werken beter dan een normaal gewicht van hetzelfde gezicht. Beide bemoeien zich minder omdat de kleine tekst minder kans heeft een rand te raken.
De grote tekst in de bovenstaande varianten Licht en Zwart heeft bijvoorbeeld minder kleine letters. Natuurlijk is elk gezicht - en elke reeks woorden - anders. Maar over het algemeen veroorzaken middelgrote gewichten meer problemen dan dunne en dikke gewichten.
Praktische voorbeelden
Hoe kan dit werken met meer waarschijnlijke tekst? Hier zijn een paar voorbeelden van overlappende tekst.
Waarom het werkt: vervaagd naar de achtergrond, geeft de grote tekst duidelijke prioriteit aan de kleine tekst. De geometrische vormen van het Museo hebben weinig afleidingen.
Potentiële problemen: deze overlapping zou niet helemaal werken als de kleine tekst korter was. Om het bericht te dragen, moet de kleine tekst alle zes letters van de grote tekst overlappen.
Waarom het werkt: de kleine tekst kruist slechts drie dikke en twee dunne kleurstrepen. Veel contrast, zelfs voor een warm kleurenpallet.
Potentiële problemen: de energieke randen van de grote tekst lijken te werken tegen de elegante lijnen van de kleine tekst.
Waarom het werkt: beide tekstregels hebben scherpe geometrische vormen en zijn precies uitgelijnd.
Potentiële problemen: ziet de kleine tekst er een beetje verloren uit? Getuigen de lettertypen echt aan de geest van " steampunk ?”
Waarom het werkt: royale tracking in de grote letters en duidelijke lijnen in beide teksten maken elk personage duidelijk.
Potentiële problemen: maakt de achtergrondtextuur het type te moeilijk om te lezen?
Waarom het werkt: de dikke grote tekst is op zichzelf leesbaar, terwijl de kleine tekst uitnodigt om te lezen. Verschillende extra vullingen behouden de kleurdiepte van de hoofdletter "S".
Mogelijke problemen:
Maar helpt het?
Laten we deze lessen toepassen op onze oorspronkelijke compositie.
Waarom het werkt:
- De grote tekst past zich aan de donkere achtergrond aan, maar de grootte zorgt ervoor dat deze zichtbaar is.
- De felle kleur doet de kleine tekst opvallen. De juiste uitlijning brengt het in evenwicht.
- Zorgvuldige spatiëring van de kleine letters en de eenvoud van de grote letters beperken het conflict tot een minimum.
- De lettertypen delen gemeenschappelijke elementen. De twee 'W's' komen bijvoorbeeld overeen, ondanks dat ze in verschillende gezichten staan.
Exclusief geschreven voor Webdesigner Depot door Ben Gremillion . Ben is een webdesigner die communicatieproblemen met beter ontwerp oplost.
Wat zijn enkele van de potentiële problemen van het laatste voorbeeld? Deel uw mening in de reacties hieronder.