Font variabili? Sì grazie.

A presentation at CSSday IT 2020 in June 2020 in by Giulia Laco

Slide 1

FONT VARIABILI? Sì, grazie.

GIULIA LACO CSSday 19 GIUGNO 2020 ONLINE

Slide 2

#CSSday

Slide 3

FONT VARIABILI: DEFINIZIONE

2020 © Giulia Laco

Slide 4

VARIABLE FONTS - animazione

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

Slide 5

INHALE/EXHALE - animazione

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

Slide 6

CONTRACT/EXPAND - animazione

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

Slide 7

PREMESSA

2020 © Giulia Laco

Slide 8

TYPEFACE vs. FONT

Concetto vs. File Bree vs. Bree Serif Thin Bree Serif Thin Italic Bree Serif Light etc. 2020 © Giulia Laco Definizioni

Slide 9

TYPEFACE FAMILIES - EVOLUZIONE

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

Slide 10

CHE COS’È UN FONT VARIABILE?

2020 © Giulia Laco

Slide 11

FORMATO FONT: OpenType 1.8

2020 © Giulia Laco

Slide 12

Un font variabile è un singolo file di font che SI COMPORTA COME più font.

DEFINIZIONE — John Hudson, settembre 2016

«A variable font is a single font file that behaves like multiple fonts.» 2020 © Giulia Laco

Slide 13

FONT “STATICI” VS. FONT VARIABiLI

2020 © Giulia Laco

Slide 14

FONT STATICI VS. FONT VARIABILE

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

Slide 15

Un font variabile è un singolo file di font che SI COMPORTA COME più font [statici].

DEFINIZIONE “ 2020 © Giulia Laco

Slide 16

Chi ha voluto i font variabili?

2020 © Giulia Laco

Slide 17

FONT VARIABILI OpenType Font Variations

MICROSOFT, APPLE, ADOBE, GOOGLE e diverse fonderie ATypI, settembre 2016 2020 © Giulia Laco

Slide 18

AMBITI D’USO FONT VARIABILI

2020 © Giulia Laco

Slide 19

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

Slide 20

DESKTOP FONTS

FONT VARIABILI 2020 © Giulia Laco

Slide 21

Programmi “OFFICE”

Videoscrittura, Presentazioni, ecc. Apple e Microsoft SUPPORTO PARZIALE 2020 © Giulia Laco

Slide 22

Programmi di grafica

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

Slide 23

IN PHOTOSHOP

2020 © Giulia Laco

Slide 24

IN ILLUSTRATOR

Pannello carattere 2020 © Giulia Laco

Slide 25

IN INDESIGN

Pannello Carattere 2020 © Giulia Laco

Slide 26

SYSTEM FONTS

FONT VARIABILI 2020 © Giulia Laco

Slide 27

UI SYSTEM FONTS

https://medium.design/system-shock-6b1dc6d6596f 2020 © Giulia Laco

Slide 28

UI SYSTEM FONTS

https://v-fonts.com/fonts/san-francisco 2020 © Giulia Laco

Slide 29

FONTSTACK

2020 © Giulia Laco

Slide 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”; } Attenzione: questa sintassi potrebbe non essere aggiornata 2020 © Giulia Laco

Slide 31

WEB FONTS

FONT VARIABILI 2020 © Giulia Laco

Slide 32

SUPPORTO DEI BROWSER

2020 © Giulia Laco

Slide 33

SUPPORTO DEI BROWSER

(fonte: CAN I USE, mie rilevazioni) Variable Fonts 2020 © Giulia Laco

Slide 34

SUPPORTO DEI BROWSER

(fonte: CAN I USE) Giugno 2020 90,78% Variable Fonts 2020 © Giulia Laco

Slide 35

ASSI DI VARIAZIONE

FONT VARIABILI 2020 © Giulia Laco

Slide 36

ASSI REGISTRATI vs. ASSI PERSONALIZZATI

VARIABLE FONTS ital wdth wght opsz slnt GRAD XHGH MAHH BOHH COSA 2020 © Giulia Laco

Slide 37

ASSI REGISTRATI VARIABLE FONTS

1 WEIGHT wght 2 WIDTH wdth 3 OPTICAL SIZE opsz 4 SLANT slnt 5 ITALIC ital 2020 © Giulia Laco

Slide 38

ASSI REGISTRATI Asse WEIGHT

Nunito by Vernon Adams 2020 © Giulia Laco

