L’edizione 2026
Colophon
Come è fatto questo registro: i due caratteri in cui è composto, i colori che tiene di giorno e di notte e le regole che ci diamo, ognuna con la sua ragione.
Caratteri
Due caratteri, due mestieri
Fraunces
Undercase Type (Phaedra Charles e Flavia Zimbardi), 2020. SIL Open Font License 1.1.
Gli appalti pubblici d’Europa, a registro.
Fraunces parla. Compone ogni titolo di pagina, i segni di sezione e la cifra di cui parla una pagina. È un carattere variabile con quattro assi, e ognuno qui ha un compito.
- wght Peso
- 100-900
- Chiaro per le cifre, normale per i titoli di prima pagina, semigrassetto per i titoli.
- opsz Dimensione ottica
- 9-144
- La imposta il browser in base alla dimensione: i filetti si assottigliano in un titolo e i tratti si ispessiscono in una didascalia.
- SOFT Morbidezza
- 0-100
- Arrotonda le terminazioni: 30 per il titolo della prima pagina, 50 per le cifre principali, 100 per l’enfasi del titolo.
- WONK Wonk
- 0-1
- Le h, m e n inclinate che Fraunces può disegnare nei corpi grandi. Tenuto a 0: un registro si legge dritto.
Inter
Rasmus Andersson, dal 2016. SIL Open Font License 1.1.
0123456789 Aa Gg Rr 4 6 & €
Inter lavora. Compone l’interfaccia, le etichette, le tabelle e ogni cifra che si legge in colonna, dove i numeri devono allinearsi.
- wght Peso
- 100-900
- Normale per leggere, semigrassetto per etichette e titoli, grassetto per le poche parole che devono fermare lo sguardo.
- tnum Cifre tabellari
- Ogni cifra ha la stessa larghezza, così una colonna di importi si somma a occhio.
Colore
Mediterrània, di giorno e di notte
Quattro colori del Mediterraneo: il mare profondo, l’acqua, il cielo e il sole. Tutto il resto è una coppia, un valore per il giorno e uno per la notte, dichiarato una volta sola. L’intero sito cambia con una sola proprietà, così nessuna pagina può restare dimenticata al buio.
I quattro che non cambiano mai
-
Mare profondo
brand-950 #023047
Il fondo di ogni blocco scuro, e l’inchiostro sull’oro.
-
Acqua
brand-500 #219ebc
Il segno di sezione e l’anello di focus.
-
Cielo
brand-300 #8ecae6
L’enfasi del titolo e le tonalità della mappa.
-
Sole
sun-400 #ffb703
Azione, novità e un aggiudicatario. Porta sempre un inchiostro scuro.
Le coppie
Valori citati dal foglio di stile così come viene servito.
-
Carta paper
Il fondo. Un bianco sporco caldo con una grana da cercare; di notte la grana scompare.
- Giorno
- oklch(98.2% 0.006 85)
- Notte
- #0b1720
-
Foglio surface
Una scheda o un pannello: un foglio sulla scrivania, mai una scatola bianca su un muro bianco.
- Giorno
- #ffffff
- Notte
- #102430
-
Inchiostro slate-900
I titoli e il testo che si legge.
- Giorno
- oklch(20.8% 0.042 265.755)
- Notte
- #ecf3f6
16,9:1 di giorno, 16,1:1 di notte
-
Secondo inchiostro slate-500
Note, date e didascalie. Niente di più chiaro è mai usato per il testo.
- Giorno
- oklch(55.4% 0.046 257.417)
- Notte
- #8aa4b2
4,7:1 di giorno, 6,0:1 di notte
-
Link brand-700
Le parole che si possono seguire.
- Giorno
- #136880
- Notte
- #56b4d4
6,3:1 di giorno, 6,7:1 di notte
-
Sole come inchiostro sun-700
L’oro abbastanza piccolo da essere testo: la data di un folio, una modifica importante.
- Giorno
- #a35a00
- Notte
- #f9b24a
5,2:1 di giorno, 8,7:1 di notte
-
Filetto hairline
L’unica linea tra le righe. Solo il filetto che apre il registro è più spesso.
- Giorno
- rgb(2 48 71 / 0.1)
- Notte
- rgb(236 243 246 / 0.13)
Regole
Le regole che teniamo, e perché
-
Una scheda, un pulsante, un campo, un filetto, un hover.
Un sito accumula una sesta variante di tutto, una funzione alla volta. Scrivere il vocabolario è ciò che lo ferma.
-
L’oro porta sempre un inchiostro scuro.
Il mare profondo sul sole si legge a 7,9:1. Il bianco sul sole scenderebbe a 1,7:1, e nessuno riuscirebbe a leggerlo.
-
Ogni colore ha un valore notturno.
È dichiarato una volta, in coppia, così l’edizione scura non è mai un ripensamento.
-
Niente entra in dissolvenza nella prima schermata.
Una pagina che nasconde ciò che ha già disegnato fa aspettare il lettore per niente.
-
Tutto funziona senza script.
Lo script aggiunge soltanto. Un motore di ricerca, un telefono lento e un lettore attento ricevono tutti la pagina intera.
-
Una cifra rimanda all’elenco che conta.
Un numero che non si può verificare è un’opinione.
-
Ogni avviso rimanda alla sua fonte ufficiale.
Questo è un registro di documenti altrui. L’originale è a un tocco, e non riscriviamo mai quello che dice.
-
Un pollice ha bisogno di 44 pixel.
Ogni comando sul telefono è alto almeno così, e ogni campo è composto a 16 pixel perché il telefono non ci zoomi mai sopra.
Materiali
Di cosa è fatto
- Caratteri
- Fraunces e Inter, entrambi con licenza SIL Open Font License 1.1, serviti da questo sito.
- Icone
- Phosphor Icons, licenza MIT, una sola famiglia nel peso che ogni uso richiede.
- Bandiere
- flag-icons di Panayiotis Lipiridis, licenza MIT, semplificate dove uno stemma non si leggerebbe.
- Dati
- Fonti ufficiali, TED per prima. Ognuna è citata, con la sua licenza, nelle Note legali.
- Fatto
- A Barcellona, in sei lingue. Questa pagina descrive l’edizione 2026.