TypographyBrandUX/UI

Type design · Art Direction · Design Consultant

Non mi sono specializzato, ed è una scelta. Interfacce, marchi, caratteri tipografici e non smetto di imparare.

Dodici anni passati ad allargare il perimetro invece che a restringerlo. Piattaforme SaaS, app, e-commerce tecnici, identità di marca dal nome al packaging, caratteri tipografici commissionati e pubblicati in retail. Ogni ambito nuovo rende più solidi quelli che già conoscevo: chi ha disegnato un carattere capisce un design system prima di vederlo, e chi ha costruito un marchio sa perché un percorso d’acquisto va scritto prima di essere disegnato.

Questo profilo serve quando il problema non è ancora stato definito: direzione creativa e consulenza, il mestiere di tenere insieme specialisti diversi e parlare la lingua di tutti — designer, sviluppatori, cliente. In questo momento sto aggiungendo sicurezza informatica e red teaming dei sistemi AI, perché è lì che si sta spostando il rischio dei prodotti digitali.

Un progetto è un sistema, non un artefatto.

Ho passato anni a disegnare caratteri tipografici. È un lavoro che insegna una cosa sola, ripetuta migliaia di volte: ogni elemento esiste in relazione a tutti gli altri, e la coerenza si costruisce prima, nelle regole, non dopo, nelle correzioni.

Applicato all’interfaccia significa partire dal flusso e dagli stati — cosa succede quando il campo è vuoto, quando la connessione cade, quando i dati sono troppi — e arrivare alla schermata come conseguenza. Applicato a un marchio significa consegnare regole che sopravvivono a chi le applicherà dopo di me.

Il resto è ascolto: del cliente, degli stakeholder, di chi userà davvero la cosa. Ho lavorato con team in Italia, Stati Uniti, Regno Unito e India, e la parte difficile non è mai stata il software.

Direzione e consulenza
Direzione creativa, coordinamento di designer, gestione cliente, presentazione a stakeholder, definizione di metodo e processo
Product & UX
User flow, architettura informativa, wireframing, prototipazione, interaction design, SaaS, app mobile
UI & Design System
Design system, librerie di componenti, style guide, design token, responsive, Material Design, data visualization, handoff
Brand & Typography
Brand identity, brand book, packaging, art direction, type design, sviluppo di caratteri, lettering, editoriale, illustrazione
Strumenti
Figma, Adobe CC, Glyphs, After Effects, HTML/CSS, JavaScript, Python
In corso
Sicurezza informatica, red teaming dei sistemi AI

Typography & type design

Carattere commissionato per la mostra «Andrea Mantegna, Pittore Mantovano»: maiuscole con grazie e minuscole lineari, in sei pesi.

Il problema

Un carattere per una mostra su un pittore del Quattrocento, commissionato dalla rassegna di architettura di un politecnico, deve stare in due posti contemporaneamente. Se guarda solo al Rinascimento diventa un pastiche storico e non appartiene più alla comunicazione di chi lo espone; se guarda solo al contemporaneo, il nome del pittore in copertina non ha più nessuna autorità. E deve reggere sia il titolo su parete sia la didascalia in catalogo.

Cosa ho progettato

  • Due sistemi in un solo alfabeto: maiuscole con le grazie, minuscole lineari. Non due tagli da alternare — il salto avviene dentro la parola, ed è l’unico posto in cui le due epoche si toccano davvero.
  • Grazie a cuneo, tagliate in diagonale invece che raccordate: leggono come incise, non come scritte. È da qui che viene la parte architettonica del riferimento.
  • Minuscole costruite su cerchi e aste dritte, vicine al monolineare. Servono a non far competere i due sistemi: le maiuscole portano il registro storico, le minuscole tengono il testo nel presente.
  • Sei pesi, con le grazie che non si assottigliano in proporzione all’asta: ai pesi leggeri sparirebbero, e con loro il riferimento.
  • Set latino esteso disegnato e non ereditato — Æ, ß, Ð — perché una mostra pubblica stampa nomi e prestiti da altre lingue.
  • Punteggiatura e simboli assegnati al sistema giusto: i punti e le graffe seguono la geometria delle minuscole, le valute portano le grazie delle maiuscole.
