Tre font per dire chi sono: la storia del logo w@lter
1 giugno 2026
- design
- tipografia
- accessibilità
- branding
In breve
Come un nome, una chiocciola e tre caratteri tipografici sono diventati un logo — e perché ogni dettaglio, dai font ai colori, è una scelta di leggibilità.
3 font, 0 colori, 1 nome. Un logo fatto di solo testo — ogni frammento scritto in un carattere diverso, scelto per cosa fa bene, non per come appare. Nessun colore nella palette. Il design che non esclude nessuno.
Come ci sono arrivato
C’è un momento in cui ti chiedi: come mi presento?
Non il curriculum. Il segno — qualcosa che dica “sono io” senza spiegazioni. Per mesi ho scartato tutto: iniziali intrecciate, pittogrammi, cose troppo “da designer”. Volevo il mio nome, ma detto diversamente.
L’intuizione è arrivata dal dominio.
wa.lter.it — il mio nome spezzato nei frammenti di un URL. Il .it finale è sia Italia che pronome inglese. Da lì: se la “a” vive dentro una chiocciola, w@lter non è solo un nome — è un indirizzo email, un’identità digitale.
La @ non sostituisce la lettera: la contiene.
E il dettaglio che preferisco: w@lter.it funziona davvero come email. Il logo è il mio recapito.
Font folio
Ogni carattere nel logo è stato scelto per cosa fa bene, non solo per la sua estetica.
Literata — human first
Leggere è un atto di silenziosa fiducia.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 — &@!?«»
Progettato per Google come font di lettura su schermo. Un serif caldo, pensato per la lettura immersiva — il tipo di carattere che ti fa dimenticare di stare leggendo su un display.
Nel logo uso il corsivo bold (italic 600). È il lato umano del nome: prima della macchina, prima del codice, c’è la persona.
Leggibilità: l’asse ottico variabile (
opsz) adatta le proporzioni dal corpo piccolo al titolo grande. Le grazie funzionano come binari — guidano l’occhio lungo la riga senza rallentarlo.
JetBrains Mono — il carattere che costruisce
// disambiguazione dei glifi
// legature
Un monospazio progettato per scrivere codice. Ogni glifo occupa la stessa larghezza — ritmo fisso, prevedibile. La particolarità: altezza x aumentata, le minuscole sono più alte del solito. Leggibilità a dimensioni piccole.
Nel logo la @ è in peso regular (400) — più leggera del resto. Non domina: collega.
Leggibilità: il punto di forza è la disambiguazione.
0≠O,1≠l,I≠|. In un monospazio, ogni ambiguità è un bug.
Atkinson Hyperlegible — il carattere che include
Glifi che altri font confondono — qui no
Il design migliore è quello che non chiede all'occhio di indovinare. Ogni lettera è sé stessa — distinta, chiara, inequivocabile.
Un progetto della Braille Institute of America. Obiettivo: massimizzare la distinzione tra caratteri per chi ha difficoltà di lettura.
Non è un compromesso — è un font bello e radicalmente leggibile.
Leggibilità: è il
--font-sansdi tutto il sito — body, navigazione, UI. Se esiste un modo per farsi leggere meglio, lo uso.
Il non-logo
Il logo non sembra un logo. È testo vero — selezionabile, scalabile, reso in SVG senza tracciati.
Da 16px a un cartellone. Zero perdita di qualità.
Niente <path>, niente curve convertite, niente rasterizzazione. Testo dentro un SVG. Il codice sorgente:
<svg viewBox="0 0 140 32" xmlns="http://www.w3.org/2000/svg">
<text y="24" fill="currentColor" letter-spacing="1.5">
<tspan font-family="Literata"
font-size="24" font-weight="600"
font-style="italic">w</tspan>
<tspan font-family="JetBrains Mono"
font-size="22"
font-weight="400">@</tspan>
<tspan font-family="Atkinson Hyperlegible Next"
font-size="22"
font-weight="600">lter</tspan>
</text>
</svg>Un logo che è quello che rappresenta. Codice, testo, web.
Colore come funzione
La tentazione era trovare una tinta protagonista — un blu, un viola, qualcosa di “personale”.
Ho fatto la scelta opposta: nessun colore.
La palette è interamente acromatica. Solo bianchi, grigi e neri, definiti in OKLCH — lo spazio colore percettivamente uniforme.
Palette colori
background
L: 0.9305
foreground
L: 0.145
card
L: 1
muted-foreground
L: 0.556
border
L: 0.922
Testo primario su card
Testo secondario — stessa gerarchia, tema diverso
Rapporti di contrasto WCAG
Perché zero croma
Non è minimalismo estetico — è inclusione:
- Daltonismo — l’8% degli uomini ha qualche forma di discromatopsia. Zero colore = zero fraintendimenti.
- Il colore non porta significato — forma, posizione e testo comunicano tutto.
- Coerenza cross-device — un blu calibrato sul mio monitor può sembrare viola sul tuo. Un grigio resta un grigio.
- Focus sul contenuto — il contenitore non compete con il contenuto.
L’unica eccezione: --destructive, un arancio caldo per gli errori. Mai da solo — sempre con testo e icona.
Perché OKLCH
OKLCH è lo spazio colore dove la L (luminosità) corrisponde alla percezione umana reale. A differenza di HSL, dove L=50% sembra diversissima tra un giallo e un blu.
Per l’accessibilità è fondamentale: posso calcolare il contrasto reale direttamente dalla differenza di luminosità.
Un nome che si porta dietro tutto
Ogni volta che qualcuno vede w@lter per la prima volta, succede una di due cose: o lo legge subito come “Walter”, oppure si ferma sulla chiocciola e poi sorride.
In entrambi i casi, funziona.
Il design migliore è quello che non esclude nessuno. Leggibilità prima dell’estetica. Chiarezza prima dell’effetto. Accessibilità non come vincolo, ma come principio.