Decisioni di design ispirate con Herb Lubalin: la tipografia può essere emozionante quanto l'illustrazione e la fotografia

Mentre un buon uso dei caratteri aiuta le persone a leggere, un'ottima tipografia può fare molto di più. La tipografia può articolare in modo eloquente un'idea e comunicare in modo colorato un messaggio in modi potenti quanto qualsiasi illustrazione o fotografia.

Sono una persona che ama il cinema tanto quanto ammiro la tipografia. Poche cose mi ispirano tanto quanto vedere la tipografia di poster di film che evoca l'atmosfera di un film e aggiunge al racconto della sua storia.

Più recentemente, la tipografia nei poster dei film di Quentin Tarantino riflette perfettamente l'atmosfera e il carattere dei suoi film. In Pulp Fiction, il carattere tipografico Aachen Bold del titolo è duro come il film stesso. Per C'era una volta a Hollywood, anche se la composizione del segno iconico devia dalla realtà tanto quanto altre parti del film, il poster evoca lo spirito di Hollywood.

Saul Bass è forse il grafico più famoso della sua epoca e per la Hollywood degli anni '50 e '60 ha creato locandine di film che sono riconoscibili come l'insegna stessa. Per il suo poster per Vertigo di Hitchcock nel 1958, Bass ha utilizzato una tipografia tagliata a mano che evoca i film espressionisti tedeschi degli anni '20. Nel 1960, la tipografia del titolo tagliata di Bass per Pyscho - sempre per Alfred Hitchcock - è sia intelligente che ovvia. Mentre a Saul Bass viene spesso erroneamente attribuito il merito di aver disegnato uno dei miei poster di film preferiti di West Side Story, - Bass ha disegnato la sequenza del titolo - il poster è stato in realtà disegnato da Joseph Caroff che ha anche creato il famoso logo 007 di James Bond.

Sebbene non abbiamo ancora lo stesso controllo sulla tipografia sul Web che abbiamo sulla stampa, i nuovi formati di file, i servizi di consegna dei caratteri e i caratteri Web hanno significato molta più flessibilità tipografica rispetto a dieci anni fa. I controlli tipografici nei CSS ci hanno aiutato a essere più creativi anche con il tipo. Oltre alle proprietà di base dello stile dei caratteri, ora possiamo ottimizzare in modo affidabile figure OpenType, sillabazione, legature e persino crenatura.

È raro trovare usi così creativi per la digitazione online, lo studio del lavoro di grafici e tipografi di talento può aprire i nostri occhi su ciò che possiamo ottenere utilizzando le moderne tecnologie di digitazione. Uno dei miei designer e tipografi preferiti è Herb Lubalin e conoscere lui e il suo lavoro ha trasformato il mio approccio alla tipografia.

Ispirato da Herb Lubalin

Herb Lubalin era un grafico americano che ha trascorso la sua carriera disegnando di tutto, dalla pubblicità, ai poster e persino ai francobolli. Era affascinato dall'aspetto delle parole e dal modo in cui il design tipografico può farle suonare. Lubalin ha capito come combinando arte, copia e tipografia, i grafici aggiungono convinzione quando comunicano messaggi. Egli ha detto:

"Meglio le persone comunicano, maggiore sarà la necessità di una migliore tipografia-tipografia espressiva."

— Herb Lubalin

Dopo aver superato per un soffio l'esame di ammissione alla scuola d'arte Cooper Union di New York, Herbert (Herb) Lubalin è stato licenziato dal suo primo lavoro come artista grafico per aver chiesto un aumento di $ 2 a settimana. Nelle agenzie pubblicitarie americane prebelliche, il lavoro di un artista del layout era semplicemente quello di inserire titoli, testi e immagini nello spazio disponibile, ma le cose sono cambiate dopo la seconda guerra mondiale con un afflusso di designer immigrati dall'Europa. Tra questi c'erano l'austriaco Herbert Bayer, il russo Mehemed Fehmy Agha e il bielorusso Alexey Brodovitch.

Questi designer hanno importato nuovi processi che hanno riunito direttori artistici, artisti del layout e scrittori per formare i team creativi resi popolari dal famoso direttore creativo pubblicitario Bill Bernbach negli anni '60 e '70.

