ABSTRACT - A tre anni e mezzo dalla loro concezione, i font variabili sembrano essere un formato utilizzabile e proficuo per il web design. Excursus su quello che un font variabile può fare per la tipografia del tuo sito web, per una ulteriore progettazione responsive, per la velocità di caricamento, per le animazioni. E uno sguardo su come sta evolvendo il mercato. YouTube: https://www.youtube.com/watch?v=EzYfJ-w-4TY

1. FONT VARIABILI?
Sì, grazie.
GIULIA LACO
19.GIUGNO.2020.ONLINE

2. #CSSday

3. DEFINIZIONE
FONT VARIABILI
2020
©
Giulia
Laco

4. Jason
Pamental
https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/

5. https://www.itsnicethat.com/news/dalton-maag-variable-fonts-opinion-graphic-design-100220

6. https://www.itsnicethat.com/news/dalton-maag-variable-fonts-opinion-graphic-design-100220

7. PREMESSA
2020
©
Giulia
Laco

8. Definizioni TYPEFACE FONT
Concetto File
2020
©
Giulia
Laco
Bree
Bree Serif Thin
Bree Serif Thin Italic
Bree Serif Light
Bree Serif Light Italic
Bree Serif
Bree Serif Italic
Bree Serif SemiBold
Bree Serif SemiBold Italic
Bree Serif Bold
Bree Serif Bold Italic
Bree Serif ExtraBold
Bree Serif ExtraBold Italic

9. EVOLUZIONE TYPEFACE FAMILIES
Famiglie di caratteri tipografici
tondo vs. corsivo (italic)
tipi differenti
inizio1500
1700
abbiamo famiglie allargate
(roman, italic,
condensed, extended, outlined)
1900
prime famiglie di caratteri
(abbinamento del corsivo al tondo)
2020
©
Giulia
Laco
font-family (CSS)
FONT FAMILY

10. CHECOS’ÈUNFONTVARIABILE?
2020
©
Giulia
Laco

11. 2020
©
Giulia
Laco
FORMATO
FONT OpenType 1.8
OpenType

12. DEFINIZIONE
— John Hudson, settembre 2016
2020
©
Giulia
Laco
* «A variable font is a single font file that behaves like multiple fonts.»
Un font variabile è un singolo
file di font che SI COMPORTA
COME più font.
“
”

13. PER
OPPOSIZIONE FONTVARIABiLI
FONT“STATICI”
2020
©
Giulia
Laco

14. differenze FONTSTATICI fontvariabile
HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html )
FILE
tanti file un file
2020
©
Giulia
Laco

15. DEFINIZIONE
2020
©
Giulia
Laco
Un font variabile è un singolo
file di font che SI COMPORTA
COME più font [statici].
“
”

16. Chihavolutoi
fontvariabili?
2020
©
Giulia
Laco

17. FONTVARIABILI
OpenTypeFontVariations
ATypI,settembre2016
2020
©
Giulia
Laco
ediversefonderie

18. AMBITID’USO
FONT VARIABILI
2020
©
Giulia
Laco

19. 2020
©
Giulia
Laco
DESKTOP
FONTS
WEB
FONTS
WEB BROWSER
E APP (LETTURA)
SYSTEM
FONTS
SISTEMI OPERATIVI
DEI DEVICE
Fontvariabili
Ambiti
d’uso
PROGRAMMI E
APP (SCRITTURA)
NOTA: ATTENZIONE
ALLA LICENZA

20. DESKTOPFONTS
FONT VARIABILI
2020
©
Giulia
Laco

21. Programmi“OFFICE”
2020
©
Giulia
Laco
Videoscrittura, Presentazioni, ecc.
SUPPORTOPARZIALE
Apple e Microsoft

22. Programmidigrafica
2020
©
Giulia
Laco
AdobePhotoshop
Adobe Illustrator
Adobe InDesign
Sketch
QuarkXPress
Figma (soon)

23. 2020
©
Giulia
Laco
IN
PHOTOSHOP

24. 2020
©
Giulia
Laco
IN
ILLUSTRATOR
PANNELLO
Carattere

