Intervento al WordCamp Verona 2018
ABSTRACT: più del 70 % dei siti web utilizza oggi i web font. Ma non tutti li usano ed implementano al meglio. Viaggio attraverso le meravigliose opportunità e le potenziali insidie legate alla scelta e all’implementazione dei web font.
-Breve storia della tipografia web: dal tag font html ai variable fonts.
-Come scegliere i web font: quanti sceglierne, tipologie di servizi offerte dai fornitori di font, lingue e subsetting, licenze e device.
-Come implementare i web font: dove farli risiedere, quali formati utilizzare, come caricarli (buone pratiche di progressive enhancement).
-Come usare i web font: responsive web typography, equilibrio nel typesetting, le caratteristiche dell’open type.
3. MI PRESENTO
Sono una web designer/developer,
che ha iniziato con il Web degli esordi.
Da qualche anno il mio interesse dominante
nell’ambito della progettazione è concentrato
sull’uso della tipografia e sulle nuove opportunità
e sfide portate dai web font.
@webmatter_it
Giulia Laco
4. I WEB FONT
I web font sono utilizzati ormai sulla quasi
totalità dei nuovi siti web e non solo.
SITI
WEB
Pagine
AMP
APP
Annunci in
HTML5
E-MAIL
in HTML
E-BOOK
8. QUALE FONT VIENE LETTO?
FONT
SUL CLIENT
FONT
SUL SERVER
Il web designer è font agnostico Controllo sul font
(salvo problemi di caricamento)
9. Breve storia della tipografia web
Il web designer
è font agnostico
FONT SUL CLIENT
Controllo sul font
FONT SUL SERVER
La resa dipende dal
sistema operativo
FONT SUL CLIENT
(salvo problemi di caricamento)
18. 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)
19. Variable Fonts
Assi che riguardano aspetti a piacere
weight
width
italic
slant
optical size
wght
wdth
ital
slnt
opsz
Assi più tradizionali
Gli assi
30. 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”
GDI
Free Type
Linux Android Chrome OS
31. Text rendering engines
* I dispositivi mobili non usano il subpixel anti-aliasing per via della rotazione degli schermi
Desktop
SUBPIXEL
ANTIALIASING
macOS Linux Windows
iOS Android Windows
mobile
SUBPIXEL
ANTIALIASING
SUBPIXEL
ANTIALIASING
+
HINTING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
GREYSCALE
ANTIALIASING
+
HINTING
34. Quanti font per pagina?
Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#reqFont15 feb 2018
35. 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
Davalutare
Quanti font per SITO?
38. BODY
TEXT
FUNCTIONAL
TEXT
Deve essere letto e
capito. Lettura
immersiva.
DISPLAY
TEXT
Deve essere notato e deve
suggerire qualcosa sul
contenuto. Lettura a
scansione.
Esprime la sua funzione
nel momento in cui serve.
Non deve richiamare
l’attenzione ma deve farsi
trovare all’occorrenza.
TIPI DI TESTO
54. Modalità di vendita dei font
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
Dal 2016
Dal 2018
(nuova formula: font in
progress)
SORTA DI LEASING
64. TTFSVG OTF WOFF WOFF2
-30%
I più contemporanei
EOT
FORMATI DI FONT
65. @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");
}
È datata e fa scaricare il formato EOT a IE9-11 anche se non necessario, visto che supportano il più
compresso WOFF.
Sintassi @font-face
La storica sintassi bulletproof di Fontspring.
66. @font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”),
url(fontname.otf) format("opentype");
}
@font-face {
font-family: FontName;
src: url(fontname.woff2) format("woff2"),
url(fontname.woff) format("woff”);
}
Sintassi @font-face
Supporta
Android 4.4 e
precedenti
o anche solo
Nuova proposta
81. Il testo di questa
pagina è reso con
il…
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
DIFFERENZE CARICAMENTO
85. FOUT CROSSBROWSER
Come ottenerlo
Web Font Loader (Js)
Web Font Observer (Js)
https://github.com/typekit/webfontloader
https://github.com/bramstein/fontfaceobserver
@font-face {
font-family: Nome Font;
src: url(nomefont.woff);
…
font-display: auto | block | swap | fallback | optional;
}
Font-display
(descrittore CSS)
per font SELF-HOSTED
Font –display in font provider API ( per Google Fonts ci stanno lavorando)
86. @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 via Js, solo
dopo l’avvenuto
caricamento del font
Javascript e CLASSE CSS
Come funzionano Web Font Loader e Web Font Observer
95. FAUx bold – Faux italic
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;
}
107. Gutenberg,
il nuovo editor di WordPress,
riuscirà a migliorare l’inserimento
di blocchi strutturati di contenuto
mantenendo la separazione tra
forma e contenuto?
DOMANDA
113. Principali caratteri utilizzati
IBM Plex Sans
IBM Plex Sans Condensed
IBM Plesk Mono
IBM Plesk Serif Medium Italic
IMB Plesk Serif SemiBold Italic
Montserrat
Monserrat light
Phosfate Solid
pHOSFATE INLINE