Nel 1945 Lubalin divenne direttore artistico di Sudler & Hennessey, uno studio creativo specializzato nell'industria farmaceutica, dove guidava un team di designer, illustratori e fotografi. Il processo che Lubalin ha avviato prima presso Sudler & Hennessey e dal 1964 nel suo studio è affascinante. Ha guidato il processo di progettazione creando "tessuti" - schizzi a penna e inchiostro che stabilivano la disposizione spaziale dei suoi elementi - e note dettagliate sui progetti tipografici, comprese le scelte di carattere tipografico, dimensioni e pesi.

All'inizio di qualsiasi nuovo progetto, Lubalin ha iniziato disegnando arrangiamenti di titoli, copia e immagini su carta velina. Quindi, metteva un altro fazzoletto sopra per perfezionare le sue idee, poi un altro e un altro ancora per sviluppare rapidamente il suo design. Dopo che i suoi assistenti hanno recuperato i tessuti scartati dal pavimento o dalla spazzatura, sono diventati oggetti da collezione.

Lubalin era un perfezionista ossessivo sulla tipografia. Per "Let's talk type" - una pubblicità commerciale per Sudler & Hennessey - Lubalin ha posizionato esattamente l'unico paragrafo. Questa copia si adatta perfettamente alla linea di base accanto alla parola "let" e le sue dimensioni e l'inizio consentono il discendente dalla lettera "y" sopra.

Lubalin è stato altrettanto preciso riguardo alla collocazione del testo in un poster che annunciava il concorso di poster contro la guerra Avant Garde. Prendeva spesso una lama da bisturi per digitare, regolando la spaziatura tra le lettere e alterando l'altezza di ascendenti e discendenti per adattarla ai suoi disegni. Le lettere nel titolo di "No More War" sono dimensionate e allineate con precisione. Il tracciamento dello standfirst blu maiuscolo crea un blocco di copia che si inserisce perfettamente nel suo spazio.

In "Il quarto luglio significa picnic..." Lubalin usava la prospettiva per rappresentare la strada da percorrere. Ciò significava considerare il tracciamento di ogni riga di testo, a volte alterando le parole per adattarle al design. Lavorare con i progetti di Lubalin non è stato facile, e come ha descritto in seguito uno dei suoi assistenti:

“Per allineare tutto, devi farlo più e più volte, e poi, se il cliente altera il testo, devi rifare tutto. Per lui (Lubalin) ne è valsa la pena. Quanto tempo ci voleva o quanto costava non era importante per lui come lo era per altri designer".

Grazie alla sua incessante convinzione e al suo talento, Lubalin è diventato uno dei grafici e tipografi più celebrati del ventesimo secolo. C'è molto che possiamo imparare da come si è avvicinato al suo lavoro e dalla sua convinzione che il design può comunicare in modo convincente.

Ci sono due libri su Herb Lubalin e il suo lavoro che dovresti aggiungere alla tua collezione. "Herb Lubalin: Art Director, Graphic Designer and Typographer" (1985) di Gertrude Snyder e Alan Peckolick è fuori stampa, ma su eBay sono disponibili buone copie. Meglio ancora è "Herb Lubalin: American Graphic Designer" (2013) di Adrian Shaughnessy e pubblicato da Unit Editions. Un'edizione limitata del 2000, il libro di Shaughnessy presenta centinaia di esempi del lavoro di Lubalin.

Titoli di preformattazione

I titoli sono un luogo perfetto per iniziare a essere più avventurosi con il tipo. La tipografia espressiva non ha bisogno di caratteri fantasiosi. Puoi creare un titolo accattivante utilizzando stili e pesi diversi che si trovano in molte famiglie di caratteri di uso quotidiano. Cerca famiglie estese come Montserrat, progettata da Julieta Ulanovsky e disponibile su Google Fonts, con la sua varietà di pesi che vanno da sottile e leggero, a extra-audace e persino nero.

Per questo primo design ispirato a Herb Lubalin, il mio titolo utilizza il nero e i pesi leggeri di questo carattere sans-serif. Il tracciamento negativo (spaziatura delle lettere) e l'interlinea stretta (altezza della riga) si combinano per creare un blocco di caratteri che richiede attenzione.

In passato, lo sviluppo di titoli come questo comportava l'hardcoding del design nel tuo HTML aggiungendo interruzioni tra le singole parole, come questa:

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

Altre volte, potresti usare avvolgere ogni parola con un elemento span inline e quindi modificare la sua proprietà di visualizzazione per bloccare:

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

Invece di questi elementi di presentazione, aggiungo interruzioni di riga esplicite nel mio HTML:

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

