Caratteri cromatici e design piatto
La crescente infatuazione del Web con il design piatto ha portato a un rapido rifiuto di artificio come le ombre esterne, a favore di un aspetto più pulito basato sulla forma. Ma questo lascia il progettista con un problema: come si scrive in stile per essere vibrante mentre si aderisce ai principi del design piatto?
Una soluzione è il rinnovato interesse per i caratteri cromatici. Nell'uso diffuso nella stampa a blocchi di legno del XIX secolo, i volti di tipo cromatico utilizzano più colori per definire aree diverse. Questo è l'approccio polare opposto al design moderno del logo, nel quale ci viene insegnato che le forme devono funzionare in un unico tono.
Il vantaggio dei disegni cromatici è che aggiungono profondità, enfasi e carattere; senza la necessità di decorazioni di testo più intrusive come le ombre.
Uno dei migliori esempi di questo è Sodachrome. Progettato da Dan Rhatigan e Ian Moore, Sodachrome è composto da due font separati; uno in cui i serif puntano a sinistra, e uno in cui puntano a destra. Impostate singolarmente i due tipi di font con uno squilibrio sbilanciato, tuttavia sovrapposti in colori diversi, producono un attraente slab-serif. L'ulteriore vantaggio di Sodachrome è che la sovrapposizione tra i due colori crea una terza faccia, un moderno sans-serif, al centro del design. L'interesse visivo in Sodachrome è creato dall'interazione tra questi tre diversi disegni.
Sodachrome di Dan Rhatigan e Ian Moore.
Lo sviluppo di caratteri cromatici per l'uso sul web è in qualche modo una sfida. Mentre disegni come Lisa Lonergan's Knoxville seguire schemi romani molto tradizionali, disegni come Mark Frömberg's Pigment - che presenta 600 caratteri - non si adattano facilmente ai formati vettoriali.
Knoxville di Lisa Lonergan.
Pigmento di Mark Frömberg.
I caratteri tipografici, anche i volti in stile grunge, sono progettati come un contorno. I contorni possono essere ridimensionati, colorati e distanziati, a discrezione del designer. OpenType (OT), TrueType (TT), Web Open Font Format (WOFF) e quasi tutti gli altri formati disponibili funzionano in questo modo. Ciò significa che una progettazione cromatica non può essere specificata in un singolo file. Tuttavia, a condizione che il carattere cromatico sia consegnato come due file di font separati, possiamo sovrapporli facilmente l'uno sull'altro.
I CSS ci permetteranno persino di duplicare il titolo negli stili usando la proprietà content , evitando di raddoppiare il contenuto del markup che avrebbe un impatto negativo su SEO e accessibilità.
Il formato di base è:
Any old title
E nel CSS:
h1{font-family:"Some Chromatic Font A";color: rgba(50, 0, 0, 0.5);position:relative;}h1:after{font-family:"Some Chromatic Font B";color: rgba(0, 50, 50, 0.5);position:absolute;left:0;content:"Any old title";}Per ora, la mancanza di caratteri cromatici che vengono prodotti per l'uso sul Web significa probabilmente che il loro utilizzo è un passo troppo lontano per siti come blog che richiedono numerose intestazioni. Ma per i loghi, o le intestazioni che cambiano raramente, dove l'uso di un'immagine è accettabile, i caratteri cromatici sono un modo vibrante e coinvolgente di tipo di impostazione che mantiene un'estetica piatta.
Hai lavorato con caratteri cromatici? Quali difficoltà tecniche hai incontrato? Fateci sapere nei commenti.