Wikipedia

Tipografia web

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.

Storia modifica

 
Confronto tra testo-immagine e testo HTML. Il secondo si adatta ai dispositivi, non sgrana allo zoom ed è selezionabile e copiabile dall'utente

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].

CSS1 modifica

  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.

Caratteri web-safe modifica

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 modifica

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.

Caratteri fallback modifica

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 modifica

 
Font di tipo icona. Ogni lettera corrisponde ad un simbolo[11].

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 modifica

Formati di file modifica

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 modifica

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 modifica

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 modifica

  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

Font grafici scalabili vettoriali modifica

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 modifica

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 modifica

Font Squirrel modifica

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;
 }

Google Fonts modifica

  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 modifica

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 SVG

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

 
Esempio di font SVG incorporato

HTML5 Canvas modifica

  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 Canvas incorporato in CSS

Esempio di font incorporato con Google Fonts:

 
Esempio di Google fonts in Canvas

Formattazione dei font modifica

  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].

Contorno e riempimento modifica

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>

Caratteri speciali e verticali modifica

  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:"&#9875; "
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>

Esempi modifica

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

Design e SEO modifica

  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.

Note modifica

  1. ^ Dave Garaffa, Embedded Fonts In Microsoft IE4pr2, su browserwatch.internet.com, Internet.com, 2 settembre 1997 (archiviato dall'url originale l'8 luglio 1998).
  2. ^ font flash, su helpx.adobe.com.
  3. ^ Alessandro Fulciniti, Le tecniche di Image Replacement, su HTML.it. URL consultato il 1º febbraio 2021.
  4. ^ (EN) Nine Techniques for CSS Image Replacement, su CSS-Tricks, 24 marzo 2008. URL consultato il 1º febbraio 2021.
  5. ^ (EN) The Image Replacement Museum, su CSS-Tricks, 3 novembre 2015. URL consultato il 1º febbraio 2021.
  6. ^ (EN) Using background-image to replace text, su Stopdesign, 7 marzo 2003. URL consultato il 1º febbraio 2021.
  7. ^ Alessandro Fulciniti, sIFR: la nuova tipografia per il web, su HTML.it. URL consultato il 1º febbraio 2021.
  8. ^ (EN) Facelift Image Replacement Integration, su Drupal.org, 6 agosto 2008. URL consultato il 1º febbraio 2021.
  9. ^ (EN) Shambix, Cufòn Vs. sIFR Vs. @font-face, su Shambix, 23 settembre 2010. URL consultato il 1º febbraio 2021.
  10. ^ Fonts, in Cascading Style Sheets, level 2:CSS2 Specification, World Wide Web Consortium, 12 maggio 1998. URL consultato il 28 luglio 2009.
  11. ^ (EN) It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons, su LambdaTest. URL consultato il 1º febbraio 2021.
  12. ^ (EN) Ethan Dunham, Free Fonts! Legit Free & Quality | Font Squirrel, su fontsquirrel.com. URL consultato il 1º febbraio 2021.
  13. ^ (EN) Google Fonts, su Google Fonts. URL consultato il 1º febbraio 2021.
  14. ^ html - Using Google Fonts with SVG, su Stack Overflow. URL consultato il 1º febbraio 2021.
  15. ^ a b SVG fonts - SVG: Scalable Vector Graphics | MDN, su developer.mozilla.org. URL consultato il 1º febbraio 2021.
  16. ^ Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato l'11 febbraio 2021 (archiviato dall'url originale il 2 dicembre 2017).
  17. ^ (EN) 71 CSS Text Effects, su Free Frontend. URL consultato l'11 febbraio 2021.
  18. ^ Chrome Experiments | Experiments with Google, su experiments.withgoogle.com. URL consultato l'11 febbraio 2021.
  19. ^ (EN) Adding Stroke to Web Text, su CSS-Tricks, 12 settembre 2010. URL consultato l'11 febbraio 2021.
  20. ^ (EN) How to Outline Text in Inkscape, su wikiHow. URL consultato l'11 febbraio 2021.
  21. ^ (EN) How to Offset a Text Stroke in Illustrator in a Non Destructive Way — Medialoot, su medialoot.com. URL consultato l'11 febbraio 2021.
  22. ^ Styling vertical Chinese, Japanese, Korean and Mongolian text, su w3.org. URL consultato l'11 febbraio 2021.
  23. ^ Simboli HTML e CSS. Come inserirli nei contenuti., su ioeweb.it. URL consultato l'11 febbraio 2021 (archiviato dall'url originale il 19 gennaio 2020).
  24. ^ (EN) Thanh Nguyen Nguyen, Anatomy of Scalable Vector Graphics (SVG) Attack Surface on the Web, su Fortinet Blog, 7 novembre 2019. URL consultato l'11 febbraio 2021.
  25. ^ (EN) 71 CSS Text Effects, su Free Frontend. URL consultato il 1º febbraio 2021.
  26. ^ Flash & The Future of Interactive Content | Adobe Blog, su web.archive.org, 2 dicembre 2017. URL consultato il 1º febbraio 2021 (archiviato dall'url originale il 2 dicembre 2017).
  27. ^ (EN) The performance cost of custom web fonts, and how to solve it, su Wholegrain Digital, 22 ottobre 2019. URL consultato il 1º febbraio 2021.

Voci correlate modifica

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

Altri progetti modifica

Estratto da "https://it.wikipedia.org/w/index.php?title=Tipografia_web&oldid=136624874"