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 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. 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.
Storia
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. 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: 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. Scalable Inman Flash Replacement (sIFR): 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) 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.
CSS1
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.
Caratteri web-safe 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.
Caratteri core di Microsoft per il web 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. Alcune proprietà dei font CSS2 sono state rimosse dai CSS2.1 e successivamente incluse in CSS3.
Caratteri fallback 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.
Famiglie di caratteri generici
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.
Caratteri web Formati di file 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 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.
Embedded OpenType 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).
Grafica vettoriale scalabile
La tipografia web si applica a SVG in due modi: 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 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
Font grafici scalabili vettoriali 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.
TrueType / OpenType 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+.
Metodi di incorporazione dei font Font Squirrel 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. 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;
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):<link rel = "preconnect" href = "https://fonts.gstatic.com">