25. 2020
©
Giulia
Laco
IN
INDESIGN
PANNELLO
Carattere

26. SYSTEMFONTS
FONT VARIABILI
2020
©
Giulia
Laco

27. 2020
©
Giulia
Laco
https://medium.design/system-shock-6b1dc6d6596f
UI
SYSTEM
FONTS

28. 2020
©
Giulia
Laco
https://v-fonts.com/fonts/san-francisco
UI
SYSTEM
FONTS

29. FONTSTACK
2020
©
Giulia
Laco

30. UI
SYSTEM
FONTS
VARIABLE
FONTS
body {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
}
2020
©
Giulia
Laco
Attenzione: questa sintassi
potrebbe non essere aggiornata

31. webFONTS
FONT VARIABILI
2020
©
Giulia
Laco

32. SUPPORTODEIBROWSER
2020
©
Giulia
Laco

33. Variable Fonts
0
9,54
78,26
87,01
90,78
0
10
20
30
40
50
60
70
80
90
100
S
E
T
-
1
6
N
O
V
-
1
6
G
E
N
-
1
7
M
A
R
-
1
7
M
A
G
-
1
7
L
U
G
-
1
7
S
E
T
-
1
7
N
O
V
-
1
7
G
E
N
-
1
8
M
A
R
-
1
8
M
A
G
-
1
8
L
U
G
-
1
8
S
E
T
-
1
8
N
O
V
-
1
8
G
E
N
-
1
9
M
A
R
-
1
9
M
A
G
-
1
9
L
U
G
-
1
9
S
E
T
-
1
9
N
O
V
-
1
9
G
E
N
-
2
0
M
A
R
-
2
0
M
A
G
-
2
0
2020
©
Giulia
Laco
SUPPORTO DEIBROWSER(fonte:CANIUSE,mie rilevazioni)

34. Variable Fonts
90,78%
Giugno2020
2020
©
Giulia
Laco
SUPPORTO DEIBROWSER(fonte:CANIUSE)

35. ASSIDIVARIAZIONE
FONT VARIABILI
2020
©
Giulia
Laco

36. ASSI
DI
VARIAZIONE ASSIPERSONALIZZATI
ASSIREGISTRATI
VARIABLE
FONTS
wght wdth
ital
slnt
opsz
XHGH
GRAD
COSA
BOHH
MAHH
2020
©
Giulia
Laco

37. ASSI
REGISTRATI WEIGHT
VARIABLE
FONTS
wght wdth
ital
slnt
opsz
2020
©
Giulia
Laco
WIDTH
OPTICAL
SIZE
SLANT
ITALIC
1 2
3
4
5

38. Nunito by Vernon Adams
WEIGHT
ASSI
REGISTRATI
VARIABLE
FONTS
2020
©
Giulia
Laco

39. Amstelvar Alpha by David Berlow
2020
©
Giulia
Laco
ASSI
REGISTRATI
VARIABLE
FONTS
WEIGHT
WIDTH

40. Amstelvar Alpha by David Berlow
2020
©
Giulia
Laco
ASSI
REGISTRATI
VARIABLE
FONTS
OPTICALSIZE

41. Amstelvar Alpha by David Berlow
2020
©
Giulia
Laco
ASSI
REGISTRATI
VARIABLE
FONTS
OPTICALSIZE
OPTICALSIZE+ FONTSIZE

42. 2020
©
Giulia
Laco

43. 2020
©
Giulia
Laco

44. 2020
©
Giulia
Laco

45. 2020
©
Giulia
Laco

46. 2020
©
Giulia
Laco
OK
OK

47. 2020
©
Giulia
Laco
ASSI
REGISTRATI
VARIABLE
FONTS
Input Mono Beta by David Jonathan Ross
slant

48. Times New Roman (static fonts)
ASSI
REGISTRATI
VARIABLE
FONTS
2020
©
Giulia
Laco
ITALIC

49. COMBINAZIONE
DI
ASSI
VARIABLE
FONTS
Italic + Slant
Roslindale Variable Italic by David Jonathan Ross
2020
©
Giulia
Laco

50. ASSIPERSONALIZZATI
2020
©
Giulia
Laco

