Per separare una coppia di lettere troppo ravvicinate, controlla prima la spaziatura e la crenatura del carattere del titolo. Per una breve etichetta in caratteri latini, un margine inline locale può aprire un singolo confine, ma interrompe la composizione tipografica in quel punto. Questo flusso di lavoro per Mac spiega quando è opportuno accettare questo compromesso.

Il problema è la spaziatura, la crenatura o una collisione locale?

Questa guida è pensata per chi modifica un titolo web su Mac e può intervenire sul suo HTML e CSS. L’obiettivo è correggere una coppia problematica mantenendo il resto del testo nel normale flusso del browser. Il titolo di esempio sintetico NOVA STUDIO offre un caso concreto; non significa che quelle lettere si sovrappongano in tutti i caratteri.

La spaziatura controlla la distanza tra i caratteri in una selezione di testo. In CSS è gestita da letter-spacing: i valori positivi aumentano la distanza, quelli negativi la riducono. Aumentare questa proprietà sull’intero titolo modifica quindi più della sola coppia problematica. Inizia controllando se il problema è stato causato da un valore negativo ereditato. MDN: letter-spacing

La crenatura usa le informazioni sulla spaziatura memorizzate nel carattere. La proprietà CSS font-kerning accetta auto, normal oppure none; non consente di specificare una distanza personalizzata per una coppia di lettere. Impostandola su normal si richiedono le informazioni di crenatura del carattere, ma non si può aggiungere una correzione mancante per una coppia né garantire che una combinazione specifica risulti esteticamente corretta. MDN: font-kerning

Prima di aggiungere markup, usa questa guida decisionale:

Cosa osservi Prima azione Quando procedere
La maggior parte degli spazi tra le lettere sembra troppo stretta Confronta il titolo con letter-spacing: normal Procedi solo se una coppia richiede ancora un intervento
Il titolo cambia aspetto quando parte un’animazione del testo Confrontalo con il testo originale non suddiviso Esamina il metodo usato per suddividere il testo prima di applicare correzioni
Un confine appare troppo stretto in una breve parola in caratteri latini, per il resto accettabile Valuta una correzione locale della spaziatura Accetta che la composizione tipografica cambi in quel punto
È necessario mantenere intatta la composizione tipografica originale Mantieni unito il testo e confronta un altro carattere o una versione adatta Scegli una resa che funzioni senza inserire un confine

In una pagina che stai esaminando in Chrome, premi Command–Option–C, poi fai clic sul titolo. Il pannello Elements seleziona il markup e la scheda Styles mostra il CSS applicabile. Cerca le regole del titolo, la spaziatura ereditata e gli elementi che racchiudono singoli caratteri. Questi passaggi di ispezione seguono la procedura documentata da Chrome per Mac. Apri Chrome DevTools

Fai i confronti con il carattere, il peso e la dimensione previsti. La correzione scelta per il testo di esempio in Arial è solo dimostrativa; scegli la correzione effettiva osservando il titolo desiderato. Annota le dichiarazioni originali per poter confrontare una modifica alla volta.

Cosa può preservare una correzione locale?

Un semplice span offre un punto di aggancio per lo stile senza aggiungere di per sé un significato. Rappresenta i suoi elementi figli, quindi il titolo può mantenere il testo NOVA STUDIO mentre una classe identifica il prefisso che termina nel punto problematico. WHATWG: lo standard HTML, l’elemento span

Tuttavia, un elemento inline e una correzione della spaziatura hanno conseguenze diverse. La bozza di Raccomandazione del W3C per l’attuale CSS Text Level 3 afferma che la composizione tipografica deve rimanere continua attraverso i confini inline quando non ci sono cambiamenti effettivi di formattazione. Specifica inoltre che un margine, un bordo o un padding inline non nullo che separa i caratteri interrompe la composizione in quel punto. Un margine locale, quindi, non può garantire il mantenimento della crenatura originale tra le lettere interessate. CSS Text Module Level 3: composizione tipografica attraverso i confini degli elementi

Nell’esempio, racchiudi NOV in un unico elemento span inline e lascia A subito dopo. Aggiungendo un margine finale al prefisso, apri il confine tra V e A. Le altre lettere restano normale testo inline; non occorre assegnare un riquadro separato a ogni carattere. Nel testo orizzontale da sinistra a destra, margin-inline-end corrisponde al margine destro. MDN: margin-inline-end

Questa limitazione è importante quando si valuta il risultato: il cambiamento visibile comprende sia la perdita dell’eventuale correzione tipografica in quel punto, sia il margine aggiunto. Non corrisponde necessariamente alla spaziatura originale della coppia più esattamente la distanza specificata. Se è necessario preservare la composizione originale, mantieni unito il testo e confronta diverse scelte di carattere.

Prova un esempio locale completo sul tuo Mac

Crea un’anteprima separata prima di adattare la tecnica a un titolo che gestisci. In TextEdit, scegli File → New, poi Format → Make Plain Text. Incolla il documento completo qui sotto, salvalo come pair-preview.html e, se richiesto, scegli Use .html. Apple documenta questa procedura per creare file HTML. Lavorare con documenti HTML in TextEdit su Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Apri il documento salvato nel browser. Mantieni il testo del titolo sulla singola riga mostrata nell’esempio: non c’è spazio tra NOV e A, mentre c’è un normale spazio prima di STUDIO. In questo modo il testo dell’etichetta resta intatto, senza inserire caratteri di spaziatura visibili o speciali.

