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.

1. What the f...ont!?
WordCamp Milano 2018

2. Ciao!
Andrea Gandino
https://justevolve.it / @andre_g

3. “Typeface”
Famiglia di caratteri, comprensiva
di diverse varianti stilistiche.
“Font”
Gruppo specifico di varianti.

4. Web design is
95%
typography
– Oliver Reichenstein, 2006
Il 95% delle informazioni sul Web è in
formato scritto.

5. Un po’ di storia

6. Un po’ di storia
<font>
1999

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

9. Un po’ di storia
<font>
1999
Cufón, sIFR
2008

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

15. Come utilizzare i
Webfont in una pagina
Web

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.

19. Utilizzare i
Webfont
Applicazione della regola @font-
face.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix')
format('embedded-opentype'),
url('webfont.woff2')
format('woff2'),
url('webfont.woff')
format('woff'),
url('webfont.ttf')
format('truetype'),
url('webfont.svg#svgFontName')
format('svg');
}
.selettore {
font-family: 'MyWebFont', Helvetica, Arial, sans-
serif;
}

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">

23. Problema
Cosa accade quando i font sono in
fase di caricamento?
FOUT
FOIT
FOFT

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/

28. (Alcune) regole base
per una buona
impostazione
tipografica

29. Creare
sufficiente
contrasto...
...affinché il testo possa svolgere al
meglio la propria funzione.
0

30. Utilizzare
bene lo spazio
a disposizione
Lasciare adeguati margini per
permettere al testo di “respirare”.
1

33. Scegliere una
lunghezza di
linea adeguata
Usare un massimo di 60–80
caratteri per linea.
2

36. Valutare
attentamente
l’interlinea
Un testo deve apparire come un
“blocco unico”.
3

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

40. Non esagerare
Spesso, basta un solo cambiamento
per creare sufficiente contrasto tra
due stili.
5

41. “Type crimes”

42. “Scaling”
orizzontale o
verticale
Distorce le proporzioni interne dei
caratteri utilizzati.
1

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

44. Falso corsivo
Caricare e usare la corretta
variante di caratteri.
3

45. Il testo
giustificato
non è fatto per
il Web
Accettare che fare design per il
Web è fondamentalmente diverso
da farlo per la stampa.
4

46. Le accentate
maiuscole
esistono!
● Mantenere premuta la lettera
e scegliere dal popup (macOS)
● Accento grave (`) seguito dalla
lettera desiderata (Windows)
E’ È
5

47. Un po’ di storia
<font>
1999
Cufon, sIFR
2008
@font-face
2009
Variable fonts
2018

48. Variable fonts
Ogni font è esso stesso un vettore
di cui è possibile alterare le
proprietà.

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/

52. Letture consigliate

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

54. Grazie!
Andrea Gandino
https://justevolve.it / @andre_g