Per tipografia web si intende l'uso di caratteri sul World Wide Web. Quando è stato implementato per la prima volta l'HTML i volti e gli stili dei caratteri erano controllati esclusivamente dalle impostazioni di ciascun browser web. Non c'era alcun meccanismo per le singole pagine Web per controllare la visualizzazione dei font finché Netscape non ha introdotto il tag <font> nel 1995, standardizzato nelle specifiche HTML 3.2. Tuttavia, il carattere specificato dal tag doveva essere installato sul computer dell'utente o veniva usato un font di fallback, ad esempio il font sans-serif o monospace predefinito di un browser. I primi fogli di stile a cascata (CSS) e le specifiche sono state pubblicate nel 1996 e hanno fornito le stesse capacità.

La specifica CSS2 è stata rilasciata nel 1998 cercando di migliorare il processo di selezione dei font aggiungendo font matching, sintesi e download. Queste tecniche non sono state molto utilizzate e sono state rimosse dalle specifiche CSS2.1. Internet Explorer (ora obsoleto in favore di Microsoft Edge) ha aggiunto il supporto per la funzionalità di download dei font nella versione 4.0, rilasciata nel 1997^[1]. Il download dei font è stato successivamente incluso nel modulo dei font CSS3 e da allora è stato implementato in Safari 3.1, Opera 10 e Mozilla Firefox 3.5. Questo ha in seguito accresciuto l'interesse per la tipografia web, nonché l'uso del download di font.

Negli anni 90 e 2000 non c'erano tecniche di incorporazione dei font in HTML, pertanto si potevano usare solo quelli di default del sistema. Con Adobe Flash questo problema non c'era poiché esso permetteva di visualizzare qualsiasi font scelto dallo sviluppatore all'interno del file SWF pur non essendo installato nei computer degli utenti^[2]. In HTML si iniziò a creare titoli e testo con il font scelto e a inserirli come immagine con il tag IMG al posto degli Heading e del testo, ma ciò creò la mancata indicizzazione da parte dei motori di ricerca del testo, testi sgranati in caso di zoom dell'utente e problemi di accessibilità nel caso l'utente usasse gli screen readers. Successivamente nacquero alcune tecniche per far visualizzare dei font diversi da quelli di sistema pur mantenendo il testo HTML di default:

• Fahrner Image Replacement^[3][4][5]: una tecnica che utilizzava i CSS per sostituire il testo su una pagina Web con un'immagine contenente quel testo. Aveva lo scopo di mantenere la pagina accessibile agli utenti di screen reader, browser web di solo testo o altri browser in cui il supporto per immagini o fogli di stile è disabilitato o inesistente, consentendo al contempo all'immagine di differire tra gli stili. Chiamato anche "CSS image replacement" da Todd Fahrner, una delle persone originariamente accreditate con l'idea della sostituzione dell'immagine nel 2003^[6].
• Scalable Inman Flash Replacement (sIFR)^[7]: un'implementazione di font web dinamici JavaScript e Adobe Flash, che consentiva la sostituzione di elementi di testo nelle pagine web HTML con equivalenti Flash. Era open-source ed è stato inizialmente sviluppato da Mike Davidson e migliorato da Mark Wubben.
• Facelift Image Replacement (FLIR)^[8] era un software simile a sIFR. Ma invece di usare Flash incorporava immagini semplici, che venivano generate automaticamente dal testo sulla pagina web. Quindi, anche se l'utente non aveva il plug-in Flash installato, vedeva il testo sostituito da FLIR.
• Cufón era un'alternativa che convertiva i percorsi dei caratteri in grafica vettoriale archiviata nel formato dati JSON e quindi eseguiva il rendering dei caratteri in elementi Canvas o VML (a seconda della disponibilità) utilizzando un motore di rendering JavaScript^[9].

Lo stesso argomento in dettaglio: CSS.

Nella prima specifica CSS sono state specificate le caratteristiche dei caratteri tramite una serie di proprietà:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Tutti i caratteri sono stati identificati esclusivamente per nome.

I caratteri sicuri per il web sono caratteri probabilmente presenti su una vasta gamma di sistemi informatici e utilizzati dagli autori di contenuti web per aumentare la probabilità che il contenuto venga visualizzato nel carattere scelto. Se un visitatore di un sito web non ha il carattere specificato, il browser tenta di selezionare un'alternativa simile, in base ai caratteri di fallback specificati dall'autore e alle famiglie generiche o utilizza la sostituzione dei caratteri definita nel sistema operativo del visitatore.