I browser ignorano qualcosa di più di un singolo spazio tra le parole, quindi su finestre piccole, questo titolo si legge come una frase. Ho solo bisogno di stili di fondotinta che ne definiscano colori, dimensioni e pesi, oltre al tracciamento negativo e all'inizio stretto che rendono questo titolo distintivo:

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

Mentre l'elemento pre di HTML rispetta il testo preformattato e lo presenta esattamente come scritto in un documento, la proprietà CSS white-space consente risultati simili senza sacrificare la semantica. Dei sei valori di spazio bianco disponibili, questi sono i quattro che uso più spesso:

1. white-space: normal;
   Il testo riempie le caselle di riga e le interruzioni come richiesto
2. white-space: nowrap;
   Il testo non andrà a capo e potrebbe traboccare il suo contenitore
3. white-space: pre;
   Vengono rispettate le interruzioni di riga esplicite, le interruzioni di testo con nuove righe ed elementi br
4. white-space: pre-wrap;
   Lo spazio bianco viene rispettato, ma il testo andrà a capo anche per riempire le caselle di riga

Ho solo bisogno degli effetti della proprietà white-space su finestre più grandi, quindi lo isolo con una query multimediale:

 @media (min-width: 64em) { h1 { white-space: pre; } }

L'uso di diversi stili di una famiglia di caratteri aggiunge interesse visivo. Il mio design ispirato a Lubalin incorpora pesi chiari, audaci e neri, oltre a stili condensati e regolari di questo carattere sans-serif per produrre una varietà di trattamenti del testo.

Innanzitutto, ho bisogno di due elementi strutturali per realizzare il mio progetto, principale e a parte:

 <main>…</main> <aside>…</aside>

Mentre l'elemento principale include il mio titolo e il testo in esecuzione, quello a lato contiene quattro immagini in una divisione e cinque articoli sulle versioni della Cortina classica:

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

In primo luogo, specifico gli stili dei paragrafi in ciascuno dei miei articoli usando i selettori di pseudo-classi. Ogni paragrafo utilizza una diversa combinazione di stili e pesi dei caratteri, con lettere miste e maiuscole:

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

Con quegli stili di base in atto per ogni dimensione dello schermo, introduco il layout nell'elemento a lato che sarà visibile per gli schermi di medie dimensioni. Per layout come questo, in cui gli elementi non si sovrappongono, spesso utilizzo le aree dei modelli di griglia per la loro semplicità. Questo design ha nove aree della griglia. Mentre potrei dare a queste aree nomi che descrivono il contenuto che inserirò in esse - ad esempio, "mark-1" - invece uso lettere che rendono un po' più facile spostare gli elementi nella mia griglia:

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

Devo posizionare le quattro immagini nelle aree del mio modello e non nella divisione che le contiene. Cambio la proprietà di visualizzazione di quell'elemento in content, che lo rimuove efficacemente dal DOM per scopi di stile:

 aside div { display: contents; }

Metto quelle immagini usando i nomi delle aree. Spostarli in un'altra area comporta solo il riferimento a un nome di area diverso e nessuna modifica al loro ordine nel mio HTML:

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

Quindi, inserisco gli articoli nelle cinque aree rimanenti per completare il mio layout:

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

Su schermi di piccole e medie dimensioni, gli elementi principali e laterali si impilano verticalmente nell'ordine in cui appaiono nel mio HTML. Lo spazio extra disponibile nelle finestre più grandi mi consente di posizionarli fianco a fianco in modo che il peso visivo sia bilanciato su entrambi i lati dello schermo. Innanzitutto, applico una griglia simmetrica a cinque colonne all'elemento body:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

Quindi, posiziono sia gli elementi principali che quelli laterali usando i numeri di riga. Questo crea un design asimmetrico con una colonna di spazio bianco tra il mio contenuto principale e gli articoli che lo supportano:

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

Riordino e rotazione

CSS Grid è ora lo strumento migliore da utilizzare per implementare layout ispirati e le sue potenti proprietà sono utili anche per lo sviluppo di progetti tipografici complessi.

La mia intestazione contiene un titolo seguito da due paragrafi e il loro ordine in HTML significa che hanno senso se letti senza alcuno stile applicato:

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

Per iniziare questo progetto, aggiungo stili di base per entrambi gli elementi, impostandone l'allineamento, i colori e le dimensioni:

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

