1. LA TIPOGRAFIA E I WEB FONT
NEI SITI WEB
GIULIA LACO
WORDCAMP VERONA
13 OTTOBRE 2018

2. #wcvrn

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

5. I Web Font
sui siti web

6. Fonte: http://httparchive.org/interesting.php?a=All&l=Feb%2015%202018#fonts 15 feb 2018
QUANTI SITI USANO I WEB FONT?
70% sì
30% no

7. http://www.evolutionoftheweb.com/
C’è stata un’epoca in cui i web designer non
potevano sapere con che font gli utenti
avrebbero visualizzato il sito.
EPOCA DEL FONT AGNOSTICISMO

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)

10. UI System Fonts
Coerenza con la cromatura del sistema operativo

11. UI System Fonts
font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto",
"Oxygen", "Ubuntu”, "Cantarell", "Fira Sans", "Droid
Sans", "Helvetica Neue", sans-serif;
Un esempio: dichiarazione nel font-stack
font-family: system-ui;

12. @font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-
Light"), local(".LucidaGrandeUI"), local("Ubuntu
Light"), local("Segoe UI Light"), local("Roboto-
Light"), local("DroidSans"), local("Tahoma");
}
body {
font-family: "system";
}
UI System Fonts
Un altro esempio: richiamo tramite @font-face

13. Breve storia della tipografia web

14. Breve storia della tipografia web

15. Definizioni
Typeface Font
Famiglia di caratteri Singolo file

16. Variable Fonts
OpenType Font Variations

17. JasonPamenthal
https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/

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

20. RicardoMagalhães
https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497

21. DavidJonathanRoss:https://djr.com/notes/first-variable-font/

22. Variable Fonts
Supporto dei browser
70,94%

23. Web Font
COME SCEGLIERLI | COME IMPLEMENTARLI | COME USARLI

24. COME
SCEGLIERLIDa un punto di vista tecnico/strategico
1/3
I WEB FONT

25. I Web Font non si
visualizzano ovunque
nello stesso modo
PROBLEMA

26. Text rendering
La resa dei caratteri varia:
- da OS a OS
- anche da singolo browser sul medesimo OS

27. Text rendering
Dal vettoriale al pixel

28. GREYSCALE-ANTIALIASING
Scala di grigio

29. Subpixel-antialiasing
Solo nei desktop
Zach Leatherman https://www.zachleat.com/web/font-smooth/

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

32. Screen preview https://commercialtype.com/catalog/
caponi/caponi_display/regular

33. Quanti
Web Font scegliere?
Devo individuare le esigenze in base al contenuto

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?

36. OGNI SCELTA È UNA RINUNCIA

37. Testo E
FUNZIONE
Non tutti i testi assolvono alle stesse funzioni

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

39. https://www.myfonts.com/fonts/positype/scotch/
Text
(corpo del testo)
Display
(titoli)
Deck
(sottotitoli)
FONT E FUNZIONE

40. Hoefler & Co.: https://dashboard.typography.com/user-guide/choosing-fonts
Multipurpose fonts titoli
> 18 pixel
ScreenSmart fonts body
9-18 pixel
FONT E DIMENSIONI

41. LA CATEGORIA “DISPLAY”

42. Come li abbinO?
Il font-pairing

43. Ma come li
abbini?

44. http://www.designmantic.com/blog/
infographics/ten-commandments-of-
typography/
https://www.pinterest.com/
search/pins/?q=font%20pairing
http://www.typewolf.com/
http://designtaxi.com/news/
373220/Infographic-The-Art-
Of-Pairing-Google-Fonts/
http://www.typography.com/
fonts/obsidian/overview/
Best of…Do’s & Don’ts By exampleCombinatorio Autoriale
FONT-PAIRINGI diversi approcci

45. Osa negli
abbinamenti e
sarai notata.

46. Non necessariamente un
Web Font supporta tutte
lingue
PROBLEMA

47. Quali lingue
mi servono?
Devo individuare la gamma Unicode desiderata

48. Le LINGUE supportate
GAMMA UNICODE NOMI DELLE LINGUE

49. Le licenze d’uso del font
prescelto potrebbero
avere limitazioni
inattese
PROBLEMA

50. Quali licenze
mi servono?
Devo pensare a tutte le destinazioni d’uso

51. Le licenze d’uso dei font sono molto diversificate e non è bene dare per scontato nulla.
Le licenze supportate

52. Dove li prendo/compro?
PROBLEMA

53. Da che fornitore
prenderò i Web Font?
E con che modello di acquisto?

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