DG Mantegna
La tesi del carattere in una parola: la M ha le grazie, an no. Il cambio di sistema avviene dentro la parola, non fra un testo e l’altro.
DG Mantegna
La stessa mescolanza tiene a ogni peso: F con le grazie, y e i lineari, dal chiaro al nero.
DG Mantegna
I sei pesi sulla stessa lettera. Le grazie non si assottigliano in proporzione all’asta: restano cunei tagliati, perché ai pesi leggeri sparirebbero.
DG Mantegna
Le minuscole sono costruite su cerchi e aste dritte, quasi monolineari. È questo che permette loro di stare accanto alle maiuscole senza fare concorrenza.
DG Mantegna
Ð ed Æ, ß: il set latino esteso è disegnato con le grazie delle maiuscole, non ereditato da un altro carattere.
DG Mantegna
Le due O collegate da un tratto diagonale: la composizione si chiude in quadrato e la parola diventa un segno.
DG Mantegna
Simboli e valute tagliati sulle stesse diagonali delle lettere — si vede nella ¥, che porta le grazie della Y.
DG Mantegna
Punteggiatura geometrica: punti circolari, lineette rettangolari, graffa costruita a curve piene. Segue le minuscole, non le maiuscole.

Un lineare da display disegnato come carattere variabile: un solo asse di peso, dal capillare al nero, con contrasto contenuto. Per titoli, marchi e testate.

Il problema

Un display variabile deve reggere due estremi che di solito si disegnano come caratteri separati. Al peso minimo le aste diventano capillari e le curve tendono a sparire prima delle verticali; al peso massimo le contrografie si chiudono e le lettere collassano in macchie. In mezzo c’è un numero infinito di pesi che nessuno disegna a mano: devono uscire corretti dall’interpolazione.

Cosa ho progettato

  • Contrasto basso e tenuto costante lungo tutto l’asse: curve e aste hanno quasi lo stesso spessore a ogni peso. È la condizione perché il capillare resti una linea continua invece di spezzarsi dove la curva si assottiglia.
  • Uno scheletro unico per tutta la famiglia. Nella g a doppio occhiello lo si vede in chiaro: un cerchio, un anello arrotondato e un tratto d’unione, gli stessi in ogni peso — cambia solo di quanto si ispessiscono.
  • Contrografie ridotte a forme geometriche semplici, così che al nero restino aperte: nella A e nel 4 il vuoto è un triangolo minimo, sufficiente a distinguere la lettera quando tutto il resto si è chiuso.
  • Set esteso portato su tutto l’asse, non solo sui pesi centrali: accenti, valute, segni matematici e graffe arrivano fino al nero. Un titolo che contiene un prezzo o una formula non deve cambiare carattere a metà.
  • Ai pesi estremi i segni non alfabetici assumono forme proprie: al nero la graffa diventa una S piena tagliata alle due estremità, la tilde della Ñ si appiattisce in un tratto compatto per stare sotto l’altezza di riga.
  • Costruito come font variabile invece che come una serie di pesi statici: chi lo usa sceglie il punto esatto sull’asse, e i pesi nominali sono istanze di quello, non file separati.