Da quando sono stati rilasciati, tramite i font Core di Microsoft per il programma web, Arial, Georgia e Verdana sono diventati tre font di fatto del web. Per garantire che tutti gli utenti web disponessero di un set di caratteri di base, Microsoft ha avviato l'iniziativa Core fonts nel 1996 (terminata nel 2002). Font rilasciati includono Arial, Courier New, Times New Roman, Comic Sans, Impact, la Georgia, Trebuchet, Webdings e Verdana, sotto un EULA. Tuttavia, la maggior parte delle distribuzioni Linux non includono questi tipi di caratteri per impostazione predefinita. I CSS2 hanno tentato di aumentare gli strumenti disponibili per gli sviluppatori web aggiungendo la sintesi dei font, il miglioramento della corrispondenza dei font e la possibilità di scaricare font remoti^[10]. Alcune proprietà dei font CSS2 sono state rimosse dai CSS2.1 e successivamente incluse in CSS3.

La specifica CSS consente di elencare più tipi di carattere come caratteri di fallback. In CSS, la proprietà font-family accetta un elenco di caratteri separati da virgola da utilizzare nel seguente modo:

font-family: Helvetica, "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;

Il primo font specificato è il font preferito. Se questo tipo di carattere non è disponibile, il browser web tenta di utilizzare il carattere successivo nell'elenco. Se non viene trovato nessuno dei caratteri specificati, il browser visualizza il carattere predefinito. Questo stesso processo si verifica anche per carattere se il browser tenta di visualizzare un carattere non presente nel font specificato.

Per dare ai progettisti web un certo controllo sull'aspetto dei caratteri sulle loro pagine, anche quando i caratteri specificati non sono disponibili, la specifica CSS consente l'uso di diverse famiglie di caratteri generici. Queste famiglie sono progettate per suddividere i caratteri in diverse categorie in base all'aspetto generale. Vengono comunemente specificati come l'ultimo di una serie di caratteri di fallback, come ultima risorsa nel caso in cui nessuno dei caratteri specificati dall'autore sia disponibile. Esistono cinque famiglie generiche:

Sans-serif

Caratteri che non hanno contrassegni decorativi, o caratteri tipografici, sulle loro lettere. Questi caratteri sono spesso considerati più facili da leggere sugli schermi.

Serif

Caratteri con segni decorativi o serif.

Monospace

Caratteri in cui tutti i caratteri hanno la stessa larghezza.

Cursive

Caratteri che assomigliano alla scrittura corsiva. Questi caratteri possono avere un aspetto decorativo, ma possono essere difficili da leggere in piccole dimensioni, quindi vengono generalmente utilizzati con moderazione.

Fantasy

Caratteri che possono contenere simboli o altre proprietà decorative.

Utilizzando una specifica @font-face è possibile incorporare i font in modo tale che funzionino con IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ e Chrome 4.0+. Ciò consente alla maggioranza degli utenti web di accedere a questa funzionalità. Alcune fonderie commerciali si oppongono alla ridistribuzione dei loro font. Molte altre fonderie di tipo commerciale si occupano della ridistribuzione dei loro font offrendo una licenza specifica, nota come licenza per i caratteri web, che consente l'utilizzo del software dei caratteri per visualizzare contenuti sul web, un utilizzo normalmente vietato dalle licenze desktop di base. Naturalmente questo non interferisce con i font e le fonderie con licenze gratuite.

TrueDoc, sebbene non una specifica webfont, è stato il primo standard per l'incorporamento dei caratteri. È stato sviluppato dal fondatore di Bitstream nel 1994 e venne supportato in Netscape Navigator 4, nel 1996. A causa delle restrizioni della licenza open source, con Netscape non è stato possibile rilasciare il codice sorgente di Bitstream, il supporto nativo per la tecnologia terminò quando Netscape Navigator 6 fu rilasciato. Un plugin ActiveX era disponibile per aggiungere il supporto per TrueDoc a Internet Explorer, ma la tecnologia doveva competere con i font OpenType Embedded di Microsoft che erano nativamente supportati nel loro browser Internet Explorer dalla versione 4.0. Un altro impedimento era la mancanza di strumenti open source o gratuiti per creare webfonts in formato TrueDoc, mentre Microsoft ha reso disponibile uno strumento gratuito per incorporare i caratteri web per creare webfonts nel loro formato.