55. Cosa compro nel
dettaglio?
PROBLEMA

56. Open Type Features
Il diavolo sta nei dettagli

57. Open Type OFF
http://open-type.surge.sh/

58. Open Type ON
http://open-type.surge.sh/

59. COME
IMPLEMENTARLIVarie strategie
2/3I WEB FONT

60. Dove risiedono
i Web Font?
Su che server?

61. HOSTING (CSS @font-face)
SELF-HOSTED SERVICE-HOSTED
I web font risiedono
sul server del sito
I web font risiedono sul
server esterno del
fornitore

62. Formati
di font
Quali usare oggi

63. Ad ogni browser
il suo formato
(EX-)PROBLEMA

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

67. WOFF
Supporto dei browser
93,2%

68. WOFF2
Supporto dei browser
79,33%

69. @font-face {
font-family: ‘Amstervar’;
src: url(Amstervar_VF.woff2) format(‘woff-variations’);
src: url(Amstervar_REGULAR.woff2) format(‘woff2’);
font-weight: 400;
}
Sintassi @font-face
Con i Variable Fonts

70. E se il font
non si carica?
PROBLEMA

71. Font di riserva
Fallback

72. font-family: “Proxima Nova”, Arial, Helvetica, sans serif;
fallback font default system fontcustom web font
FONT STACK
Nel CSS

73. Attenzione
alla Performance
Web font e rendering di pagina

74. I Web Font
bloccano il rendering
della pagina
PROBLEMA

75. A)
Limitare il
numero di font
Limitare il numero di FAMIGLIE
Limitare il numero di PESI /STILI PER FAMIGLIA (o usare un variable font :-)

76. B)
Limitare il
numero di GLIFI PER font
Subsetting

77. Subsetting

78. C)
Strategie di
Web Font Loading
Alcune strategie possibili

79. Cosa vede l’utente
mentre il sito si carica?
PROBLEMA

80. SFARFALLAMENTI

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

82. FOIT all’infinito
EX PROBLEMA
Safari fino al 2016

83. FOUTFlash Of Unstyled Text
è progressive enhancement

84. Come ottengo un FOUT
crossbrowser?
PROBLEMA

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

87. FONT DISPLAY
@font-face descriptor - supporto dei browser
72,83%
ATTENZIONE
Funziona solo su font in self-hosting

88. FONT DISPLAY
Valori possibili
ATTENZIONE
Funziona solo su font in self-hosting
auto
block
swap
fallback
optional

89. Icon fonts
Come caricarli

90. ICON FONTS
https://vimeo.com/118908533
WEB FONT
ICON FONT
WEB FONT
ICON FONT
FOUT FOIT
Font-display: block non aiuta
Meglio una strategia di caricamento diversa dai Web Font (meglio ancora usare icone SVG)

91. PRELOAD
Intanto carico il principale

92. <head>
<link rel=“preload” href=“font.woff” as=“font”>
</head>
PRELOAD
Combatte il lazy loading, lo sviluppatore, sapendo quali font servono, può indicarlo al browser

93. Preload
Supporto dei browser
74,4%
ATTENZIONE
Funziona solo su font in self-hosting

94. ATTENZIONE AI FAUX
La sintesi dei font da parte dei browser

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

96. COME USARLI
Consigli base per il typesetting
3/3
I WEB FONT

97. Responsive
web typography
Tener conto della distanza di lettura

98. DISTANZA DI LETTURA
IA (Oliver Reichenstein) dal blog, 2012: https://ia.net/know-how/responsive-typography-the-basics

99. DISTANZA e
percezione grandezza
caratteri

100. Equilibrio
nel typesettingAlla ricerca della leggibilità perfetta

101. In termini CSS
paragraph width
font-size
line-height

102. Textsize
Linespacing
Measure
Readability
In termini
TIPOGRAFICI

103. lineheight
line lenght
In termini
CSS

104. FoRma e contenuto
Un paragone

105. UN paragone
UX
User
Experience
IA
Information
Architecture
WEB
TYPOGRAPHY
COPYWRITING:
=
:

106. WordPress
E la tipografia

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

109. CUSTOM POST TYPES
GUTENBERG
Editor a blocchi
HEADER 1, 2,3, ecc.

110. BUON
TYPESETTING

111. DOMANDE? Alza la mano!
ANCORA? Seguimi:
@webmatter_it
giulialaco
giulia.laco
GRAZIE
per l’attenzione

112. www.typestrategy.com
ISCRIVITI ALLA NEWSLETTER
Lascia la tua mail per aggiornamenti

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

