Creare intestazioni con testo sovrapposto grande e piccolo
Le intestazioni introducono contenuti.
Possiamo applicare molti effetti e trucchi a titoli basati su elementi grafici per invogliare i lettori a continuare a leggere, ad impostare il tono o a far risaltare una voce tra molte.
Ma a volte le tecniche più ovvie, come la modifica del peso visivo e del layout, funzionano molto meglio.
I titoli sovrapposti usano una piccola quantità di testo grande e una grande quantità di testo piccolo per comunicare più di quanto una semplice intestazione possa fare da sola. Sembra contraddittorio? Solo se ignori i punti fini.
Continua a leggere per imparare come creare intestazioni memorabili con testo sovrapposto.
Che cosa hanno a che fare le strane forme sopra con i nomi "WDD" e "WDD" {$lang_domain} “? Sono sfortunati artefatti di aver posato un testo sull'altro senza alcun riguardo al posizionamento o al dettaglio. Ecco l'immagine incriminata:
A colpo d'occhio, il grafico sopra è una semplice presentazione del nome di un blog e la sua abbreviazione. Il carattere tipografico è quello ufficiale utilizzato dal blog; l'arancione brillante arriva direttamente dal tema del sito web; e entrambe le righe di testo sono centrate quasi perfettamente.
È persino scritto e scritto in maiuscolo in base allo stile del blog. Ma è un tentativo dilettantistico di imitare la tecnica di sovrapposizione schiacciando una lunga riga di testo su una breve. (I punti deboli in questo esempio sono esagerati, sebbene non rari.)
L'ombreggiatura sopra rivela le nuove forme create dalle due parti di testo. Come le due linee si riferiscono a ciascuna e l'ordine in cui vengono letti dipende da come sono disposte. C'è molto altro da sovrapporre al testo che impostarne uno sopra l'altro.
Ovviamente, la sovrapposizione non è sempre il modo migliore per organizzare un titolo breve e un sottotitolo lungo.
Gli esempi seguenti mostrano alcuni trattamenti possibili quando un design richiede qualcosa di più creativo del normale h1 e h2 elementi.
Il testo sovrapposto ha un'eleganza che non può essere facilmente duplicata con HTML (ancora). Due righe di testo insieme ammontano spesso a più della somma di ciascuna individualmente.
Fondamenti di testo sovrapposti
Il testo sovrapposto contrappone due righe di tipo l'una contro l'altra. Il grande testo si basa sul piccolo testo, che spesso contiene più parole. Le parti complicate assicurano che entrambe le linee siano ugualmente leggibili, facendo sì che entrambi lavorino insieme invece che uno contro l'altro e mantenendo l'intero pacchetto in argomento.
Diverse tecniche modificano l'effetto del testo che si sovrappone.
Ecco i quattro principali fattori che influiscono sul testo che si sovrappone:
- Il posizionamento ha a che fare con il posizionamento del testo piccolo rispetto al testo grande. Questo influenza direttamente il modo in cui il testo viene letto. Se il testo piccolo è verso l'alto a sinistra, probabilmente verrà letto prima (cioè prima del testo grande). Se il testo piccolo si trova in basso a destra, verrà probabilmente letto secondo.
- Il peso relativo si riferisce alla quantità di attenzione che un pezzo di testo disegna rispetto all'altro. Date le sue dimensioni, il grande testo tende a dominare. Tuttavia, se il testo grande è sbiadito sullo sfondo, il piccolo testo salta fuori.
- La voce (principalmente il carattere e il colore) si riferisce alle scelte estetiche che regolano l'atmosfera della tipografia.
- L'interazione è la più difficile. Ha a che fare con il modo in cui le forme delle lettere dei testi funzionano tra loro. L'interazione dipende dal posizionamento, dal carattere tipografico e dai personaggi stessi. L'obiettivo è quello di collegare visivamente linee di testo apparentemente opposte.
Il posizionamento influisce sul modo in cui le righe nel loro insieme vengono lette
L'ordine in cui si desidera che i visitatori leggano il testo è il fattore più importante nel determinare come organizzare le righe di testo. L'inglese è una lingua da sinistra a destra, il testo piccolo a sinistra leggerà in modo significativo rispetto al testo piccolo sulla destra.
Con il testo piccolo nell'angolo in alto a sinistra, il grafico in alto si legge così: "Evitalo come la peste. Cliché. "Tuttavia, i" cliché "sono scritti in modo così grande che la gente potrebbe leggerlo per primo. L'equilibrio tra dimensione e posizione mette le due linee su un piano di parità.
La versione sopra è meno ambigua. Lo smistamento del testo piccolo in basso a destra offre una chiara precedenza al testo grande. Ora recita: "Cliché: evitali come la peste".
I titoli sopra sono intercambiabili perché ogni linea è più o meno indipendente. Quando le linee dipendono l'una dall'altra, il posizionamento è più critico. Ecco un esempio di un lavoro scarso:
Mettere il piccolo testo in basso a destra lascia i lettori appesi. "Piaga: evita i cliché come il ..."? Sebbene la maggior parte delle persone lo capisca, il momento di esitazione è la differenza tra una mediocre e una buona presentazione.
La disposizione appena sopra è la migliore perché il testo piccolo è la prima parte della frase. Se vogliamo mettere il piccolo testo a destra, allora il grande testo dovrà formare la prima parte della frase. Ma di nuovo, c'è un intoppo.
A seconda della frase, usare solo la prima parola per il testo grande non è sufficiente, perché le righe di testo devono funzionare sia individualmente che insieme. Il testo sopra divide la frase in modo improprio. Il verbo comandante "evitare" non ha abbastanza significato da solo per garantire l'indipendenza. E i "cliché come la piaga" sembrano paragonare le frasi abusate alle malattie, invece di prescrivere l'evitamento di entrambi. Il significato di tutto il grafico cambia.
Anche se dobbiamo rimpicciolire il testo grande per adattarlo, usando due parole (una frase completa) per il testo grande, entrambe le righe leggono meglio.
Con il testo sovrapposto, ottenere il giusto fraseggio attraverso il layout è importante quanto la scelta del colore e dei caratteri.
Equilibrio Dominanza lavorando con, non contro, sullo sfondo
Sebbene lo scopo del grande testo sia quello di dominare, può facilmente soffocare anche il testo di piccole dimensioni. Ma non è sempre male. Un buon equilibrio non consiste nell'impedire al testo grande di dominare il testo di piccole dimensioni, ma piuttosto di mostrare la loro importanza relativa.
La dimensione del grande testo lo rende naturalmente l'affermazione principale. È grandioso se il testo di piccole dimensioni si suppone semplicemente di supportare il grande testo. Per esempio:
"WWW" salta per primo. "Welcome to the digital age" elabora l'idea, supportando le tre W. Ma cosa accadrebbe se il piccolo testo dovesse portare il messaggio principale?
Sopra, il testo principale è "Benvenuti nell'era digitale". E cosa significa? Sbiadito, "WWW" fornisce un suggerimento.
Più il testo grande si fonde con lo sfondo, minore è l'importanza che assume. Quando il grande testo è appena visibile, il piccolo testo diventa l'elemento principale.
L'interazione è nei dettagli
La forma di un carattere tipografico è la chiave del suo aspetto distinto. Quando due righe di testo si sovrappongono, creano tasche, forme strane e altre sottili distrazioni.
Sopra, il grande testo bianco e arancione aggiunge un inutile disordine ai contatori (cioè i buchi all'interno delle lettere). Da solo, ogni bit in più non ostacola molto la leggibilità. Ma questo è parte del problema: perché non sono abbastanza brutti da rendere il testo illeggibile, potrebbero essere facilmente liquidati come non importanti.
Per la massima leggibilità, dobbiamo conservare le lettere del piccolo testo.
Come mostrato sopra, piccole regolazioni hanno chiarito l'interferenza:
- Riposizionato tra i terminali a morsetto della grande "C", la parola "testo" è ora molto più chiara.
- Nota come i gambi verticali di "r" e "n" in "esplicativo" incontrano i bordi della grande "C".
- I contatori in "p" e "o" in "supportivo" ora contengono solo il nero.
- Abbiamo tagliato la lettera grande "A" per rendere più chiara la "s" in "solidale".
L'obiettivo è preservare le forme delle lettere minuscole, anche se i lettori non se ne accorgono.
Il carattere tipografico fa la differenza
Non tutti i caratteri sono adatti per taglie grandi e piccole. Con una dimensione abbastanza piccola, i dettagli di un carattere tipografico possono scomparire. E i dettagli ingranditi a grandi dimensioni possono a volte creare problemi insoliti.
Le quattro combinazioni di caratteri sopra indicate non riescono per diversi motivi:
- Questo carattere tipografico di script è stato progettato per imitare la scrittura a mano. I suoi bordi frastagliati contengono centinaia di punti vettoriali, molti dei quali vengono persi in piccole dimensioni.
- Ma rendi la sceneggiatura troppo grande e le lettere sembrano meno scritte a mano e più simili ai tracciati di Illustrator smerlati.
- I bordi calligrafici di Zapfino vanno meglio di quelli di Texas Hero, ma l'enorme ascendente sulla "b" getta la composizione fuori equilibrio.
- Lucida Blackletter è troppo complicata per essere pratica come sfondo, almeno senza un'attenta disposizione del piccolo testo. Inoltre, il suo carattere unico scompare in piccole dimensioni. Sono quelli piombati e serif, o è solo sfocato?
Per il testo grande, troppo spesso o troppo sottile è giusto
Quando sovrapponi il testo, pensa al tipo grande come testo e sfondo . Più complicate sono le lettere, più diventano simili a texture. Cioè, è più probabile che oscurino le lettere nel piccolo testo.
Per evitare problemi, vai grasso o magro. Le forme extra spesse e leggerissime funzionano meglio di un normale peso dello stesso viso. Entrambe interferiscono meno perché il testo piccolo ha meno possibilità di colpire un margine.
Ad esempio, il grande testo nelle varianti Light e Black in alto ha meno lettere minuscole. Naturalmente, ogni faccia e ogni set di parole è diversa. Ma in generale, i pesi medi provocano più problemi rispetto ai pesi sottili e spessi.
Esempi pratici
Come potrebbe funzionare con un testo più probabile? Ecco alcuni esempi di testo sovrapposto.
Perché funziona: Sbiadito in secondo piano, il grande testo offre una chiara priorità al testo di piccole dimensioni. Le forme geometriche del museo hanno poche distrazioni.
Potenziali problemi: questa sovrapposizione non funzionerebbe se il testo piccolo fosse più corto. Per trasportare il messaggio, il testo piccolo deve sovrapporsi a tutte e sei le lettere del testo grande.
Perché funziona: il testo piccolo attraversa solo tre spessi e due tratti di colore sottili. Un sacco di contrasto, anche per una tavolozza di colori caldi.
Potenziali problemi: i bordi energetici del testo grande sembrano funzionare contro le linee eleganti del piccolo testo.
Perché funziona: entrambe le linee di testo hanno forme geometriche nitide e sono allineate con precisione.
Potenziali problemi: il testo piccolo sembra un po 'perso? I caratteri tipografici riflettono davvero lo spirito di " steampunk ?”
Perché funziona: il tracciamento generoso nelle lettere grandi e le linee pulite in entrambi i testi rendono chiaro ogni personaggio.
Potenziali problemi: la trama dello sfondo rende il testo troppo difficile da leggere?
Perché funziona: il grande testo spesso è leggibile da solo, mentre il piccolo testo intimo invita a leggere. Diversi riempimenti extra mantengono la profondità del colore delle lettere maiuscole "S".
Potenziali problemi:
Ma aiuta?
Applichiamo queste lezioni alla nostra composizione originale.
Perché funziona:
- Il testo grande si fonde con lo sfondo scuro, ma le sue dimensioni assicurano che sia visibile.
- Il colore brillante fa risaltare il testo piccolo. Il giusto allineamento lo equilibra.
- Un'attenta spaziatura delle lettere minuscole e la semplicità delle grandi lettere riducono al minimo i conflitti.
- I due caratteri tipografici condividono elementi comuni. Ad esempio, i due "W" si allineano, pur essendo in facce diverse.
Scritto esclusivamente per il Webdesigner Depot di Ben Gremillion . Ben è un web designer che risolve problemi di comunicazione con un design migliore.
Quali sono alcuni dei potenziali problemi dell'ultimo esempio? Si prega di condividere i tuoi pensieri nei commenti qui sotto.