Colophon

Come è costruito questo sito e con quali regole: Hugo, Cloudflare Pages, caratteri ospitati qui, WCAG 2.2 AA e una build che fallisce se una fonte muore.

Published 7 min read

Il colophon è la nota in fondo a un libro che racconta come è stato fatto: i caratteri, la carta, la stampa. Su un sito web fa un lavoro in più, perché il modo in cui un sito è costruito è una delle poche cose che chi legge può verificare da sé.

Due persone lo fanno bene e vale la pena leggere loro invece di me: Gwern Branwen documenta in Design Of This Website il ragionamento dietro ogni scelta tipografica e tecnica di gwern.net, e Simon Willison tiene una sezione di colophon nella sua pagina di presentazione, dove spiega come viene generato e ospitato simonwillison.net.

Generazione e hosting

Hugo, extended, v0.151.0. Generazione statica. Ogni pagina è un file markdown in git prima di essere HTML, e la versione è fissata perché una build sul mio portatile corrisponda a una build in CI.

Cloudflare Pages, collegato a git. Un push costruisce e pubblica. Header di risposta e redirect sono file versionati e non impostazioni di un pannello, così una modifica a entrambi compare nella cronologia dei commit.

Nessun database, nessun rendering lato server, nessun requisito JavaScript. Ogni pagina è completamente leggibile con JavaScript disattivato. Niente si carica a opacità zero in attesa di uno script, che è un errore commesso dalla versione precedente di questo sito su quasi tutta la homepage.

La regola che la build fa rispettare

Ogni affermazione di fatto su questo sito porta con sé una fonte: editore, titolo, data e URL. Le fonti stanno nel front matter di ciascuna pagina e vengono stampate nel blocco delle fonti in fondo.

Un passaggio della build richiama di nuovo tutti quegli URL. Se uno smette di rispondere con HTTP 200, la build fallisce e non viene pubblicato niente finché non sistemo il link, non sostituisco la fonte o non cancello l’affermazione che si reggeva su quella.

Quel controllo esiste perché l’alternativa, cioè una persona che promette di rivedere le cose, è esattamente ciò che qui ha fallito. Anche la vecchia pipeline di pubblicazione aveva un validatore: pretendeva che ogni post contenesse almeno un numero e due entità nominate, cose che un modello linguistico può soddisfare inventandole entrambe, così non ha mai messo alla prova niente che il testo generato non potesse semplicemente produrre da sé. Questo controllo invece gira contro l’internet vera, a cui non interessa che cosa intendessi fare. Il resoconto di che cosa ha prodotto quel sistema è nel postmortem e ogni correzione successiva è datata nelle correzioni e nel registro delle modifiche; quelle tre pagine sono in inglese. Le regole permanenti sono nella linea editoriale.

Perché ogni data di questo sito è il 5 agosto 2026

Perché è il giorno in cui è stato scritto. Tutto il sito (ogni pagina e ogni articolo) è stato redatto, documentato e pubblicato in un’unica sessione il 5 agosto 2026, lo stesso giorno in cui ho cancellato il vecchio archivio. La stesura è stata assistita dall’intelligenza artificiale, nel modo descritto nella pagina delle dichiarazioni. Ogni affermazione di fatto è stata verificata su una fonte primaria prima di entrare, e il controllo descritto qui sopra richiama di nuovo ogni URL citato a ogni build, così l’elenco delle fonti resta verificato nel tempo e non soltanto nel momento in cui l’ho scritto.

Le date sono quelle vere. Non le ho distribuite all’indietro sui mesi precedenti per far sembrare che l’archivio si sia accumulato nel tempo: sarebbe stato facile ed è esattamente il tipo di bugia che questa ricostruzione esiste per fermare.

Che cosa farne: controlli le fonti. Una data uguale su tutto le dice che il sito è stato fatto in fretta. Non le dice niente su quanto sia vera una singola affermazione, e il blocco delle fonti in fondo a ogni pagina sta lì proprio perché non debba credermi sulla parola né sull’una né sull’altra cosa.

Caratteri

I titoli sono composti in Source Serif 4 e il testo in Inter, entrambi rilasciati sotto SIL Open Font License ed entrambi ospitati come file woff2 su questo dominio: Source Serif, Inter.

Ospitarli qui non è un vezzo prestazionale. Significa che leggere una pagina di questo sito non comporta una richiesta a un soggetto terzo, e significa che il carattere dichiarato nel CSS è il carattere che viene davvero consegnato. Il vecchio sito dichiarava caratteri che non ha mai servito, così la maggior parte dei visitatori lo leggeva in un ripiego che nessuno aveva progettato.

Le dimensioni sono espresse in rem ovunque, senza nessuna dimensione fissata in pixel, così il sito rispetta l’impostazione del testo scelta nel browser di chi legge. Niente viene reso al di sotto dell’equivalente di 13 pixel, a nessuna larghezza di schermo.

Il colore, e perché il sito è chiaro