Slide 39

ASSI REGISTRATI Assi WIDTH e WEIGHT

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

Slide 40

ASSI REGISTRATI Asse OPTICAL SIZE

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

Slide 41

ASSI REGISTRATI OPTICAL SIZE + FONT SIZE

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

Slide 42

OPTICAL SIZE

2020 © Giulia Laco

Slide 43

OPTICAL SIZE

2020 © Giulia Laco

Slide 44

OPTICAL SIZE

2020 © Giulia Laco

Slide 45

OPTICAL SIZE

2020 © Giulia Laco

Slide 46

OPTICAL SIZE

OK 2020 © Giulia Laco OK

Slide 47

ASSI REGISTRATI Asse slant

Input Mono Beta by David Jonathan Ross 2020 © Giulia Laco

Slide 48

ASSI REGISTRATI Asse ITALIC

Times New Roman (static fonts) 2020 © Giulia Laco

Slide 49

COMBINAZIONE DI ASSI Italic + Slant

Roslindale Variable Italic by David Jonathan Ross 2020 © Giulia Laco

Slide 50

ASSI PERSONALIZZATI

2020 © Giulia Laco

Slide 51

NUOVA TIPOGRAFIA

A SANS & MONO FONT ! Recursive by Arrow Type 2020 © Giulia Laco

Slide 52

IMPLEMENTAZIONE FONT VARIABILI

2020 © Giulia Laco

Slide 53

PROPRIETÀ CSS (LOWLEVEL)

2020 © Giulia Laco

Slide 54

PROPRIETÀ DI BASSO LIVELLO

1-2-3 assi font-variation-settings: “wght” 38, “wdth” 401, “opsz” 203; Da notare: nelle coppie di valori i primi sono case-sensitive e i secondi senza unità di misura 2020 © Giulia Laco

Slide 55

PROPRIETÀ CSS MAPPATE

2020 © Giulia Laco

Slide 56

Mappatura proprietà css

Low Level CSS vs. CSS Fonts Module Level 4

font-variation-settings vs. font-weight font-stretch font-optical-sizing font-style

[italic/normal] AGGIUGERE • font-synthesis: none; oppure • font-synthesis-style: none; 2020 © Giulia Laco

Slide 57

BUGS VARIABLE FONTS

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

Slide 58

Attenzione ai valori da usare

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

Slide 59

PROGRESSIVE ENHANCEMENT

2020 © Giulia Laco

Slide 60

@FONT-FACE

2020 © Giulia Laco

Slide 61

codice

@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; } 2020 © Giulia Laco @FONT-FACE VARIABLE FONTS RES PROG MENT E H C NAN SIVE E

Slide 62

FEATURE QUERY CSS

2020 © Giulia Laco

Slide 63

FEATURE QUERY @SUPPORTS

body { font-family: “Typeface”, sans-serif; } @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } 2020 © Giulia Laco

Slide 64

FEATURE QUERY @SUPPORTS

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

2020 © Giulia Laco

Slide 65

GOOGLE FONTS

2020 © Giulia Laco

Slide 66

GOOGLE FONTS UI VARIABLE FONTS

2020 © Giulia Laco

Slide 67

NUOVA API GOOGLE FONT

ATTUALE API PER FONT STATICI //fonts.googleapis.com/css?family=Roboto+Slab:700

NUOVA API PER FONT VARIABILI & STATICI //fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900 //fonts.googleapis.com/css2?family=Roboto+Slab:wght@700

2020 © Giulia Laco

Slide 68

FONT VARIABILI E PERFORMANCE

2020 © Giulia Laco

Slide 69

IL PESO DEI WEB FONT

2020 © Giulia Laco

Slide 70

VARIABLE FONTS PERFORMANCE - PESO

FONT STATICI VS. FONT VARIABILE 2020 © Giulia Laco

Slide 71

VARIABLE FONTS PERFORMANCE - PESO

2020 © Giulia Laco

Slide 72

VARIABLE FONTS PERFORMANCE - PESO

2020 © Giulia Laco

Slide 73

UNA GAMMA DI POSSIBILITÀ

NAMED INSTANCES https://www.axis-praxis.org/

Slide 74

FORMATI COMPRESSI WOFF / WOFF2

2020 © Giulia Laco

Slide 75

FORMATI WOFF E WOFF 2.0

2020 © Giulia Laco

Slide 76

WEB FONT LOADING

FOUT/FOIT 2020 © Giulia Laco