114. https://www.flickr.com/photos/biahvid/4818560731/in/photolist-
iaPzz-4Eu2tZ-NeuWLh-85jyeG-zW8Vv-3BQAK-
fUXhCa-9gdR3o-6pKtA4-6pKsSK-6pKsYx-2yfVEm-6pPBxL-6pPCa3-6pKt
h6-4aeK87-8kNoei-6pPBQs
https://www.flickr.com/photos/al_fred/2182308559/in/
photolist-4jQUiD-oi8HVK-ogJrx7-oi9Rzk-nV5d5M-nV5RBD-ocv81A-
o1zTeS-5Mbse3-oczpBX-nV6PbW-nYRrVz-ocpMsE-nV6twY-nV2Vt5-
nZqKEA-oauPyC-nV2dM4-oawyLs-nYSGSs-4iajcn-nYT2ft-nV3Jbx-
nV3ne3-nV4PLQ-nV3aG3-ocgVrZ-oga2Y9-ogJvHm-ogWtUZ-oi5zox-
ocq9Jh-6oVivA-nV3zwt-nV54qb-nV6uLu-eQN7SR-ocysV2-ocnWKG-
ogkHo2-ohLrSc-ocqrU9-nV3g6j-8cBMMm-nV5rbB-ogV9vR-nV4xzi-
oczds2-ocze5p-ocAm66
https://www.flickr.com/photos/chanceprojects/29823295336/in/
photolist-MrobFb-fngd4M-qJCihM-PUm3J-4FaAxT-dmftfy-
DXcUU6-9wSsL8-7tb3vZ-aUGnoR-aUFC2B-4s3WXA-hA8UE-ra1xz-
ghswMY-63tZUW-ra1vd-4auQL3-irPz6L-4auQLN-cqq8KC-4UVMNr-
S9gjcA-5n27xu-irPiow-eaLeRu-baAZhT-BeKU6-kCCcoq-qW2iNy-q2whui-
BeKTB-BeKR5-BeKRR-Q6BW7Q-pypqkH-MnrQN8-BeKSD-hA8X3-
hA8U3-8WtL2t-V9PvGv-pmN7kx
https://www.flickr.com/photos/skohlmann/10154660144/in/
photolist-bUPJxm-31Wqko-gtkhFj-dutSkw-bBRVkT-nV3ne3-oczpBX-
nV5JqW-o1A7Av-D89pr-4d2zEe-oeiJhJ-ocqUKy
https://www.flickr.com/photos/gjackson/7433434840/in/photolist-
cjSicE-kYAV43-djNqXg-4WaPTg-6zyy2E-oot9Pk-ocHZhF-CBKFvs-
ft9hu1-8X8Zvv-gyt7y9-gXDthf-buECJd-5qYw59-9xKwNa-9wPNpu-
pF8bbo-4yhQ97-i4s57p-kWf33M-X54V69-gWna4i-qZUnRU-fsZz1u-
dxu2Xs-pmp1Es-8draLx-ARVSPB-coxCvh-fK8KDQ-21Yw1PC-
qFnXqT-9quXM8-9mwSb9-5thAzp-nkxQCT-aAQ8Vz-kLBzaL-kAiCWk-
nfkm1x-ASVMC-95nEoE-6VhH7v-dD2m6s-4aA3m6-Bg6Xc-pvTNFG-
azkZL9-9ShmPi-Ysk2aq
Icons made by Freepik from www.flaticon.com are licensed by CC 3.0 BY
CREDIT
https://www.flickr.com/photos/gerl/6091645954/in/
album-72157627542639094/
https://www.flickr.com/photos/drsnitch/5729774443/in/
photolist-9JjAjx-9NDUgM-7wi4th-D8mHR-
uoKez-5p4cFi-6DArCu-
MkJ2T-3TjpUh-9gCqsJ-5Jhtu7-6wfTMT-4Z1n4g-
jsPFV3-9Ei1QR-8zVrje-8hnpB3-7UX373-jsLYax-6DAnGd-
jsL3pg-6DwgTt-9v2cvU-jpQdM-6DAnt9-4e3ye8-6w1WJf-
D8mHP-7wi4xw-pF5YXd-9sQ9Yu-5uNHTx-7gQMrZ-7gUNmJ-
jpRBU-8hj9Zn-bwErKG-ngDNM-
jpLSJ-7weeZF-4VpjRq-7iYT6M-7wef2P-5iraZq-
a2QHxY-3vY4o9-2M2HbV-co4yrA-b7EbSK-9uYc72