Ho ordinato il mio HTML per una struttura semantica della frase, piuttosto che per qualsiasi presentazione visiva, quindi per permettermi di riordinare visivamente gli elementi, aggiungo le proprietà Flexbox alla mia intestazione e un valore di direzione flessibile della colonna:

 header { display: flex; flex-direction: column; }

Per impostazione predefinita, gli elementi vengono visualizzati nell'ordine in cui si trovano in HTML, ma nel mio design, l'ultimo paragrafo di questa intestazione appare per primo, sopra il titolo.

Il valore dell'ordine predefinito per tutti gli elementi è 0, quindi per modificare la posizione di questo paragrafo senza alterare il mio HTML, aggiungo un valore negativo di -1, che lo pone in alto:

 header p:last-of-type { order: -1; }

Il mio design per schermi di medie dimensioni include due grandi bande di colori di sfondo, sviluppate utilizzando un gradiente CSS. Quindi, successivamente, cambio i colori in primo piano del titolo e dei paragrafi per contrastarli con questo nuovo sfondo:

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

L'insolito allineamento dei tre elementi in questa intestazione è possibile combinando CSS Grid con Flexbox. Anche se all'inizio potrebbe non essere ovvio, inserisco il titolo e i paragrafi di questa intestazione su una griglia simmetrica a quattro colonne. Lasciare vuota una colonna nella prima e nell'ultima riga crea una diagonale dinamica che aggiunge interesse a questa intestazione:

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

Il mio titolo si estende su tutte e quattro le colonne:

 header h1 { grid-column: 1 / -1; }

Mentre il primo, che appare in fondo alla mia intestazione, lascia vuota la prima colonna:

 header p:first-of-type { grid-column: 2 / -1; }

L'ultimo paragrafo, ora posizionato nella parte superiore dell'intestazione, si estende sulle prime tre colonne, lasciando uno spazio a sinistra:

 header p:last-of-type { grid-column: 1 / 4; }

È insolito vedere elementi di testo ruotati sul Web, ma quando lo fai, sono spesso memorabili e sempre una bella sorpresa. Voglio che il mio titolo ruoti in senso antiorario, quindi aggiungo una trasformazione che lo ruota negativamente di 30 gradi e lo sposta verticalmente verso il basso di 150px:

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin specifica il punto intorno al quale avvengono le trasformazioni. Puoi scegliere un'origine al centro o in uno qualsiasi dei quattro angoli di un elemento: top-left (0 0) , top-right (100% 0) , bottom-right (100% 100%) o bottom-left (0 100%) . Puoi anche specificare un'origine in pixel, em o unità rem.

Per un ulteriore elemento di sorpresa, aggiungo una sottile transizione a quella trasformazione e riduco la quantità di rotazione quando qualcuno passa il cursore sul mio titolo:

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

Combinazione di elementi di intestazione

Nel mio prossimo design ispirato a Lubalin, combino un elenco ordinato di modelli Cortina con un titolo multicolore per fare una dichiarazione potente con questa intestazione:

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

Questo titolo include tre righe di testo. Mentre in precedenza ho evitato di utilizzare elementi aggiuntivi, per modellare queste linee in modo diverso ho bisogno di tre elementi di estensione in linea:

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

La scelta più semantica per segnare la mia lista di modelli Cortina e gli anni in cui sono stati prodotti, è una lista ordinata. Per enfatizzare fortemente ogni nome di modello, li racchiudo all'interno di elementi forti, che forniscono un valore semantico e un aspetto audace dagli stili di browser predefiniti:

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

Per piccole finestre, ho bisogno solo di alcuni stili di base. Le grandi dimensioni del carattere e l'interlinea minima creano un solido blocco di testo. Quindi, cambio il valore di visualizzazione dell'elemento span da inline a block e utilizzo i selettori di pseudo-classe per cambiare i colori in primo piano della prima e della terza riga:

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

Voglio che gli elementi nel mio elenco ordinato formino una griglia simmetrica a due colonne in cui ogni colonna occupa una quantità uguale di spazio disponibile:

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

Quindi, stringo l'inizio degli elementi e aggiungo un bordo blu solido in fondo a tutto tranne l'ultimo elemento dell'elenco:

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

Convenientemente, non è necessario specificare i numeri di colonna o riga per ogni elemento dell'elenco perché CSS Grid li dispone automaticamente a causa del flusso normale. Per aggiungere maggiore enfasi, cambio i valori di visualizzazione degli elementi forti per bloccarli e impostarli in maiuscolo:

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