51. Recursive by Arrow Type
ASANS&MONOFONT!
NUOVA
TIPOGRAFIA
2020
©
Giulia
Laco

52. IMPLEMENTAZIONE
FONT VARIABILI
2020
©
Giulia
Laco

53. PROPRIETÀCSS(LOWLEVEL)
2020
©
Giulia
Laco

54. 1ASSE font-variation-settings:
"wght" 54;
PROPRIETÀ
DI
BASSO
LIVELLO
VARIABLE
FONTS
font-variation-settings:
"wght" 38, "wdth" 401;
font-variation-settings:
"wght" 38, "wdth" 401, "opsz" 203;
2ASSI
3ASSI
2020
©
Giulia
Laco
Da notare: nelle coppie di valori i primi sono
case-sensitive e i secondi senza unità di misura

55. PROPRIETÀCSSMAPPATE
2020
©
Giulia
Laco

56. font-weight: 38; [1-1000]
font-stretch: 125%; [100% = normal ; 1-1000]
font-optical-sizing: auto; [auto/none]
font-style: oblique 15deg; * [-90deg–90deg]
font-style: italic; * [italic/normal]
Low Level CSS CSSFonts Module Level 4
"wght" 38,
"wdth" 125,
"opsz" 51,
"slnt" 15,
"ital" 1;
font-variation-settings:
AGGIUGERE
• font-synthesis: none; oppure
• font-synthesis-style: none;
2020
©
Giulia
Laco
5ASSIREGISTRATI

57. BUGS
VARIABLE
FONTS
2020
©
Giulia
Laco
https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

58. Nella prima fase di sperimentazione i type designer
non hanno sempre adottato coerentemente i valori
ora raccomandati nelle specifiche CSS4.
2020
©
Giulia
Laco
Quindi occorre
controllare per ciascun
font i valori più adatti
allo scopo che si vuole
ottenere.
ATTENZIONEAIVALORI

59. PROGRESSIVEENHANCEMENT
2020
©
Giulia
Laco

60. @FONT-FACE
2020
©
Giulia
Laco