Carta bianco caldo, inchiostro quasi nero, blu notte per i link, terra di Siena bruciata riservata alle correzioni e ai limiti dichiarati. Il testo corrente sta a 15,8:1 rispetto allo sfondo, e il colore di testo con meno contrasto usato in tutto il sito, riservato ai metadati, sta a 5,9:1. Entrambi calcolati con la formula di contrasto WCAG.

L’impostazione chiara e ad alto contrasto è un capovolgimento voluto. Il sito precedente era scuro e con la spaziatura stretta, e scuro-e-stretto è lo stile di casa proprio della categoria per cui preferirei non essere scambiato.

C’è anche un argomento di ricerca. Reber e Schwarz hanno rilevato che affermazioni presentate con un contrasto più alto venivano giudicate più probabilmente vere rispetto alle stesse affermazioni presentate con un contrasto più basso (Effects of Perceptual Fluency on Judgments of Truth, Consciousness and Cognition, 1999). Il corollario scomodo lo conosco: la leggibilità può rendere più credibile anche un’affermazione falsa. È un argomento a favore di abbinarla al controllo delle fonti descritto sopra, non un argomento contro la leggibilità.

Accessibilità

L’obiettivo è il livello AA delle WCAG 2.2, usando il riferimento rapido del W3C come lista di controllo operativa. In concreto significa: un link «vai al contenuto» come primo elemento attivabile da tastiera in ogni pagina, un solo h1 per pagina senza salti nei livelli dei titoli, contorni di focus visibili e mai rimossi, landmark in ogni template, testo alternativo e dimensioni esplicite su ogni immagine, e prefers-reduced-motion rispettato su tutto il sito e non su una pagina sola.

Il movimento è limitato al passaggio del mouse sui link, agli anelli di focus e all’apertura degli elementi a scomparsa. Non ci sono animazioni attivate dallo scorrimento e non c’è nessuna keyframe.

È un obiettivo dichiarato, non una certificazione. Se qui dentro incontra qualcosa che non funziona con uno screen reader o al 400% di ingrandimento, me lo scriva: finisce fra le correzioni, con la data.

CSS e peso delle pagine

Un unico foglio di stile scritto a mano. Nessun framework, nessuna libreria di classi di utilità, nessun CSS-in-JS, nessuna iniezione di stili a runtime. I token di progetto sono un breve elenco di proprietà personalizzate e la scala tipografica ha sei dimensioni. Non le do una cifra in kilobyte che non ho misurato sulla build pubblicata, ma il vincolo è un file solo: se un giorno ne servisse un secondo, vorrebbe dire che è andato storto il progetto, non che è saltato il budget.

Privacy

Nessun cookie, nessun carattere e nessun contenuto multimediale incorporato da altri domini. L’unica richiesta verso terzi che questa build effettua è il beacon di Cloudflare Web Analytics, che non imposta cookie e non costruisce un profilo di chi legge: quello che vedo io è aggregato. Il dettaglio completo è nella pagina privacy.

Su che cosa si appoggia

Il brief di progetto si appoggia alle Stanford Guidelines for Web Credibility: dimostra che dietro il sito c’è una persona reale, rendi le affermazioni facili da verificare, rendi facile il contatto, tieni tutto aggiornato e considera costosi anche gli errori piccoli. Quasi tutta la struttura di questo sito è una di quelle linee guida trasformata in una pagina.

Le correzioni a questo colophon sono benvenute, comprese quelle sul colophon che sbaglia a descrivere sé stesso.

Sources

Every source below was opened and checked on the date shown. Links open in this tab.

  1. Hugo v0.151.0 release GitHub, gohugoio/hugo github.com Accessed 5 agosto 2026
  2. Cloudflare Pages documentation Cloudflare developers.cloudflare.com Accessed 5 agosto 2026
  3. Web Content Accessibility Guidelines (WCAG) 2.2 W3C www.w3.org Accessed 5 agosto 2026
  4. How to Meet WCAG (Quick Reference) W3C Web Accessibility Initiative www.w3.org Accessed 5 agosto 2026
  5. Effects of Perceptual Fluency on Judgments of Truth Reber e Schwarz, Consciousness and Cognition, 1999 (doi:10.1006/ccog.1999.0386) doi.org Accessed 5 agosto 2026
  6. Design Of This Website Gwern Branwen, gwern.net gwern.net Accessed 5 agosto 2026
  7. About Simon Willison simonwillison.net simonwillison.net Accessed 5 agosto 2026
  8. Source Serif GitHub, adobe-fonts/source-serif github.com Accessed 5 agosto 2026
  9. Inter GitHub, rsms/inter github.com Accessed 5 agosto 2026
  10. SIL Open Font License SIL Open Font License openfontlicense.org Accessed 5 agosto 2026
  11. Cloudflare Web Analytics: About Cloudflare Docs developers.cloudflare.com Accessed 5 agosto 2026
  12. Stanford Guidelines for Web Credibility Stanford Web Credibility Research, Stanford University credibility.stanford.edu Accessed 5 agosto 2026