Centrare un elemento sia orizzontalmente che verticalmente era complicato, ma per fortuna Flexbox ha reso questo allineamento banale da implementare. Flexbox ha due assi, l'asse principale e l'asse trasversale, che cambiano direzione se si modifica il valore predefinito della direzione di flessione da una riga.

La direzione flessibile della mia intestazione rimane riga, quindi allineo gli elementi al centro sull'asse trasversale (verticale), quindi giustifico il centro del contenuto lungo l'asse principale (orizzontale:)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

Con il contenuto ora inserito nell'intestazione, applico una griglia che contiene tre colonne e due righe. Le loro dimensioni saranno definite dal loro contenuto e si ridimensioneranno automaticamente:

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

Le tre linee multicolori nel titolo sono la base per questo design dell'intestazione. Voglio inserirli in colonne e righe specifiche in questa griglia, quindi aggiungo display: contents; al titolo:

 h1 { display: contents; }

Quindi, inserisco quel testo multicolore in colonne e righe usando i numeri di riga:

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

Voglio che il testo nell'intestazione appaia verticale, quindi ruoto ogni intervallo in senso orario di 180 gradi, quindi cambio la modalità di scrittura in verticale da sinistra a destra:

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

Il titolo e l'elenco ordinato nel mio progetto formano un blocco solido. Per imballare insieme questi elementi, cambio la proprietà di visualizzazione dell'elenco da griglia a blocco. Quindi, allineo il contenuto di ciascuna voce dell'elenco a destra, in modo che si trovino sulla linea di base del mio titolo:

 ol { display: block; } li { text-align: right; }

SVG e testo

Mi ci è voluto molto tempo per apprezzare SVG e per familiarizzare con come ottenere il miglior valore da esso, e sto ancora imparando. SVG è in grado di produrre molto più delle forme di base e una delle sue caratteristiche più interessanti è l'elemento di testo.

Come il testo HTML, il testo SVG è accessibile e selezionabile. È anche infinitamente modificabile utilizzando tracciati di ritaglio, riempimenti inclusi gradienti, filtri, maschere e tratti. Aggiungere testo a SVG è come includerlo in HTML, usando l'elemento di testo. Solo il contenuto all'interno di questi elementi di testo viene visualizzato dai browser e ignorano qualsiasi cosa al di fuori di essi. Puoi aggiungere tutti gli elementi di testo di cui hai bisogno, ma il mio prossimo titolo ne richiede solo uno:

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG include un insieme di proprietà e valori di attributo che possono essere applicati al testo. Molte proprietà SVG, come la spaziatura di lettere e parole e la decorazione del testo, sono anche in CSS. Ma sono le caratteristiche di stile uniche di SVG che aiutano a rendere il testo SVG così attraente.

Ad esempio, textLength imposta la larghezza del testo renderizzato, che si ridurrà e si allungherà per riempire lo spazio a seconda del valore lengthAdjust scelto.

• textLength
  Il testo verrà ridimensionato per adattarsi. Imposta textLength in percentuale o usa qualsiasi valore numerico. Preferisco usare unità basate su testo, em o rem.
• lengthAdjust
  Definisce come il testo verrà compresso o allungato per adattarsi alla larghezza definita nell'attributo textLength.

Se utilizzate direttamente su un elemento di testo, le proprietà SVG agiscono come gli stili inline:

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

Ma proprio come con gli stili inline, il miglior valore si ottiene applicando lo stile agli elementi SVG utilizzando CSS, sia in un foglio di stile esterno che incorporati in HTML. Puoi persino utilizzare un elemento di stile in un file SVG esterno o un blocco di SVG incluso insieme a HTML:

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML ha il suo elemento span e SVG include un elemento simile che è utile per separare il testo in elementi più piccoli in modo che possano essere stilizzati in modo univoco. Per questo titolo, divido il contenuto dell'elemento di testo tra sei elementi tspan :

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

Dividendo il mio titolo in più elementi, sono in grado di dare uno stile a ogni singola parola. Posso persino posizionarli con precisione all'interno del mio SVG, in base alla linea di base o addirittura l'uno rispetto all'altro.

• x è il punto di partenza orizzontale per la linea di base del testo;
• y è il punto di partenza verticale per la linea di base del testo;
• dx sposta il testo orizzontalmente da un elemento precedente;
• dy sposta il testo verticalmente da un elemento precedente.