La proprietà personalizzata --pair-gap controlla il margine nel punto selezionato. Il valore iniziale è a scopo illustrativo. Con una dimensione del carattere di 64px, 0.02em corrisponde a 1.28 pixel CSS di margine; con 40px, corrisponde a 0.8 pixel CSS. Il margine si ridimensiona insieme al testo, ma la correzione visiva va comunque verificata. MDN documenta i margini in em come relativi alla dimensione del testo. MDN: margin-inline-end

L’elemento span esterno .keep-word applica white-space: nowrap solo a NOVA. Mantiene unita quella parola breve, lasciando che il normale spazio prima di STUDIO consenta il ritorno a capo. Evita di applicare questa regola all’intero titolo, a meno che tu non voglia intenzionalmente mantenerlo su una sola riga. MDN: white-space

Se in seguito TextEdit apre il file come contenuto formattato, usa File → Open, seleziona il file, scegli Show Options e seleziona Ignore rich text commands. In alternativa, attiva Display HTML files as HTML code instead of formatted text in TextEdit → Settings → Open and Save. La guida HTML di TextEdit di Apple

Come scegliere la correzione minima utile?

Procedi con un confronto controllato, invece di aumentare ripetutamente lo spazio finché non attira l’attenzione:

  1. Imposta --pair-gap su 0em, salva e ricarica la pagina. Prima controlla il titolo senza correzioni.
  2. Prova 0.01em, poi 0.02em, salvando e ricaricando tra un confronto e l’altro. Sono valori di prova, non standard tipografici consigliati.
  3. Valuta la coppia insieme alle lettere immediatamente vicine. Fermati quando si armonizza con il ritmo complessivo della parola.
  4. Restringi la finestra del browser finché il titolo va a capo. Controlla il titolo completo, non solo le lettere corrette.
  5. Ripeti la verifica per ogni dimensione e peso del titolo effettivamente usati nel layout.

Valuta con attenzione il confronto tra un margine nullo e uno positivo. Superando questa soglia si introduce il confine tipografico descritto prima, quindi la prima variazione può risultare più ampia di quanto suggerisca il valore numerico del margine. Se un valore positivo minimo rende la coppia già troppo larga, rimuovi la correzione e rivaluta il carattere o lo stile esistente del titolo.

La correzione occupa anche spazio nel layout. Le lettere successive si spostano insieme al testo e un titolo che si avvicina alla larghezza disponibile potrebbe andare a capo in modo diverso. La spaziatura locale evita di aggiungere distanza a tutti gli intervalli, ma non garantisce che il punto in cui il testo va a capo resti invariato. Prima di mantenere la modifica, controlla il layout sia in una finestra stretta sia in una larga.

Limita l’elemento che impedisce il ritorno a capo a una parola breve. Se la parola supera la larghezza disponibile, potrebbe fuoriuscire. Riduci la dimensione del titolo per quel layout o rivaluta l’elemento, invece di nascondere il contenuto fuoriuscito. MDN distingue il controllo del ritorno a capo tramite white-space dalle proprietà che consentono interruzioni all’interno delle parole. MDN: white-space

Cosa fare se il titolo usa già SplitType?

SplitType è uno strumento per animazioni che racchiude righe, parole e caratteri in elementi. La documentazione ufficiale consiglia di impostare font-kerning: none sugli elementi interessati, per evitare piccoli spostamenti dei caratteri quando il testo viene suddiviso o ripristinato. Questa raccomandazione riguarda il flusso di lavoro delle animazioni; adottarla può modificare la spaziatura in tutto il titolo. Documentazione di SplitType

Se un titolo esistente usa SplitType, confrontalo con il testo originale prima di aggiungere un’altra correzione. La libreria documenta un metodo di istanza, instance.revert(), che ripristina il contenuto originale. In un’implementazione che già gestisce un’istanza SplitType, usa il ciclo di vita documentato per esaminare lo stato originale. L’esempio HTML locale qui sopra non dipende da alcuna libreria. SplitType: ripristinare il testo suddiviso

Controlla anche il comportamento al ridimensionamento. SplitType specifica che le suddivisioni in parole e caratteri con posizionamento relativo possono adattarsi al nuovo spazio, mentre la suddivisione in righe o il posizionamento assoluto richiedono una nuova suddivisione quando cambia la dimensione del contenitore. Se la presunta collisione si verifica solo dopo una variazione della larghezza, esamina questo comportamento del layout prima di aggiungere una correzione permanente alla coppia. SplitType: testo adattivo

Per questo intervento su una singola coppia, la conclusione pratica è di non introdurre la suddivisione in caratteri solo per ottenere un punto di aggancio per la spaziatura. Aggiunge più confini al layout di quanti ne richieda l’esempio.

Quando lasciare unito il testo?

Usa l’esempio con il margine locale solo per un confine scelto deliberatamente tra semplici lettere latine. Non trasformarlo in una procedura automatica che racchiude ogni posizione di una stringa. Il W3C avverte che dividere gruppi di grafemi o legature con confini tra elementi può produrre una resa incoerente o indesiderata. Una posizione in una stringa non è automaticamente un punto adatto per interrompere la composizione tipografica. CSS Text Module Level 3: caratteri e lettere

Quando la composizione tipografica deve restare intatta, mantieni il titolo come testo continuo, confronta le impostazioni di crenatura native e scegli una resa del carattere che risolva la coppia in modo soddisfacente. Se è accettabile un’eccezione locale controllata, inserisci un solo confine, usa il margine minimo utile e verifica insieme la parola e le interruzioni di riga risultanti.

Fonti