61. @FONT-FACE @font-face {
font-family: "Typeface VF";
src: url('Typeface_VF.woff2') format('woff2-variations'),
url('Typeface_VF.woff2') format('woff2’);
font-weight: 200 900;
}
@font-face {
font-family: "Typeface";
src: url('Typeface_Regular.woff2') format('woff2');
}
@font-face {
font-family: "Typeface";
src: url('Typeface_Bold.woff2') format('woff2');
font-weight: 700;
}
VARIABLE
FONTS
2020
©
Giulia
Laco
PROGRESSIVEENANCHEMENT

62. FEATUREQUERYCSS
2020
©
Giulia
Laco

63. FEATURE
QUERY
VARIABLE
FONTS
body {
font-family: "Typeface", sans-serif;
}
@supports (font-variation-settings: normal) {
body {
font-family: "Typeface VF", sans-serif;
}
}
@SUPPORTS
2020
©
Giulia
Laco

64. FEATURE
QUERY
VARIABLE
FONTS p {
font-synthesis: none;
font-weight: normal;
}
strong {
font-synthesis: none;
font-weight: bold;
}
@supports (font-variation-settings: normal) {
p {
font-weight: 388;
}
strong {
font-weight: 613;
}
}
@SUPPORTS
2020
©
Giulia
Laco

65. GOOGLEFONTS
2020
©
Giulia
Laco

66. GOOGLE
FONTS
UI
VARIABLE
FONTS
2020
©
Giulia
Laco

67. GOOGLE
FONTS
API
VARIABLE
FONTS
//fonts.googleapis.com/css2?family=Roboto+Slab:wght@700
//fonts.googleapis.com/css?family=Roboto+Slab:700
ATTUALEAPIperIFONTSTATICI
NUOVAAPIPERIFONTVARIABILI&PERIFONTSTATICI
2020
©
Giulia
Laco
//fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900

68. PERFORMANCE
FONT VARIABILI
2020
©
Giulia
Laco

69. ILPesodeiwebfont
2020
©
Giulia
Laco

70. PERFORMANCE FONTSTATICI FONTVARIABILE
PESO
KB
KB KB KB
KB KB KB
KB KB KB
VARIABLE
FONTS
2020
©
Giulia
Laco

71. PERFORMANCE
FONTSTATICI
FONTVARIABILE
PESO
KB
KB
KB
KB
KB
KB
KB
KB
KB
KB
VARIABLE
FONTS
2020
©
Giulia
Laco

72. PERFORMANCE FONTSTATICI FONTVARIABILE
PESO
KB
KB KB
KB
KB
VARIABLE
FONTS
2020
©
Giulia
Laco

73. https://www.axis-praxis.org/

74. FORMATICOMPRESSI
WOFF/WOFF2
2020
©
Giulia
Laco

75. 2020
©
Giulia
Laco
FORMATI
WOFF E WOFF 2.0

76. WEBFONTLOADING
FOUT/FOIT
2020
©
Giulia
Laco

77. WEB
FONT
LOADING FONT-DISPLAY
2020
©
Giulia
Laco
@font-face {
…
font-display: swap;
/* auto | block | swap | fallback | optional */
}

78. GOOGLE
FONTS
API
VARIABLE
FONTS
2020
©
Giulia
Laco
//fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900
&display=swap

79. 2020
©
Giulia
Laco
Font-display
WEB
FONT
LOADING

80. WEB
FONT
LOADING WEBFONTLOADER
2020
©
Giulia
Laco
Per controllare lo stile del font di fallback durante
il caricamento del web font.
Vedi: Web font loader o FontFaceObserver by Bram Stein

81. SUBSETTING
2020
©
Giulia
Laco

82. SUBSETTING LIMITAREILNUMERODIGLIFI
2020
©
Giulia
Laco
Controllare che la licenza lo consenta.

83. ANIMAZIONI
FONT VARIABILI
2020
©
Giulia
Laco

84. ANIMAREUSANDOGLIASSI
2020
©
Giulia
Laco

85. 2020
©
Giulia
Laco
animazioni
https://codepen.io/webmatter/pen/OJMVwEq

86. 2020
©
Giulia
Laco
animazioni
asse wght
asse wght
asse ital

87. FLUIDWEBTYPOGRAPHY
2020
©
Giulia
Laco

88. RESPONSIVE
WEBTYPOGRAPHY
FLUID
WEBTYPOGRAPHY
2020
©
Giulia
Laco

89. BREAKPOINTS
KEYFRAMES
2020
©
Giulia
Laco

90. TYPETURA.JS
KEYFRAMES
mappati su qualcosa di
diverso dal TEMPO BROWSER WIDTH
design fluido basato sui fotogrammi chiave
2020
©
Giulia
Laco

91. TYPESETTING
FONT VARIABILI
2020
©
Giulia
Laco

92. FINETUNING
2020
©
Giulia
Laco

93. p {
font-weight: 413; /* normal (regular) = 400 */
}
Enfasinelbodytext
strong {
font-weight: 516; /* bold = 700 */
}
2020
©
Giulia
Laco
FINE
TUNING
VARIABLE
FONTS

94. h1 {
font-stretch: 80%; /*schermi piccoli*/
}
@media screen and (min-width: 769px) {
h1 {
font-stretch: 100%;
}
}
2020
©
Giulia
Laco
FINE
TUNING
VARIABLE
FONTS
Headlinelunghesuschermipiccoli

95. p {
font-stretch: 100%; /*tutte le lingue*/
}
.german p{
font-stretch: 90%;
}
2020
©
Giulia
Laco
FINE
TUNING
VARIABLE
FONTS
Lingueconparolelunghe

96. 2020
©
Giulia
Laco
https://www.itsnicethat.com/news/dalton-maag-variable-fonts-opinion-graphic-design-100220
FINE
TUNING
VARIABLE
FONTS

97. OPTICALSIZE
2020
©
Giulia
Laco

98. 2020
©
Giulia
Laco
OPTICAL
SIZE
Amstelvar Alpha
opsz
Text
(corpo del testo)
Display
(titoli)
Un unico file di font variabile potrebbe servire per il
testo ed i titoli grazie all’asse Optical Size

99. FONTPAIRING&
VARIABLEFONTS
2020
©
Giulia
Laco
nuovEOPPORTUNITÀ

100. 2020
©
Giulia
Laco
(New)
font
pairing

101. 2020
©
Giulia
Laco
(New)
font
pairing

102. USEREXPERIENCE
2020
©
Giulia
Laco

103. L’ASSEGRADE
VARIABLEFONTS
2020
©
Giulia
Laco

104. L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/

105. L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/

106. “Dans la langue
tout se tient”
– Ferdinand de Saussure

107. UX&SEO
FONT VARIABILI
2020
©
Giulia
Laco
BREAKINGNEWS

108. 2020
©
Giulia
Laco
SEO
Google ha dichiarato che nel
prossimo algoritmo fra i
fattori premianti per il
posizionamento ci sarà anche
il basso reflow della pagina.
Quindi anche le problematiche legate al FOUT
influiranno sul ranking dei siti web su Google.
Core Web Vitals LCP
Largest Contentful Paint
FID
First Input Delay
CLS
Cumulative Layout Shift
BREAKINGNEWS

109. PROSPETTIVE
FONT VARIABILI
2020
©
Giulia
Laco

110. 2020
©
Giulia
Laco
Alcuni non li vendono.
Cioè li danno a
richiesta a chi compra
i font statici, ma li
considerano ancora in
versione beta per via
della tecnologia di
realizzazione.
Underware
IL
MERCATO
VARIABLE
FONTS

111. 2020
©
Giulia
Laco
Analizzando i font variabili su
GOOGLE FONTS si nota che:
40/40 hanno l’asse wght,
16/40 hanno l’asse/versione ital,
1/40 ha l’asse slnt
1/40 ha l’asse wdth.
IL
MERCATO
VARIABLE
FONTS

112. 2020
©
Giulia
Laco
È probabile che vengano
venduti sempre più spesso per
asse di variazione. L’asse
del peso (wght) sempre
integrato e per l’italic un
font a parte.
Sugli altri assi la
situazione può essere varia.
IL
MERCATO
VARIABLE
FONTS

113. VARIABLEcolorFONTS
2020
©
Giulia
Laco
COMINGSOON

114. VARIABLE
CoLOR
FONTS
VARIABLE
FONTS
2020
©
Giulia
Laco

115. ASSI“SUPERSLIDER”
2020
©
Giulia
Laco

116. 2020
©
Giulia
Laco
Un ipotesi di alcuni type
designer è quella di non
esporre tutti gli assi di
variazione agli utenti, ma
creare dei «superassi» o
«superslider» che ne governano
più di uno alla volta.
Questo, a mio parere, influirà
sul mercato dei font.
IL
MERCATO
VARIABLE
FONTS

117. Strumenti
&LUOGHIPERSPERIMENTARE
FONT VARIABILI
2020
©
Giulia
Laco

118. TOOLS axis-praxis.org
VARIABLEFONTS
2019
©
Giulia
Laco
2020
©
Giulia
Laco

119. TOOLS v-fonts.com
VARIABLEFONTS
2020
©
Giulia
Laco

120. TOOLS FONT PLAYGROUND: play.typedetail.com
VARIABLEFONTS
2020
©
Giulia
Laco

121. TOOLS wakamaifondue.com
VARIABLEFONTS
2020
©
Giulia
Laco

122. Buon
typesetting
2019
©
Giulia
Laco

123. PERL’ATTENZIONE
2019
©
Giulia
Laco
GRAZIE

124. @webmatter_it
giulialaco
giulia.laco
FOLLOW / CONTATTI
Teniamociincontatto
NEWSLETTER
www.typestrategy.com

125. BALBOA PLUS FILL
BalboaCondesed
BalboaExtraCondesed
Balboa UltraLight
Balboa Light
Balboa Medium
Balboa Bold
Balboa ExtraBold
Balboa Black
Balboa ExtraBlack
Carl Marx regular
CarlMarxbold
Bree serif regular
Bree s erif italic
IBM Plesk Mono medium
2019
©
Giulia
Laco