Slide 77

WEB FONT LOADING FONT-DISPLAY

@font-face { … font-display: swap; } /* auto | block | swap | fallback | optional */ 2020 © Giulia Laco

Slide 78

GOOGLE FONTS API VARIABLE FONTS

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

Slide 79

WEB FONT LOADING Font-display

2020 © Giulia Laco

Slide 80

WEB FONT LOADER

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

Slide 81

SUBSETTING

2020 © Giulia Laco

Slide 82

SUBSETTING LIMITARE IL NUMERO DI GLIFI

Controllare che la licenza lo consenta. 2020 © Giulia Laco

Slide 83

ANIMAZIONI CON I FONT VARIABILI

2020 © Giulia Laco

Slide 84

ANIMARE USANDO GLI ASSI

2020 © Giulia Laco

Slide 85

ANIMARE USANDO GLI ASSI

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

Slide 86

ANIMARE USANDO GLI ASSI

animazioni asse wght asse ital asse wght 2020 © Giulia Laco

Slide 87

FLUID WEB TYPOGRAPHY

2020 © Giulia Laco

Slide 88

FLUID WEB TYPOGRAPHY

RESPONSIVE WEB TYPOGRAPHY FLUID WEB TYPOGRAPHY 2020 © Giulia Laco

Slide 89

KEYFRAMES AL POSTO DEI BREAKPOINTS

Slide 90

TYPETURA.JS

Slide 91

TYPESETTING CON I FONT VARIABILI

Slide 92

FINE TUNING

Slide 93

Enfasi nel body text

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

Slide 94

Headline lunghe su schermi piccoli

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

Slide 95

Lingue con parole lunghe

FINE TUNING VARIABLE FONTS

p { font-stretch: 100%; /tutte le lingue/}

.german p{ font-stretch: 90%; }

Slide 96

FINE TUNING VARIABLE FONTS

Slide 97

OPTICAL SIZE

Slide 98

OPTICAL SIZE

Un unico file di font variabile potrebbe servire per il testo ed i titoli grazie all’asse Optical Size Text (corpo del testo) Display (titoli)

Amstelvar Alpha

Slide 99

FONT PAIRING & VARIABLE FONTS

Slide 100

(New) font pairing

Slide 101

(New) font pairing

Slide 102

USER EXPERIENCE

Slide 103

L’ASSE GRADE

Slide 104

L’ASSE GRADE

Gli assi di variazione https://www.axis-praxis.org/

Slide 105

L’ASSE GRADE

Gli assi di variazione https://www.axis-praxis.org/

Slide 106

CITAZIONE

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

Slide 107

UX & SEO (FONT VARIABILI)

Slide 108

Core Web Vitals

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. LCP Largest Contentful Paint FID First Input Delay CLS Cumulative Layout Shift

Slide 109

PROSPETTIVE

Slide 110

IL MERCATO DEI VARIABLE FONTS

DOVE STA ANDANDO? 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

Slide 111

IL MERCATO DEI VARIABLE FONTS

DOVE STA ANDANDO? 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. 2020 © Giulia Laco

Slide 112

IL MERCATO DEI VARIABLE FONTS

DOVE STA ANDANDO? È 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. 2020 © Giulia Laco

Slide 113

VARIABLE COLOR FONTS

Slide 114

VARIABLE COLOR FONTS

Slide 115

ASSI “SUPERSLIDER”

Slide 116

IL MERCATO DEI VARIABLE FONTS

DOVE STA ANDANDO? 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. 2020 © Giulia Laco

Slide 117

STRUMENTI & LUOGHI PER SPERIMENTARE

FONT VARIABILI

Slide 118

VARIABLE FONTS TOOLS

Slide 119

VARIABLE FONTS TOOLS

Slide 120

VARIABLE FONTS TOOLS

Slide 121

VARIABLE FONTS TOOLS

Slide 122

Buon typesetting

Slide 123

GRAZIE PER L’ATTENZIONE

Slide 124

Teniamoci in contatto

FOLLOW / CONTATTI TWITTER: @webmatter_it LINKEDIN: giulialaco FACEBOOK: giulia.laco NEWSLETTER: www.typestrategy.com

Slide 125

COLOPHON

BALBOA PLUS FILL Balboa Condesed Balboa ExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack Carl Marx regular Carl Marx bold Bree serif regular Bree s erif italic IBM Plesk Mono medium 2020 © Giulia Laco