DG Morbegno
Nero e capillare nella stessa composizione: reggono l’accostamento perché lo scheletro non cambia, cambia solo lo spessore.
DG Morbegno
Cifre al peso massimo e parole al minimo, allo stesso corpo: la gerarchia si costruisce sull’asse invece che sulla dimensione.
DG Morbegno
All’estremo leggero curve e aste hanno lo stesso spessore: è il contrasto basso che impedisce alle pance di sparire prima delle verticali.
DG Morbegno
All’estremo nero resta aperto il minimo indispensabile: la contrografia della A e quella del 4 sono due triangoli, e bastano a tenerle distinte.
DG Morbegno
La g a doppio occhiello lungo l’asse, con lo scheletro in fondo: cerchio, anello e tratto d’unione sono gli stessi in ogni peso.
DG Morbegno
Al nero la graffa perde il gambo sottile e diventa una forma piena, tagliata in orizzontale alle due estremità per non sfondare la colonna.
DG Morbegno
Zero barrato, per, valuta e integrale: i segni non alfabetici percorrono l’asse come le lettere, così un titolo con dentro una formula non cambia carattere a metà.
DG Morbegno
La tilde della Ñ è schiacciata in un tratto compatto: al peso massimo lo spazio sopra la maiuscola è quello che è.

Un lineare geometrico costruito su cerchi e aste dritte, con la a e la g a un occhiello solo — le forme che si imparano a scrivere da bambini. Disegnato per reggere il testo lungo senza perdere quell'aria.

Il problema

Un lineare costruito sul cerchio di solito è un carattere da titolo. In un testo lungo il cerchio è un problema: le tonde occupano più spazio delle dritte, il ritmo si allarga, e la a a un occhiello toglie alla parola uno dei suoi appigli di riconoscimento. Le stesse forme che rendono un carattere simpatico a corpo 60 lo rendono faticoso a corpo 10. Oxilia doveva fare entrambe le cose: restare leggibile per pagine intere e continuare a funzionare quando è grande e le parole sono due.

Cosa ho progettato

  • Minuscole su un solo cerchio, ripetuto: o, b, d, p e q sono la stessa forma ruotata e specchiata. È da qui che viene l'aria semplice, e il contrasto quasi nullo la mantiene tale anche quando il testo si infittisce.
  • a e g a un occhiello solo: sono le forme che si insegnano a scrivere a mano, ed è la ragione precisa per cui il carattere sembra ingenuo. È una scelta dichiarata, non un residuo della costruzione geometrica.
  • Le maiuscole invece non sono geometriche: tengono le larghezze classiche — B E F P R S strette, C G O Q tonde, M W larghe. Un alfabeto di maiuscole tutte della stessa larghezza, in un titolo, si sfilaccia. Il carattere cambia sistema fra le due casse, ed è questo che gli permette di stare in due registri.
  • Piccole rotture della geometria dove il testo lungo ne ha bisogno: la t è tagliata in obliquo in cima all'asta, la y scende con una diagonale dritta invece che con una coda. Sono appigli — in una riga di cerchi l'occhio ha bisogno di qualcosa che non sia un cerchio.
  • Ascendenti generose sopra l'altezza della x: in un paragrafo tengono separata una riga dalla successiva quanto l'interlinea.
  • Set latino esteso disegnato sullo stesso scheletro: la tilde della Ñ è un'onda piena, e la barra della Ø esce dal cerchio da entrambe le parti, così a corpo piccolo non si confonde con una O.
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia
DG Oxilia

Un alfabeto ricavato da una sola forma: la sinusoide, il modo in cui si disegna il suono. La curva è stata tagliata e deformata fino a diventare lettere, e non si ferma dove finisce la lettera.

Il problema

Una sinusoide non sa fare quasi niente di ciò che serve a un alfabeto. Non ha spessori: non può dare peso a un'asta. Non ha angoli né terminali: non può chiudere una A. Non si interrompe: non può fare il punto sulla i. E soprattutto non racchiude spazio, mentre a, b, d, g, o, p e q vivono di occhielli chiusi. Il vincolo era tenere la forma di partenza riconoscibile in ogni glifo, invece di usarla come pretesto e poi disegnare normalmente appena diventava scomoda.