Internet Explorer ha supportato l'incorporamento dei font attraverso lo standard proprietario OpenType Embedded dalla versione 4.0. Utilizza tecniche di gestione dei diritti digitali per impedire che i caratteri vengano copiati e utilizzati senza una licenza. Un sottoinsieme semplificato di EOT è stato formalizzato con il nome di CWT (Compatibility Web Type , ex EOT-Lite ).

Lo stesso argomento in dettaglio: Scalable Vector Graphics.

La tipografia web si applica a SVG in due modi:

1. Tutte le versioni della specifica SVG 1.1, incluso il sottoinsieme SVGT, definiscono un modulo font che consente la creazione di caratteri all'interno di un documento SVG. Safari ha introdotto il supporto per molte di queste proprietà nella versione 3. Opera ha aggiunto il supporto preliminare nella versione 8.0, con supporto per più proprietà in 9.0
2. Le specifiche SVG consentono ai CSS di applicare i documenti SVG in modo simile ai documenti HTML e il @font-face può essere applicato al testo nei documenti SVG. Opera ha aggiunto il supporto per questo nella versione 10

I font SVG sono uno standard W3C di font che usa l'immagine SVG. I font SVG, come formato indipendente, sono supportati dalla maggior parte dei browser. Lo standard con cui la maggior parte dei produttori di browser è d'accordo è il sottoinsieme di font SVG incluso in OpenType (e quindi il superset WOFF), chiamato SVGOpenTypeFonts. Firefox ha supportato SVG OpenType da Firefox 26.

Il collegamento a tipi di carattere standard TrueType (TTF) e OpenType (TTF / OTF) è supportato da Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+ e Google Chrome 4.0+.

Font Squirrel è un servizio gratuito che permette di scaricare molti font gratis e creare il pacchetto per incorporare i Web Fonts, compresi i file di tipo font e le relative regole CSS.^[12] In alternativa è possibile scaricare manualmente ogni formato di file font e scrivere il CSS da zero. Esempio:

 @font-face {
 	font-family: 'Journal';
 		src: url('http://your-own.site/fonts/journal/journal.woff') format('woff'),
 		url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
 		url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
 		url('http://your-own.site/fonts/journal/journal.eot'),
 		url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
 	font-weight: normal;
 	font-style: normal;
 }

Lo stesso argomento in dettaglio: Google Fonts.

Google Fonts (in precedenza chiamato Google Web Fonts) è una libreria di font con licenza libera, una directory web interattiva per navigare nella libreria e API per utilizzare comodamente i caratteri tramite CSS e Android. Fornisce il codice per incorporare il font scelto nella pagina web creando un collegamento senza scaricarlo (ma consente comunque di scaricarlo e incorporarlo poi tramite @font-face)^[13]:

<link rel = "preconnect" href = "https://fonts.gstatic.com">
<link href = "https://fonts.googleapis.com/css2? family = Open + Sans: wght @ 300 & display = swap "rel =" stylesheet ">

SVG permette di trasformare qualunque font in tracciati in modo che qualsiasi dispositivo lo legga senza bisogno di incorporare il font, ma in quel caso non sarà più un carattere ma si comporterà come un'immagine (jpg, png,...). Quindi non sarà più indicizzabile dai motori di ricerca ne leggibile dagli Screen Readers.

Esempio di Google Fonts utilizzato in SVG^[14]:

(...)
<defs>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css2? family = Open + Sans: wght @ 300 & display = swap "rel =" stylesheet ');
 </style>
</defs>
(...)
<text font-size="14" fill="#333" style="font-family: 'Roboto';">
   Wikipedia è un'enciclopedia
</text>
(...)

Esempio di font SVG. In questo caso il font deve essere installato sul dispositivo dell'utente altrimenti visualizzerà nel browser un font alternativo di sistema come Times New Roman o Arial^[15]:

Esempio di font incorporato in SVG tramite CSS con la regola @font-face^[15]:

Lo stesso argomento in dettaglio: Canvas (elemento HTML).

