Layout editoriale sul web: 5 lezioni dalla carta che reggono

Il layout editoriale organizza la pagina intorno a un ordine di lettura preso dai giornali e dalle riviste: una griglia a colonne fissa gli allineamenti, la gerarchia tipografica decide cosa si legge per primo, la scala delle immagini porta il tono. Su un sito di prodotto è l'alternativa alle sezioni full-width impilate una sull'altra fino alla fine della pagina.

Serve soprattutto a chi, accanto alle pagine commerciali, pubblica contenuti lunghi: documentazione, changelog, storie dei clienti, un blog. Il sintomo che spinge a cercarlo è una pagina dove ogni sezione sembra importante allo stesso modo, quindi nessuna arriva. Un layout editoriale che funziona offre tre o quattro punti di ingresso e tiene comunque il filo del discorso.

Perché la pagina da rivista batte ancora la pagina a sezioni impilate

Chi impagina su carta lavora da sempre per un lettore che non legge. Le analytics hanno poi confermato che online quel lettore è lo stesso. Su 59.573 visualizzazioni di pagina, il Nielsen Norman Group ha misurato che in una visita media si fa in tempo a leggere al massimo il 28% delle parole, e che il valore realistico è il 20%. Si arriva a metà delle informazioni solo sotto le 111 parole, e ogni 100 parole in più comprano 4,4 secondi di attenzione. Lo studio di eye-tracking del 2006 sulla scansione a F ha descritto come quel tempo si spende: due passate orizzontali e una corsa verticale lungo il margine sinistro.

La doppia pagina di una rivista è costruita esattamente per quella persona. Titolo, didascalia, citazione a lato e prima riga del testo raccontano la storia ognuno per conto proprio, perché in edicola una copertina da leggere tutta non vendeva. L'apparato formale dietro questo mestiere lo ha messo in ordine Josef Müller-Brockmann in Grid Systems in Graphic Design (1981), che presenta griglie a colonne, griglie modulari e griglie di base come metodo di lavoro, non come stile.

I cinque strumenti che reggono anche a schermo

1. La griglia come righello condiviso

Sulla maggior parte dei siti di prodotto la griglia è un contenitore con una larghezza massima: quello che sta dentro si allinea a se stesso. Nel lavoro editoriale la griglia è un righello a cui ogni elemento si riferisce: il titolo parte dalla colonna uno, la didascalia sta nella colonna cinque, l'immagine esce dal margine perché qualcuno lo ha deciso.

In CSS quel comportamento lo rende possibile subgrid: gli elementi annidati ereditano le tracce del genitore invece di inventarsene di proprie. È arrivato su tutti i motori (Firefox 71, Safari 16, Chrome ed Edge 117) e oggi si può usare su tutti i browser principali.

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [text-start] repeat(8, minmax(0, 8ch))
    [text-end] minmax(1.5rem, 1fr) [full-end];
  column-gap: 1.5rem;
}
.article > * { grid-column: text; }
.article > figure.wide { grid-column: full; }
.article > .aside { grid-column: text-end / full-end; }

Una griglia, tre posizionamenti, nessun wrapper annidato. Conviene dare un nome alle linee invece di contarle per una ragione di manutenzione: fra sei mesi il numero di colonne non dirà più niente a nessuno, mentre grid-column: text continuerà a dire cosa fa.

2. Un solo elemento dominante per schermata

Una doppia pagina ha un solo punto focale e tutto il resto lo sostiene. Le pagine di prodotto ne hanno spesso quattro in concorrenza: titolo, badge, illustrazione e bottone, tutti allo stesso volume. Si risolve con il contrasto di scala, non con il colore: si sceglie l'elemento che sta almeno al triplo del corpo del testo e si tiene tutto il resto entro due passi dalla base. Le meccaniche sotto le abbiamo scritte in gerarchia visiva senza colore e in scala tipografica per UI di prodotto.

3. La didascalia come secondo ingresso

Sulla carta le didascalie si scrivono per chi non leggerà mai l'articolo: portano un'affermazione, non la descrizione della foto. Sui siti di prodotto le immagini escono quasi sempre senza didascalia, così a chi scorre restano solo gli H2 su cui fermarsi. Otto o sedici parole, ognuna una frase che sta in piedi da sola, marcate come <figcaption> dentro una <figure> perché le tecnologie assistive colleghino testo e immagine. Cosa mettere in quelle foto lo abbiamo trattato nella shot list per la fotografia di un software.

4. Il margine come struttura

La carta ha un bordo di taglio, quindi il margine è una decisione misurata in millimetri e tenuta per tutta la pubblicazione. Sul web il margine esterno è spesso quello che al contenitore resta dopo i padding. Va definito come token, tenuto su tutti i breakpoint in rapporto fisso con la misura della riga, e poi lo si lascia rompere solo a elementi dichiarati. Un'immagine a tutta larghezza sembra una scelta solo se tutti gli altri blocchi rispettano lo stesso bordo.

5. Citazioni a lato e capilettera come segnali di ingresso