Cosa ho progettato

  • Un'unica ampiezza per tutto l'alfabeto: le lettere sono ritagli diversi della stessa onda, non disegni indipendenti. È il motivo per cui una riga di testo si legge come una sola linea che ondeggia, anche se le lettere sono cinquanta.
  • Spessore costante, senza nessuna modulazione. Una sinusoide non ha punti spessi e punti sottili, e appena si aggiunge contrasto la lettera smette di somigliare a un'onda e comincia a somigliare a un carattere calligrafico.
  • I tratti non si fermano al confine della lettera: escono e si sovrappongono a quella accanto. Lo spazio fra due lettere non è un vuoto ma la continuazione della curva, e questo trasforma la spaziatura da problema tecnico in materiale del disegno.
  • Gli occhielli si chiudono per incrocio, non per raccordo: la curva si attraversa da sola. È l'unico modo per ottenere uno spazio chiuso da una linea che per natura non torna mai al punto di partenza.
  • Ascendenti e discendenti sono creste e ventri di ampiezza maggiore, non aste allungate. La riga ha quindi un profilo alto e basso irregolare, che è esattamente l'aspetto di un tracciato sonoro.
  • Un solo elemento non deriva dalla curva: il punto della i e della j, un piccolo rombo. Un'onda non sa produrre un punto, e sostituirlo con un frammento di curva lo avrebbe reso illeggibile. È l'eccezione dichiarata che rende evidente la regola.
  • Leggibilità tenuta volutamente al limite: alcune maiuscole, isolate, sono difficili da riconoscere e tornano leggibili solo dentro la parola. È un carattere da titolo e da marchio, non da testo — la scelta è quella.
DG Sinusoide
DG Sinusoide
DG Sinusoide
DG Sinusoide
DG Sinusoide
DG Sinusoide
DG Sinusoide
DG Sinusoide

Un serif da display ad alto contrasto: aste piene e raccordi capillari, un peso solo. Per titoli, marchi e insegne.

Il problema

Un carattere a peso unico non ha vie di fuga. Non c'è un taglio più chiaro su cui ripiegare quando pesa troppo, né uno più scuro quando serve forza: qualunque cosa faccia, la fa in una versione sola. Il contrasto alto complica il conto, perché con aste piene e raccordi capillari le contrografie si stringono, e la stessa lettera che su un'insegna è nitida, ridotta a un titolo su carta si chiude. E c'è un rischio di tono: un serif molto contrastato somiglia subito alla pubblicità dell'Ottocento, e allora il carattere non è contemporaneo, è una citazione.

Cosa ho progettato

  • Contrasto spinto, ma con un minimo dichiarato per le contrografie: nella e, nella a e nella o lo spazio interno è una fessura stretta che non si chiude mai. Quella fessura è il limite sotto il quale la lettera si riempirebbe alla dimensione minore a cui il carattere viene usato.
  • Grazie sottili e piatte, appena raccordate: tagliano l'asta invece di nascere da essa. È il dettaglio che tiene il carattere lontano dalla citazione ottocentesca — il riferimento storico sta nel contrasto, non negli attacchi.
  • Terminali a goccia su a, c, f, r e y: gli unici elementi tondi in un alfabeto fatto per il resto di tagli dritti. Sono la parte elegante, e sono pochi di proposito — uno per lettera, mai due.
  • Un peso solo, non una famiglia. Il carattere è pensato per un intervallo di dimensioni invece che per un intervallo di pesi: tutto quello che in un carattere da testo si risolverebbe cambiando taglio, qui va risolto dentro un disegno unico.
  • Cifre, valute e lettere accentate disegnate con la stessa cura delle lettere, non aggiunte alla fine. Un titolo o un marchio contengono spesso un anno, un nome con un accento, un simbolo: se quelli sono più deboli, si vede subito perché sono grandi quanto il resto.
  • Nei simboli le barre orizzontali mantengono lo spessore dei capillari e le curve quello delle aste. Il segno ha così lo stesso colore delle lettere accanto, invece di diventare una macchia più chiara o più scura dentro la riga.
  • Gli accenti sono bassi e larghi, appoggiati vicino alla lettera: alle dimensioni da display un accento sottile e alto si stacca dal corpo e sembra sporco.
