Dicono che il web design sia al 95% tipografia, e questo è senz’altro ancor più vero oggi rispetto a quanto non fosse dieci anni fa. In questo talk vorrei fare un po’ di luce sull’argomento, illustrando le regole base per una tipografia efficace, e quali sono gli strumenti per poterle mettere in pratica al meglio sviluppando un tema WordPress.
7. <font>
Supportato da tutti i browser, ma
deprecato in HTML5.
● Consente solo di specificare:
○ famiglia di caratteri
○ grandezza
○ colore
● Non consente di specificare varianti
di peso e stile
● Legge esclusivamente font di sistema
8. <font>
Supportato da tutti i browser, ma
deprecato in HTML5.
● Consente solo di specificare:
○ famiglia di caratteri
○ grandezza
○ colore
● Non consente di specificare varianti
di peso e stile
● Legge esclusivamente font di sistema
10. Cufón & sIFR
Tentativi di svincolarsi dall’uso
esclusivo dei font di sistema.
● Basati su Flash e JavaScript
● Poco o per niente accessibili
● Pesanti
11. Cufón & sIFR
Tentativi di svincolarsi dall’uso
esclusivo dei font di sistema.
● Basati su Flash e JavaScript
● Poco o per niente accessibili
● Pesanti
12. Un po’ di storia
<font>
1999
Cufon, sIFR
2008
@font-face
2009
13. @font-face
Supportata per prima da Firefox
3.5.
● CSS standard
● Legge diversi formati:
○ TrueType
○ OpenType
○ Web Open File Format
○ Web Open File Format 2
● È il modo migliore per utilizzare font
non di sistema sul Web.
● Ha portato alla creazione di tutto un
ecosistema di servizi che erogano
Webfont da utilizzare.
14. Un po’ di storia
<font>
1999
Cufon, sIFR
2008
@font-face
2009
?
2018
16. Licenze
Assicurarsi di poter utilizzare un
font è il primo passo per una buona
impostazione tipografica.
SIL Open Font License
https://it.wikipedia.org/wiki/SIL_Open_Font_License
Google Fonts
“...are published under licenses that allow you to use
them on any website, whether it’s commercial or
personal.”
Adobe Fonts
Possono ora essere utilizzati sia su Web, sia offline.
17. Utilizzare i
Webfont
Temi free e commerciali.
La maggior parte dei temi mette a disposizione
dell’utente strumenti per l’inclusione automatica di
font personalizzati.
18. Self-hosted
Il sorgente del font è ospitato nel
nostro stesso spazio Web.
Servizi esterni
Il sorgente del font è fornito da un
sito esterno.
20. Utilizzare i
Webfont
Come includere un font in una
pagina.
@import 'custom-font.css';
● Bene per progetti di cui si ha il pieno controllo (si
può ottimizzare il CSS),
● Non è possibile rimuovere il font se non
modificando il foglio di stile.
wp_enqueue_style( 'custom-font', $stylesheet_url );
● È possibile rimuovere la richiesta, qualora non si
volesse averla (dequeue).
● È possibile combinare la richiesta con un plugin di
caching.
21. Google Fonts
Servizio gratuito che permette l’inclusione
di un foglio di stile esterno:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,700i" rel="stylesheet">
22. Adobe Fonts
(Typekit)
Servizio a pagamento che permette l’inclusione
di un “font kit” legato ad un “progetto”,
completamente gestito tramite il sito di Adobe.
<link rel="stylesheet" href="https://use.typekit.net/<font-kit-ID>.css">
24. FOUT
Flash Of Unstyled Text
Richiesta del WebFont
Il WebFont è caricato
Il browser renderizza il testo
utilizzando il Webfont
}Il browser renderizza il testo utilizzando il
fallback specificato nella font stack.
https://meowni.ca/font-style-matcher/
25. FOIT
Flash Of Invisible Text
Richiesta del WebFont
Il WebFont è caricato
Il browser renderizza il testo
utilizzando il Webfont
}Il browser non renderizza il testo lasciando
uno spazio vuoto.
26. FOFT
Flash Of Faux Text
Richiesta della variante Roman del
WebFont
Il WebFont è caricato
Tutte le varianti sono caricate e il
browser renderizza il testo
}Il browser non renderizza il testo facendosi
carico di creare eventuali faux-bold, faux-
italic.
27. Soluzioni
Una soluzione è possibile
esclusivamente se si ha controllo
sul processo di caricamento.
WebFont Loader
https://github.com/typekit/webfontloader
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
},
fontactive: function(familyName, fvd) {
// Do stuff here...
},
fontinactive: function(familyName, fvd) {
// Do stuff here…
}
});
● Interfaccia unificata per caricare qualsiasi
WebFont
● Eventi per conoscere lo stato di caricamento di
tutti i font/un font specifico.
● Gestisce il concetto di “timeout”.
FontFace Observer
https://fontfaceobserver.com/
39. Scegliere
famiglie per il
contesto d’uso
Non esistono regole scritte. Anche
Comic Sans è un’ottima typeface,
se utilizzata nel contesto giusto.
● Titoli vs corpo del testo
○ Varianti di peso
○ Altezza (x-height) dei caratteri
● “Mood” della famiglia
● Set di caratteri
● Abbinamento con altre famiglie
https://www.reliablepsd.com/ultimat
e-google-font-pairings/
4
43. “Dumb quotes”
Le virgolette “da codice” non sono
quelle da usare scrivendo testo.
"Lorem ipsum"
“Lorem ipsum”
È possibile effettuare sostituzioni nel
testo automaticamente con la
funzione:
https://codex.wordpress.org/Functio
n_Reference/wptexturize
wptexturize( $text );
2
51. Variable fonts
Ogni font è esso stesso un vettore
di cui è possibile alterare le
proprietà.
Demo
https://developer.microsoft.com/en-us/microsoft-
edge/testdrive/demos/variable-fonts/
Playground
https://v-fonts.com/
53. Letture
consigliate
Per approfondire.
The Elements of Typographic Style
di Robert Bringhurst
http://webtypography.net/ – adattamento per il Web
curato da Richard Rutter
Thinking with type
di Ellen Lupton
http://thinkingwithtype.com
Butterick’s Practical Typography
https://practicaltypography.com/
A Book Apart Typography Essentials
https://abookapart.com/collections/typography-
essentials
Nella stampa a caratteri mobili, i caratteri erano blocchetti metallici disposti sul cosiddetto torchio tipografico. Una volta allineati la pagina era composta, veniva intinta in inchiostro e pressata su carta. Gutenberg, circa 1450.
modificare con “universale” evidenziando che oggi vanno tutti su woff2
Quando un font non è ancora caricato, si fa fallback sul successivo nella font stack.
Potenzialmente, può portare a problemi di layout.
Si nasconde interamente il testo, fintanto che il font non è stato caricato.
Nella condizione peggiore, può portare ad avere il contenuto permanentemente invisibile.
Si scarica solo la versione “Roman” del font, e lascio che sia il browser a fornire, temporaneamente, un “faux-bold” e “faux-italic”.