{"id":13894,"date":"2026-09-14T08:00:00","date_gmt":"2026-09-14T06:00:00","guid":{"rendered":"https:\/\/eugigufo.net\/it\/?page_id=13894"},"modified":"2026-06-19T16:16:05","modified_gmt":"2026-06-19T14:16:05","slug":"paragrafo43","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo43\/","title":{"rendered":"\u00a7 43. Come deve essere la tipografia da schermo"},"content":{"rendered":"

Tutti i testi destinati alla pubblicazione prima devono essere preparati anche dal punto di vista tipografico. Nella vita reale quotidiana la regola appena riportata è nota, nel migliore dei casi, solo alle persone che lavorano con i testi tradizionalmente fatti per essere stampati su carta: libri, riviste e giornali (anche se negli ultimi anni ho visto dei libri cartacei capaci di far venire un infarto a un vero tipografo esperto). Per qualche strano motivo, sempre nella vita reale quotidiana, pochissime persone si ricordano della preparazione tipografica dei testi da pubblicare sul web: anche se ormai è un supporto di lettura non meno importante della carta.
\nProprio per aiutare quelle persone poco numerose, ma serie, responsabili e istruite tempo fa avevo creato l’apposito strumento “Tipografo per il web<\/a>”: un servizio online che permette di preparare con un solo clic qualsiasi testo destinato alla pubblicazione sul web. La semplicità funzionale, la velocità di elaborazione e la quantità delle impostazioni opzionali dovrebbero aiutare le persone serie a non arrendersi sulla loro giusta via verso i testi leggibili e – come spero – convincere qualche persona un po’ pigra che la bellezza dei testi pubblicati in realtà non richiede chissà quanti sforzi.
\nIn un testo preparato correttamente per la pubblicazione sul web dal punto di vista tipografico non è sufficiente prevedere i titoli e i sottotitoli (H1, H2, H3 etc.), la divisione in capoversi, l’interlinea, la dimensione dei caratteri e il font comodi, il colore del testo non fastidioso per gli occhi… Tutti quelli elencati sono dei dettagli importanti, ma nel loro complesso costituiscono solo una piccola parte di quelli necessari; la maggior parte di essi viene addirittura definita una volta per tutte già nel design del sito (nel foglio CSS). In realtà esistono tantissimi altri aspetti non meno (e spesso più) importanti che vanno gestiti correttamente.
\nIn questo paragrafo provo a elencare non tutte le regole della tipografia, ma solo quelle che vengono violate sul web con maggiore frequenza.<\/p>\n

1. I caratteri speciali<\/h4>\n

Spesso conviene visualizzarli tramite i loro codici HTML (mnemonici o numerici, non importa quali) perché possono capitare ancora dei browser incapaci di visualizzarli correttamente quando inseriti dalla tastiera. Ecco solo alcuni esempi di quei caratteri speciali:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
&sect;<\/td>\n§<\/td>\nil simbolo del paragrafo<\/td>\n<\/tr>\n
&copy;<\/td>\n©<\/td>\nil simbolo del copyright<\/td>\n<\/tr>\n
&reg;<\/td>\n®<\/td>\nil simbolo del marchio registrato<\/td>\n<\/tr>\n
&tarde;<\/td>\n™<\/td>\nil simbolo del trade mark<\/td>\n<\/tr>\n
&deg;<\/td>\n°<\/td>\nil simbolo dei gradi<\/td>\n<\/tr>\n
&egrave;<\/td>\nè<\/td>\nuna lettera e accentata<\/td>\n<\/tr>\n
&ldquo;<\/td>\n“<\/td>\nuna virgoletta aperta<\/td>\n<\/tr>\n
&rdquo;<\/td>\n”<\/td>\nuna virgoletta chiusa<\/td>\n<\/tr>\n
&ndash;<\/td>\n–<\/td>\nuna lineetta media<\/td>\n<\/tr>\n
&mdash;<\/td>\n—<\/td>\nuna lineetta lunga<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\nLa lista completa dei caratteri speciali ha più di trecento voci, gli interessati possono consultarla nelle fonti ufficiali<\/a>.<\/p>\n

2. Le virgolette<\/h4>\n

Nei testi scritti in italiano o in inglese vanno utilizzate queste:
\n“ … ”
\nNei testi scritti in inglese spesso si usano pure queste:
\n‘ … ’
\nNei testi scritti in francese o in russo vanno utilizzate queste:
\n« … »
\nNei testi scritti in tedesco vanno utilizzate queste:
\n„ … “
\nIn nessun caso vanno usate le virgolette da codici informatici (a meno che non si tratti della citazione di un pezzo di codice) o i simboli dei pollici:
\n" … "
\nDecenni fa, sulle macchine da scrivere era prevista solo una virgoletta “universale” perché si voleva risparmiare lo spazio nel meccanismo e sulla tastiera fisica. Successivamente, quella semplificazione scorretta dal punto di vista tipografico era stata ereditata dalle tastiere dei computer. Di conseguenza, a causa dell’analfabetismo dei tipografi e dei designer giovani (che non sono più controllati da redattori tecnici e si limitano al copia-incolla del testo ricevuto), la maggior parte dei testi si è trasformata in una tortura per gli occhi dei lettori esigenti.
\nIn realtà, le virgolette sono dei segni di punteggiatura accoppiati e devono essere sempre distinguibili in quello destro e in quello sinistro. Nei linguaggi di programmazione e di markup le virgolette “da informatica” sono ammissibili perché sono più veloci da digitare e devono essere lette e interpretate solo dalle macchine. Gli umani, invece, meritano le virgolette leggibili e corrette per la loro lingua.<\/p>\n

3. L’apostrofo<\/h4>\n

Nei testi scritti per gli umani bisogna utilizzare l’apostrofo da testo e non da informatica:
\n’ invece di '<\/p>\n

4. Le lineette<\/h4>\n

Le lineette non vanno confuse con i trattini. Infatti, i trattini sono le linee orizzontali più corte che vanno utilizzate solo per le parole composte e per la sillabazione. Le lineette, invece, sono dei segni di punteggiatura che vengono sempre preceduti e seguiti da uno spazio. Le lineette possono essere medie o lunghe: quelle medie si utilizzano, per esempio, in italiano e in tedesco, mentre quelle lunghe si utilizzano, per esempio, in inglese e in russo.
\nÈ dunque corretto scrivere “La FIAT Duna – la migliore macchina italiana di sempre – arriva a 200 km\/h se buttata giù da un aereo”.
\nÈ invece sbagliato scrivere “Il Duomo di Milano ‑ la chiesa più grande della città ‑ ufficialmente si chiama Cattedrale Metropolitana della Natività della Beata Vergine Maria”.<\/p>\n

5. Le parole che vanno sulla riga sotto<\/h4>\n

È importante stare attenti alle parole che potrebbero spostarsi alla riga successiva quando cambia la larghezza della finestra del browser (perché le dimensioni degli schermi esistenti nella natura sono molto varie e\/o perché la finestra è stata ridimensionata dall’utente). Poiché non è possibile sapere in quali punti una frase verrà divisa in righe, siamo costretti a prevedere tutti i casi possibili. Non possono rimanere sulla riga precedente le iniziali seguite da u cognome, le parole di una, due o tre lettere, gli articoli, le preposizioni, le congiunzioni, i numeri delle date e degli anni e tante altre cose particolari. Allo stesso modo, tante parole e tanti simboli non possono essere staccati dalla parola precedente per andare alla riga successiva. In alcuni casi è possibile formulare un principio più o meno ampio, in altri casi bisogna valutare la frase concreta.
\nIn tutti i casi ci aiuta lo spazio unificatore (codice HTML &nbsp;).<\/p>\n\n\n\n\n\n
La divisione in righe sbagliata<\/b><\/td>\nLa divisione in righe corretta<\/b><\/td>\n<\/tr>\n
Ho fatto il pieno di
benzina<\/td>\n		Ho fatto il pieno
di benzina<\/td>\n<\/tr>\n
L’azienda Messerschmitt
– produttrice di aerei – non esiste più<\/td>\n		L’azienda Messerschmitt –
produttrice di aerei – non esiste più<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

6. Gli intervalli non spezzabili<\/h4>\n

Gli intervalli non spezzabili (<nobr> … <\/nobr>) vanno applicati quando l’utilizzo di uno spazio unificatore (&nbsp;) è inappropriato. Questo vale, per esempio, per le parole che si scrivono con un trattino o per gli intervalli degli anni (molti browser utilizzano i trattini e le lineette per andare a capo se si tratta della fine della riga).
\nGli esempi di utilizzo:<\/b>
\nIl pilota ha deciso di proseguire verso <nobr>sud-est<\/nobr>.
\nNegli anni <nobr>1939–1945<\/nobr> c’era stata la Seconda guerra mondiale.<\/p>\n

7. I caratteri speciali e i simboli<\/h4>\n

In tutti i casi bisogna utilizzare i caratteri speciali e i simboli nel loro aspetto originale, senza cercare di emularli con altri caratteri più “comuni”.<\/p>\n\n\n\n\n\n\n
Sbagliato<\/b><\/td>\nCorretto<\/b><\/td>\n<\/tr>\n
(c) 2025 Mario Rossi<\/td>\n© 2025 Mario Rossi<\/td>\n<\/tr>\n
Tizio Electronics (tm)<\/td>\nTizio Electronics ™<\/td>\n<\/tr>\n
Caio Hoes (R)<\/td>\nCaio Hoes ®<\/sup><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/p>\n

8. I caratteri salva byte<\/h4>\n

I tempi in cui le persone dovevano risparmiare ogni byte di spazio sul disco sono ormai lontanissimi, non se li ricordano più nemmeno tanti veterani della programmazione. Di conseguenza, non abbiamo più alcun motivo di utilizzare i simboli creati per risparmiare i byte (e\/o per la composizione tipografica monospaziata). Così, per esempio, i puntini vanno fatti non con un simbolo (…), ma con tre punti separati (…): così diventano più belli e corretti…<\/p>\n

9. La tipografia tradizionale<\/h4>\n

E poi ci sono tutte le regole della tipografia tradizionale – quella “da carta” – che sul web vanno applicate esattamente come nei libri preparati come si deve. Non le elenco perché è inutile tentare di riassumere l’ampissima letteratura tecnica in materia. L’unico obiettivo del presente paragrafo era quello di elencare le principali particolarità della tipografia che troppo spesso vengono dimenticate solo dalle persone che pubblicano i testi online.<\/p>\n","protected":false},"excerpt":{"rendered":"

Il paragrafo dell\u2019\u201cInerario\u201d che riassume i principi fondamentali della tipografia per il web. Questo paragrafo sar\u00e0 utile a tutti coloro che pubblicano i testi online (non importa se testi propri o degli altri) e agli sviluppatori front-end.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":43,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-13894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/13894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=13894"}],"version-history":[{"count":1,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/13894\/revisions"}],"predecessor-version":[{"id":14134,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/13894\/revisions\/14134"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=13894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}