DG Zanardini
DG Zanardini
DG Zanardini
DG Zanardini
DG Zanardini
DG Zanardini
DG Zanardini
DG Zanardini

Visual e lettering per la promozione dei caratteri disegnati negli anni, e per copertine, manifesti e titoli su commissione.

Il problema

Un carattere si vede solo quando qualcuno lo usa, e questo apre due problemi opposti. Nella promozione, una tavola di glifi non la guarda nessuno, e i segni che direbbero di più — valute, matematici, parentesi — sono proprio quelli che in un testo di prova non compaiono mai. Su commissione il problema si rovescia: la lettera deve reggere un contenuto che non è suo — un titolo, una data, una copertina — senza diventare decorazione.

Cosa ho progettato

  • Nei post di promozione un solo dispositivo, ripetuto: un cerchio sopra il glifo. Traslucido sfoca il tratto, pieno lo copre. In entrambi i casi la forma va ricostruita a mente, ed è quello che tiene l’occhio fermo su una lettera invece di farlo scorrere su un alfabeto intero.
  • Come soggetto dei post, la parte del set che di solito resta fuori: sterlina, yen, valuta generica, per, diviso, graffe. Sono i glifi da cui si capisce se un carattere è finito.
  • Nei lavori su commissione la lettera fa da struttura, non da ornamento. Nella m la testa del cane si innesta sull’ultima asta e le arcate diventano le zampe; in The OG il collo del ritratto scende dentro la O.
  • Dove serve un sistema e non un disegno singolo, un alfabeto modulare costruito su griglia: Heavy Chest è lo stesso alfabeto ricomposto su manifesto, biglietto e volantino in quattro accostamenti di colore.
  • Titoli su immagine tenuti leggibili con il contorno invece che con una fascia di fondo: la fotografia resta intera sotto il testo.
  • Sui dischi il carattere entra nei crediti come gli altri mestieri: sul retro di observer di |rg| il type design è accreditato accanto al mastering.
Typographic visuals
Un cerchio traslucido sopra il glifo: sfoca il tratto invece di ingrandirlo, e la forma va completata a mente. È un modo di far fermare l’occhio su una lettera sola.
Typographic visuals
Stesso dispositivo, cerchio pieno invece che traslucido: copre. E come soggetto la parte del set che nessuno mostra — yen, valuta generica, graffe, diviso.
Typographic visuals
Copertina per observer di |rg|: sul retro il type design compare nei crediti, accanto al mastering. Il carattere non illustra la musica, è una delle voci.
Typographic visuals
Un alfabeto modulare su griglia, ricomposto su manifesto, biglietto e volantino in quattro accostamenti di colore. Cambia il supporto, non l’alfabeto.
Typographic visuals
Titolo su fotogramma: le tre righe si incastrano una nell’altra e il contorno sottile stacca le lettere dall’immagine senza dover mettere una fascia di fondo.
Typographic visuals
Lettering monolineare su linea di base inclinata: le aste si allungano in anelli che chiudono la composizione ai quattro angoli, così il blocco sta in piedi senza cornice.
Typographic visuals
Ritratto puntinato e serif da display nella stessa tavola: il collo della figura scende dentro la O, così illustrazione e parola non sono due elementi impilati ma uno solo.
Typographic visuals
Qui la lettera è l’animale: la testa si innesta sull’ultima asta della m e le due arcate diventano le zampe. Il disegno non decora la lettera, la usa come scheletro.
Typographic visuals
Etichette da imballaggio con la simbologia vera — frecce, riciclo, non toccare — e le definizioni di up e down al posto delle istruzioni. Il pannello inferiore è capovolto: si legge solo quando la scatola è nel verso sbagliato.