Si possono utilizzare dei font incorporati anche nel caso di progetti 3D per il web, come nel caso di HTML5 Canvas. Nel seguente caso il font deve essere installato sul dispositivo dell'utente altrimenti visualizzerà nel browser un font alternativo di sistema come Times New Roman o Arial:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Wikipedia", 10, 50);

Esempio di font incorporato con la regola @font-face

Esempio di font incorporato con Google Fonts:

Lo stesso argomento in dettaglio: HTML5, CSS, WebGL e Canvas (elemento HTML).

Con la nascita di HTML 5 e CSS 3 è diventato possibile formattare graficamente i font creando effetti, rotazioni e animazioni, cosa che prima era possibile solo ricorrendo ad Adobe Flash (obsoleto dal 31 dicembre 2020^[16]) o alle immagini^[17]. Le tecniche principali utilizzate sono WebGL, CSS 3, HTML 5 Canvas e SVG. Spesso alcune di queste tecniche si possono fondere. In alcuni casi lo stesso risultato si può ottenere utilizzando tecniche diverse^[18].

I caratteri sul Web sono grafici basati su vettori^[19] come nei programmi di videoscrittura, infatti ingrandendoli con il browser rimangono nitidi. I font web sono formati infatti da contorno (stroke) e riempimento, come i font presenti sui programmi di grafica^[20][21].

Contorno formattato con CSS 3:

h1 {
text-stroke: 1px black;
}

Contorno formattato con HTML5 Canvas:

CanvasRenderingContext2D.strokeText(text, x, y [, maxWidth]);

Contorno creato con SVG formattabile in CSS o con altri tag SVG (in formato testo o convertibile in tracciato):

<text
style=”stroke:none;stroke-width:2.04704;"
>A</text>

Lo stesso argomento in dettaglio: Entità (markup).

I CSS 3 possono produrre testo verticale per lingue come cinese, giapponese, coreano e mongolo^[22]. Inoltre possono formattare le entità (caratteri speciali)^[23]. Tutto ciò si può fare anche in SVG^[24].

Esempio di inserimento dell'icona ⚓ in CSS:

.wikipedia:before {
content:"⚓ "
color:red;
}
<p>Wikipedia<span style="color:red">&#9875</span> l'enciclopedia libera</p>

Esempio di inserimento dell'icona ⚓ in SVG (nel caso non la si converta in tracciati) formattabile con i CSS o con altri tag SVG:

<text
id="text839"
sodipodi:role="line">⚓</text>

Esempio di inserimento di caratteri orientali in CSS:

time {
      text-combine-upright: digits 2; 
      }

<p>今日は<time datetime="2016-05-22">2015年5月22日</time>です。</p>

Esempio di inserimento di caratteri orientali in SVG (nel caso non li si converta in tracciati) formattabili con i CSS o con altri tag SVG:

<text
       x="300"
       id="a">什水跑本不要去在使司物似小中可期是的好三：、。，</text>

• 
  Uso della maschera, delle ombre e delle animazioni
• 
  Uso dei gradienti, dell'interattività e del 3D
• 
  Contorno e riempimento

Lo stesso argomento in dettaglio: Ottimizzazione per i motori di ricerca.

Lo stesso argomento in dettaglio: Graphic design.

Dalla nascita di CSS3 sono nate molte tecniche di formattazione dei font per il web^[25] in precedenza disponibili solo per la stampa e in Adobe Flash (obsoleto dal 31 dicembre 2020)^[26].

• 
  Visivamente i tre font sono uguali ma non per i motori di ricerca
• 
  Troppi font diversi non creano un buon design e se sono incorporati nell'HTML tramite CSS possono rallentare la pagina^[27]
• 
  Per un buon design non tutti i font stanno bene insieme. Nel primo caso titolo e sottotitolo stanno bene, nel secondo no.
• 
  Ci sono modi di arrivare allo stesso risultato con i web font. Nel primo caso sono stati usati due font incorporati con CSS.

• RFC 2119 Parole chiave per l'uso nelle RFC per indicare i livelli di requisiti
• RFC 4647 Corrispondenza dei tag di lingua

• Wikimedia Commons contiene immagini o altri file sulla tipografia web

Portale Internet: accedi alle voci di Wikipedia che trattano di Internet