Per il mio titolo, posiziono il primo elemento tspan 80px dall'alto, quindi ogni elemento successivo appare 80px sotto di esso:

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

Gli elementi tspan sono utili per un posizionamento preciso e uno stile individuale, ma non sono privi di problemi di accessibilità. La tecnologia assistiva pronuncia gli elementi tspan come singole parole e persino li scrive quando un tspan avvolge una singola lettera. Ad esempio, uno screen reader pronuncerà questa serie di elementi tspan :

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

Come:

“C”, “o”, “r”, “t”, “i”, “n”, “a”

Non dovremmo disturbare le persone che utilizzano tecnologie assistive o peggio rendere i nostri contenuti inaccessibili a causa delle nostre scelte di stile. Quindi evita di usare tspan non necessario e mai per singole lettere.

Accarezzare il testo con CSS e SVG

L'aggiunta di un tratto spesso aiuta la leggibilità quando il testo è posizionato davanti a un'immagine di sfondo e può anche produrre risultati discreti e sorprendenti. Non troverai un modo ufficiale per accarezzare il testo in nessuna specifica CSS. Ma esiste una proprietà sperimentale che utilizza un prefisso del fornitore Webkit ed è ampiamente supportata dai browser contemporanei.

text-stroke è un'abbreviazione per due proprietà: text-stroke-color e text-stroke-width . Per il mio titolo accarezzato, ho prima impostato gli stili tipografici delle fondamenta per family , size e weight , quindi ho regolato l'inizio e il monitoraggio:

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

Quindi applico text-stroke e aggiungo la text-fill-color property con un valore di transparent che sovrascrive il colore di primo piano bianco:

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

Sebbene text-stroke sia una proprietà sperimentale e non in una specifica W3C, ora che i browser l'hanno implementato, ci sono poche possibilità che venga rimosso. Ma se sei ancora preoccupato per il supporto di un browser legacy, prendi in considerazione l'utilizzo di una query di funzionalità per testare il supporto per i tratti di text-stroke e fornire un fallback appropriato per loro.

SVG ha anche proprietà del stroke , oltre ad alcune opzioni che non sono disponibili nei CSS. Se hai bisogno di più opzioni e del più ampio supporto del browser, SVG è la risposta. La mia intestazione SVG include sei elementi tspan :

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

Oltre agli stili tipografici di base, aggiungo le proprietà SVG equivalenti per text-stroke-color e text-stroke-width . Riduco anche l'opacità del mio tratto, che è un'opzione non disponibile nei CSS:

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG include altre proprietà che perfezionano gli aspetti di un tratto. A differenza dei CSS, i tratti SVG possono essere tratteggiati utilizzando la proprietà stroke-dasharray. I valori alternativi definiscono le aree riempite e le aree vuote, quindi i trattini attorno al testo del titolo sono riempiti di un'unità, quindi vuoti di dieci unità:

 text { stroke-dasharray: 1, 10; }

Se hai bisogno di schemi più complessi, aggiungi numeri extra al modello, quindi un valore tratto-dasharray di 1, 10, 1 risulta in un tratto tratteggiato che è 1 (riempito), 10 (vuoto,) 1 (riempito,) 1 ( vuoto,) 10 (riempito,) 1 (vuoto,) e si ripete.

Ottimizza l'accessibilità SVG

I controlli tipografici CSS sono ora più potenti che mai, ma ci sono occasioni in cui un progetto richiede qualcosa di più del testo HTML con stile. Le tecniche di sostituzione delle immagini sono passate di moda, ma SVG, sia in un file esterno che inline all'interno di HTML, può fornire effetti di testo scalabili. SVG può anche essere utile per le prestazioni complessive se ottimizzato bene e può essere reso accessibile.

Questa intestazione contiene due caratteri tipografici. Uno è Magehand, una sceneggiatura decorativa in stile retrò del designer di caratteri indonesiano Arif Setyo Wahyudi. L'altro è Mokoko, una lastra serif di Dalton Maag, con sede a Londra, disponibile in sette pesi da sottile a nero.

L'incorporamento di questi due caratteri in entrambi i formati Web Open Font Format (WOFF) e WOFF2 aggiungerebbe oltre 150 kb alla mia pagina. Considerando che, convertendo questi caratteri in contorni in un editor grafico e fornendo l'intestazione come immagine SVG ottimizzata, si aggiungerebbero solo 17 kb.

L'immagine SVG nella mia intestazione contiene tre percorsi:

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