La citazione a lato prende una frase dal testo e la mette fra due paragrafi: dà a chi scorre un punto di appoggio fra due titoli. Il capolettera segna dove comincia la lettura lunga. Sono due segnali tipografici con lo stesso modo di rompersi: più di uno per schermata e smettono di significare "si parte da qui". La citazione deve ripetere testo già presente nell'articolo, mai introdurre un'affermazione nuova, perché i motori di ricerca e i crawler delle AI la leggono come corpo del testo.

Cosa invece non si porta a schermo

• La geometria fissa della pagina. Una doppia pagina è un rettangolo noto in una misura nota. Una pagina web è una colonna di altezza sconosciuta su un viewport che non controlli, quindi ogni composizione va riscritta come regola invece che come posizione.
• Le pagine affiancate. Niente piega centrale, niente asimmetria fra destra e sinistra, niente composizione che si chiude su due superfici insieme.
• Il testo su più colonne. Il multicol CSS su una pagina che scorre porta il lettore in fondo alla prima colonna e poi di nuovo in cima alla seconda. Va bene per elenchi brevi, footer e fogli di stile per la stampa.
• Distanza di lettura e risoluzione. Una didascalia in corpo 9 funziona a 35 centimetri su carta patinata. La stessa dimensione ottica a schermo è la prima cosa che un audit di accessibilità segnala, e con l'European Accessibility Act quella segnalazione ha una conseguenza legale.
• Le eccezioni fatte a mano. Un art director ricompone ogni doppia pagina. Un sito di prodotto genera centinaia di pagine da un solo template, quindi qualsiasi soluzione che richieda un posizionamento manuale decade entro due release.

Il CSS che regge il mestiere editoriale nel 2026

Quattro proprietà fanno buona parte del lavoro che prima richiedeva un designer seduto dentro il file di layout.

• text-wrap. balance sui titoli per pareggiare l'ultima riga, pretty sul corpo del testo per togliere le righe orfane. Secondo MDN e caniuse, pretty c'è su Chrome ed Edge dalla 117 e su Safari dalla 26, mentre Firefox torna al wrapping normale senza danni visibili.
• text-box-trim e text-box-edge. Togliono lo spazio delle metriche del font sopra e sotto la riga: è il motivo per cui un titolo non sembra mai centrato verticalmente accanto a un'icona. MDN documenta la coppia, caniuse dà il supporto su Chrome ed Edge dalla 133 e su Safari dalla 18.2, con Firefox ancora fuori a settembre 2026. Va usato come miglioramento sopra una base a margini, non come sostituto.
• shape-outside. Il testo che gira intorno a un'immagine non rettangolare è l'unico effetto da carta sicuro sul web da anni: su tutti i motori da gennaio 2020. La funzione shape() è entrata in Baseline a febbraio 2026, quindi il tracciato si scrive in unità CSS con calc() e custom property invece della sintassi SVG.
• initial-letter. Capilettera veri senza trucchi con il float, e l'unica proprietà di questa lista che ancora mettiamo dietro una condizione. MDN dà Safari 17 e Chrome 133, senza Firefox: servono un fallback con float o una feature query.

Come tenere accessibile il mestiere

La griglia separa l'ordine visivo dall'ordine del documento, ed è lì che i layout editoriali si rompono per chi naviga da tastiera o con uno screen reader. Il DOM va tenuto nell'ordine di lettura e gli spostamenti si fanno con grid-area, mai il contrario. Una didascalia che a schermo sta sopra il titolo deve comunque seguire l'immagine nel markup.

Il capolettera porta un rischio preciso: una prima lettera ingrandita dentro un elemento a parte spezza la prima parola in due stringhe, e certi screen reader la annunciano come lettera isolata. La knowledge base DAISY sull'editoria accessibile consiglia di lasciare il carattere dentro il testo del paragrafo e di trattarlo con ::first-letter o initial-letter: la parola resta intera per le tecnologie assistive e per chi copia il testo.

La misura della riga comanda comunque su tutto il resto. Una griglia editoriale con righe da 110 caratteri legge peggio di una colonna sola da 70, il calcolo che abbiamo fatto in lunghezza della riga e interlinea.

L'ordine in cui lavoriamo

Quando un sito di prodotto va rifatto così, la sequenza conta più dei singoli strumenti. Prima fissiamo la misura della riga, perché decide la larghezza della colonna e quindi la griglia. Poi la griglia prende linee con un nome e diventa un token, così il posizionamento smette di essere una decisione pagina per pagina. Poi la regola dell'elemento dominante entra nella libreria di componenti come vincolo, uno per schermata. Si scrivono le didascalie per tutte le immagini già presenti, ed è di solito il momento in cui metà di quelle immagini si rivelano decorative e vengono tolte. Solo dopo entrano gli strumenti da carta: citazioni a lato, immagini a tutta larghezza, capolettera sui template dei testi lunghi.

In quest'ordine il layout editoriale è un sistema di vincoli e un template lo tiene per centinaia di pagine. Nell'ordine opposto è una decorazione appoggiata su una pagina a sezioni impilate, e il primo aggiornamento di contenuti senza direzione artistica la smonta. È questa la differenza fra un sito di prodotto che si legge come una pubblicazione e uno che ne ha preso l'aspetto per un lancio.