[Italiano] - Intervento al CSSday del 16/03/2018
ABSTRACT:
I web font sono utilizzati ormai sulla quasi totalità dei nuovi siti web e non solo. Indubbiamente rappresentano una ghiotta opportunità per la comunicazione. Non sempre però gli utilizzatori sono consapevoli di tutte le conseguenze che ciò comporta: nel bene e nel male. Ragionamenti tecnici e strategici su come sceglierli, come usarli (buone pratiche di typesetting) e come implementarli con attenzione ai nuovi formati (woff2, variable font), alla performance e al progressive enhancement.
3. Mi presento
Sono una web designer/developer,
che ha iniziato con (…ehm)
l’HTML 2.0, quindi in epoca pre-CSS.
Da qualche anno mi occupo molto di:
Web Typography
Font optimisation
Typography strategy
@webmatter_it
Giulia Laco
4. I web font sono utilizzati ormai
sulla quasi totalità dei nuovi siti
web e non solo.
WEB FONT MANIA
SITI
WEB
Pagine
AMP
APP
Annunci in
HTML5
E-MAIL
in HTML
E-BOOK
6. Quanti siti li usano?
Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#fonts 15 feb 2018
70% sì
30% no
7. Ma non è sempre stato così…
http://www.evolutionoftheweb.com/
C’è stata un’epoca in cui i web designer non
potevano sapere con che font gli utenti avrebbero
visualizzato il proprio sito.
FONT AGNOSTICISMO
8. Breve storia della tipografia web
Il web designer
è font agnostico
FONT SUL CLIENT
Si ha finalmente il
controllo sul font
(salvo problemi di caricamento)
FONT SUL SERVER
La resa dipende dal
sistema operativo
FONT SUL CLIENT
21. Text rendering engines
Direct Write Core Text
Microsoft Apple
Allinea i caratteri alla griglia,
col risultato che:
- i pesi regolari sembrano più sottili e
- i grassetti sembrano ancora più pesanti
Predilige la CHIAREZZA a
scapito dell’accuratezza di
riproduzione del font
Preserva maggiormente il
DISEGNO dei caratteri,
il risultato è più “sfocato”
WEB FONT: PREMESSA
GDI
Free Type
Linux Android Chrome OS
22. Text rendering engines
Desktop
SUBPIXEL
ANTIALIASING
macOS Linux Windows
iOS Android Windows mobile
* I dispositivi mobili non usano il subpixel anti-aliasing per via della rotazione degli schermi
SUBPIXEL
ANTIALIASING
SUBPIXEL
ANTIALIASING
+
HINTING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
+
HINTING
WEB FONT: PREMESSA
28. Font-smoothing
WEB FONT: COME IMPLEMENTARLI
Zach Leatherman https://www.zachleat.com/web/font-smooth/
Meglio lasciar fare ai browser
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Se desidero un testo con carattere più sottile,
cercherò un font più sottile!
30. Quanti font per pagina?
Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018
WEB FONT: COME SCEGLIERLI
31. Quanti font per sito?
WEB FONT: QUANTI SCEGLIERNE
DISPLAYBODY TEXT
font pairing oppure stessa font-family
CITAZIONI/
TRAFILETTI/
RICHIAMI/
RIASSUNTI/
NAVIGAZIONE/
PULSANTI/
CALL TO
ACTION
META INFO
Bold + Bold Italic
oppure
Regular + Italic
Regular
Italic
Bold
Bold Italic
Da valutare
caso a caso
41. Modalità di vendita dei font
WEB FONT: COME SCEGLIERLI
Ha chiuso il 01/07/2015
Librerie in abbonamentoLibrerie gratuite Font in abbonamento Singoli font
Varie fonderie
(anche custom font)
Solo desktop
Dal 2015 desktop, dal 2018 web
(formula innovativa)
Ha chiuso il 31/12/2016
NEW
Dal 2016
Dal 2018
(nuova formula: font in
progress)
Sorta di leasing
44. HOSTING (CSS @font-face)
WEB FONT: COME IMPLEMENTARLI
SELF-HOSTED SERVICE-HOSTED
I web font risiedono
sul server del sito
I web font risiedono sul
server esterno del fornitore
47. Formati di font
TTFSVG OTF WOFF WOFF2
-30% WOFF
I più contemporanei
WEB FONT: COME IMPLEMENTARLI
EOT
48. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
@font-face {
font-family: FontName;
src: url(fontname.eot?#iefix) format("embeddedopentype"),
url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff"),
url(fontname.otf) format("opentype"),
url(fontname.svg#fontname) format("svg");
}
La storica sintassi bulletproof di Fontspring
È datata e fa scaricare il formato EOT a IE9-11 anche se non necessario,
visto che supportano il più compresso WOFF
49. @font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”),
url(fontname.otf) format("opentype");
}
Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
Nuova proposta (supporta Android 4.4 e precedenti)
O anche solo
@font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”);
}
50. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
Per dare precedenza ai font locali (ma non è una buona idea)
@font-face {
font-family: FontName;
src: local("FontName"),
url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”);
}
51. Sintassi @font-face
WEB FONT: COME IMPLEMENTARLI
E cosa succede con i Variable Fonts?
@font-face {
font-family: ‘Amstervar’;
src: url(Amstervar_VF.woff2) format(‘woff-variations’);
src: url(Amstervar_REGULAR.woff2) format(‘woff2’);
font-weight: 400;
}
53. Variable Fonts
Si tratta di un formato di font
che consente ad un unico file
di interpretare più stili possibili.
OpenType Font Variations
Typeface VF
Typeface Roman
Typeface Bold
Typeface Italic
Typeface Bold Italic
…
(+ Typeface Italic VF)
54. Variable Fonts
Il disegnatore del font crea degli assi a cui applicare le variazioni.
L’utilizzatore del font può modulare a piacere i vari assi oppure
scegliere fra le istanze suggerite dal disegnatore.
Gli assi
https://www.axis-praxis.org/specimens/decovar
58. Font stack nel CSS
WEB FONT: COME IMPLEMENTARLI
Si vedono se
il primo font
non si carica
(o prima che si
carichi)
font-family: “Proxima Nova”, Arial, Helvetica, sans serif;
fallback font default system
font
custom font
61. Fattori che influiscono sulla velocità
WEB FONT: COME IMPLEMENTARLI
A B C
NUMERO
DI FONT
(famiglie e pesi)
NUMERO
DI GLIFI
(gamma Unicode)
Subsetting: lingue,
Open Type
WEB FONT
LOADING
caricamento
asincrono, preload,
…
62. Limitare il
numero di font
Limitare il numero di FAMIGLIE
Limitare il numero di PESI /STILI PER FAMIGLIA
(o usare un variable font)
A
68. Il testo di questa
pagina è reso con il…
Differenze
WEB FONT: COME IMPLEMENTARLI
Il testo di questa
pagina è reso con il…
Il testo di questa
pagina è reso con il…
Il testo di questa
pagina è reso con il…
richiesta al server web-font loading web-font loaded
FOUT
FOIT
69. La storia del FOUT e del FOIT
Zach Lethearman: https://www.zachleat.com/web/fout-foit-history/
73. FOUT crossbrowser
WEB FONT: COME IMPLEMENTARLI
Web Font Loader
Web Font Observer
https://github.com/typekit/webfontloader
https://github.com/bramstein/fontfaceobserver
Web Font API
@font-face {
font-family: Nome Font;
src: url(nomefont.woff);
…
font-display: auto | block | swap | fallback | optional;
}
Proprietà CSS font-display
74. Classe CSS
WEB FONT: COME IMPLEMENTARLI
@font-face {
font-family: My Family;
font-weight: 400;
src: url(myfamily.woff2) format(“woff2”),
url(myfamily.woff) format(“woff”);
}
body {
font-family: sans-serif;
}
.fonts-loaded body {
font-family: My Family, sans-serif;
}
La classe viene assegnata solo dopo l’avvenuto caricamento del font
75. Preload
WEB FONT: COME IMPLEMENTARLI
<head>
<link rel=“preload” href=“font.woff” as=“font”>
</head>
Combatte il lazy loading, lo sviluppatore, sapendo quali font
servono, può indicarlo al browser
77. Faux bold – Faux italic
WEB FONT: COME IMPLEMENTARLI
Dipende da come scrivo il CSS
o da come lo scrivono i sistemi di terze parti
http://www.fonts.com/support/faq/family-
grouping
@font-face {
font-family: Nomefont, serif;
src: url(nomefont-regular.woff) format("woff");
font-weight: normal;
}
h1 {
font-family: Nomefont, serif;
font-weight: bold;
}
79. Icon fonts
WEB FONT: COME IMPLEMENTARLI
https://vimeo.com/118908533Zach Leatherman, Better @font-face with Font Load Events
WEB FONT
FOUT
ICON FONT
FOIT
WEB FONT
ICON FONT
Usare un caricamento FOIT e non FOUT.
Molti consigliano però di usare SVG per le icone.
93. Questione morale
Se abbiamo chiesto ai nostri utenti di
utilizzare tempo e banda per scaricare
i web font, allora dobbiamo usarli
come si deve, al meglio di quanto
possono offrirci.