L'ordine di questi percorsi è importante, perché proprio come in HTML, gli elementi sono impilati nell'ordine in cui sono scritti. SVG include un insieme di proprietà e valori di attributo che possono essere applicati a qualsiasi elemento. Uso la proprietà di riempimento per colorare ogni percorso nella mia intestazione:

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

Per un effetto ancora più elegante, posso definire un gradiente lineare con due interruzioni di colore e fare riferimento a quello per riempire la mia scrittura decorativa:

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

I file SVG sono spesso più piccoli delle immagini bitmap o delle dimensioni combinate di più file di font, ma richiedono comunque un'attenta ottimizzazione per ottenere le migliori prestazioni.

Ogni elemento, maniglia e nodo aumenta le dimensioni di un file SVG, quindi sostituisci i percorsi con forme di base come cerchi, ellissi o rettangoli ove possibile. Semplifica le curve per ridurre il numero di nodi e utilizzare meno maniglie. I popolari software grafici come Adobe Illustrator, Affinity Designer e Sketch esportano file gonfiati da elementi non ottimizzati e metadati non necessari. Tuttavia, strumenti come SVGOMG dello sviluppatore Jake Archibald elimineranno gli elementi non necessari e spesso possono ridurre sostanzialmente le dimensioni dei file SVG.

Le immagini SVG che contengono contorni di testo possono anche essere rese accessibili utilizzando testo alternativo e proprietà ARIA. Quando ti colleghi a un file SVG esterno, aggiungi del testo alternativo come dovresti con qualsiasi immagine non decorativa:

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

Il modo migliore per aiutare le persone che usano la tecnologia assistiva è incorporare SVG in HTML. Aggiungi un ruolo ARIA e un'etichetta descrittiva e le utilità per la lettura dello schermo tratteranno l'SVG come un singolo elemento e leggeranno la descrizione dell'etichetta ad alta voce:

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

L'aggiunta di un elemento del titolo aiuta la tecnologia assistiva a comprendere la differenza tra diversi blocchi di SVG, ma questo titolo non verrà visualizzato in un browser:

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

Quando ci sono diversi blocchi di SVG in un documento, assegna a ciascuno un ID univoco e aggiungilo al titolo:

 <svg> <title>…</title> </svg>

ARIA ha diversi attributi che aiutano l'accessibilità di SVG. Quando SVG è puramente decorativo e non ha valore semantico, nascondilo dalla tecnologia assistiva aggiungendo un attributo aria-hidden :

 <svg aria-hidden="true"> … </svg>

Per il mio design, utilizzo SVG al posto di un'intestazione HTML. Per sostituire la semantica mancante per la tecnologia assistiva, utilizzare un attributo di ruolo ARIA e un valore di intestazione. Quindi aggiungi un attributo di livello che corrisponda all'HTML mancante:

 <svg role="heading" aria-level="1"> … </svg>

Tipo di ritaglio

La proprietà CSS background-clip definisce se lo sfondo di un elemento si estende al di sotto del suo border-box , padding-box o content-box , in base al modello CSS box:

• border-box
  Lo sfondo si estende fino al bordo esterno del bordo (e sotto il bordo).
• padding-box
  Lo sfondo si estende solo al bordo esterno del riempimento.
• content-box
  Lo sfondo viene visualizzato (ritagliato su) solo nella casella del contenuto.

Ma c'è un altro valore che offre molte più opportunità per ispirare la tipografia. L'utilizzo del testo come valore per il clip di sfondo ritaglia lo sfondo di un elemento nello spazio occupato dal testo in esso contenuto.

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

Poiché questa immagine SVG rappresenta un'intestazione, aggiungo un testo alternativo più un ruolo e un livello ARIA per assicurarmi che rimanga accessibile:

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

In SVG, l'elemento defs memorizza oggetti grafici a cui è possibile fare riferimento da altrove in un file. Questi includono i modelli che contengono le mie immagini e ne aggiungo uno per ogni lettera:

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

Il contenuto nell'elemento defs non viene visualizzato direttamente e per visualizzarlo gli faccio riferimento con un attributo use o un URL. Il mio SVG contiene un percorso per ciascuna delle sette lettere nella parola "Cortina" e riempio ogni percorso con uno schema usando il suo ID univoco:

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

Gli elementi immagine consentono il rendering di immagini bitmap o vettoriali all'interno di un SVG. Il mio design incorpora tre immagini del progetto di parti di automobili che collego utilizzando un attributo href standard:

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

Queste tre immagini di modelli di parti di automobili riempiono ogni lettera e il risultato è un sorprendente design del titolo che richiede attenzione.

Tecniche di combinazione

Non c'è dubbio che Herb Lubin avesse una capacità magistrale di fare discorsi di tipo. Per questo ultimo esempio ispirato a Lubin, ho messo insieme le tecniche che ho dimostrato per creare un design avvincente per questa Ford classica degli anni '70.

Per sviluppare questo progetto, ho bisogno di due elementi strutturali che dovrebbero essermi ormai molto familiari, uno principale e uno a parte:

 <main>…</main> <aside>…</aside>

Il mio elemento principale contiene un elemento di intestazione con un titolo SVG seguito da una divisione che include il mio testo in esecuzione. Aggiungo un ruolo e un livello ARIA al mio titolo per assicurarmi che il suo testo SVG sia accessibile:

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

Per pubblicare un'immagine completa su schermi piccoli e metà su viewport più grandi, utilizzo un elemento immagine e una query multimediale di larghezza minima:

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

I progetti di Lubalin sono spesso energici, quindi per riempire di energia il mio elemento principale, applico le proprietà della griglia e utilizzo tre colonne e cinque righe per sviluppare un layout asimmetrico.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

Questo design è dominato da un profilo della carismatica Cortina e da un'immagine di sfondo basata su testo che copre l'elemento principale. Ridimensiono questo SVG per riempire lo sfondo dell'elemento e cambio l'origine dello sfondo in modo che appaia solo dietro il contenuto e non il bordo o il riempimento:

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

Lasciare vuote le colonne intorno all'intestazione e alla divisione del testo crea uno spazio negativo che aiuta a guidare l'occhio di qualcuno intorno alla composizione. L'intestazione occupa le prime due delle mie tre colonne mentre la divisione riempie le ultime due:

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

Uno dei vantaggi dell'utilizzo dell'elemento di testo SVG è la possibilità di posizionare il testo in base alla sua linea di base o rispetto a ciascun elemento. Il mio titolo SVG include due elementi di testo per il nome di questa vettura e un terzo per il periodo in cui è stata prodotta. Voglio posizionare questo elemento di testo finale esattamente 250px da sinistra e 60px dalla parte superiore del mio SVG:

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

Questo design abbagliante diventa più memorabile su finestre più grandi quando l'immagine di sfondo SVG basata su testo e il mio contorno di Cortina si adattano l'uno all'altro. Applico una griglia simmetrica a due colonne all'elemento body:

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

Quindi, posiziono gli elementi principali e laterali sulla mia griglia usando i nomi delle linee:

 main { grid-column: main; } aside { grid-column: aside; } }

Sul Web, la tipografia stimolante dovrebbe essere attraente e leggibile, ma la leggibilità del testo in esecuzione può essere facilmente influenzata dallo sfondo dietro di essa.

Il filtro sullo sfondo applica gli effetti del filtro CSS agli elementi dietro il testo. Questi filtri includono sfocatura, luminosità e contrasto ed effetti di colore che possono aiutare a rendere più leggibile il testo in esecuzione su immagini di sfondo, grafica o motivi.

Applicare uno o più filtri utilizzando la stessa sintassi del filtro CSS che ho dimostrato in un numero precedente:

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter fa parte della specifica Filter Effects Module Livello 2. Ha già un solido supporto nei browser contemporanei, anche se alcuni richiedono ancora il prefisso del fornitore Webkit:

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

Leggi di più dalla serie

• Decisioni di design ispirate: rivista Avaunt
• Decisioni di design ispirate: questioni urgenti
• Decisioni di design ispirate: Ernest Journal
• Decisioni progettuali ispirate: Alexey Brodovitch
• Decisioni di design ispirate: Bea Feitler
• Decisioni progettuali ispirate: Neville Brody
• Decisioni progettuali ispirate: Otto Storch
• Decisioni progettuali ispirate: Max Huber
• Decisioni progettuali ispirate: Giovanni Pintori
• Decisioni di design ispirate: Emmett McBain
• Decisioni progettuali ispirate: Bradbury Thompson

NB: I membri Smashing I membri Smashing hanno accesso a un PDF dal design accattivante della rivista Andy's Inspired Design Decisions e agli esempi di codice completo di questo articolo. Puoi acquistare il PDF e gli esempi di questo numero, nonché ogni altro numero direttamente dal sito Web di Andy.