FONT VARIABILI? Sì, grazie.

GIULIA LACO CSSday 19 GIUGNO 2020 ONLINE

#CSSday

FONT VARIABILI: DEFINIZIONE

2020 © Giulia Laco

VARIABLE FONTS - animazione

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

INHALE/EXHALE - animazione

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

CONTRACT/EXPAND - animazione

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

PREMESSA

2020 © Giulia Laco

TYPEFACE vs. FONT

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

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

CHE COS’È UN FONT VARIABILE?

2020 © Giulia Laco

FORMATO FONT: OpenType 1.8

2020 © Giulia Laco

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

FONT “STATICI” VS. FONT VARIABiLI

2020 © Giulia Laco

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

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

DEFINIZIONE “ 2020 © Giulia Laco

Chi ha voluto i font variabili?

2020 © Giulia Laco

FONT VARIABILI OpenType Font Variations

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

AMBITI D’USO FONT VARIABILI

2020 © Giulia Laco

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

DESKTOP FONTS

FONT VARIABILI 2020 © Giulia Laco

Programmi “OFFICE”

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

Programmi di grafica

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

IN PHOTOSHOP

2020 © Giulia Laco

IN ILLUSTRATOR

Pannello carattere 2020 © Giulia Laco

IN INDESIGN

Pannello Carattere 2020 © Giulia Laco

SYSTEM FONTS

FONT VARIABILI 2020 © Giulia Laco

UI SYSTEM FONTS

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

UI SYSTEM FONTS

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

FONTSTACK

2020 © Giulia Laco

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

WEB FONTS

FONT VARIABILI 2020 © Giulia Laco

SUPPORTO DEI BROWSER

2020 © Giulia Laco

SUPPORTO DEI BROWSER

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

SUPPORTO DEI BROWSER

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

ASSI DI VARIAZIONE

FONT VARIABILI 2020 © Giulia Laco

ASSI REGISTRATI vs. ASSI PERSONALIZZATI

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

ASSI REGISTRATI VARIABLE FONTS

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

ASSI REGISTRATI Asse WEIGHT

Nunito by Vernon Adams 2020 © Giulia Laco

ASSI REGISTRATI Assi WIDTH e WEIGHT

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

ASSI REGISTRATI Asse OPTICAL SIZE

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

ASSI REGISTRATI OPTICAL SIZE + FONT SIZE

Amstelvar Alpha by David Berlow 2020 © Giulia Laco

OPTICAL SIZE

2020 © Giulia Laco

OPTICAL SIZE

2020 © Giulia Laco

OPTICAL SIZE

2020 © Giulia Laco

OPTICAL SIZE

2020 © Giulia Laco

OPTICAL SIZE

OK 2020 © Giulia Laco OK

ASSI REGISTRATI Asse slant

Input Mono Beta by David Jonathan Ross 2020 © Giulia Laco

ASSI REGISTRATI Asse ITALIC

Times New Roman (static fonts) 2020 © Giulia Laco

COMBINAZIONE DI ASSI Italic + Slant

Roslindale Variable Italic by David Jonathan Ross 2020 © Giulia Laco

ASSI PERSONALIZZATI

2020 © Giulia Laco

NUOVA TIPOGRAFIA

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

IMPLEMENTAZIONE FONT VARIABILI

2020 © Giulia Laco

PROPRIETÀ CSS (LOWLEVEL)

2020 © Giulia Laco

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

PROPRIETÀ CSS MAPPATE

2020 © Giulia Laco

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

BUGS VARIABLE FONTS

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

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

PROGRESSIVE ENHANCEMENT

2020 © Giulia Laco

@FONT-FACE

2020 © Giulia Laco

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

FEATURE QUERY CSS

2020 © Giulia Laco

FEATURE QUERY @SUPPORTS

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

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

GOOGLE FONTS

2020 © Giulia Laco

GOOGLE FONTS UI VARIABLE FONTS

2020 © Giulia Laco

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

FONT VARIABILI E PERFORMANCE

2020 © Giulia Laco

IL PESO DEI WEB FONT

2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO

FONT STATICI VS. FONT VARIABILE 2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO

2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO

2020 © Giulia Laco

UNA GAMMA DI POSSIBILITÀ

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

FORMATI COMPRESSI WOFF / WOFF2

2020 © Giulia Laco

FORMATI WOFF E WOFF 2.0

2020 © Giulia Laco

WEB FONT LOADING

FOUT/FOIT 2020 © Giulia Laco

WEB FONT LOADING FONT-DISPLAY

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

GOOGLE FONTS API VARIABLE FONTS

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

WEB FONT LOADING Font-display

2020 © Giulia Laco

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

SUBSETTING

2020 © Giulia Laco

SUBSETTING LIMITARE IL NUMERO DI GLIFI

Controllare che la licenza lo consenta. 2020 © Giulia Laco

ANIMAZIONI CON I FONT VARIABILI

2020 © Giulia Laco

ANIMARE USANDO GLI ASSI

2020 © Giulia Laco

ANIMARE USANDO GLI ASSI

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

ANIMARE USANDO GLI ASSI

animazioni asse wght asse ital asse wght 2020 © Giulia Laco

FLUID WEB TYPOGRAPHY

2020 © Giulia Laco

FLUID WEB TYPOGRAPHY

RESPONSIVE WEB TYPOGRAPHY FLUID WEB TYPOGRAPHY 2020 © Giulia Laco

KEYFRAMES AL POSTO DEI BREAKPOINTS

2020 © Giulia Laco

TYPETURA.JS

TYPESETTING CON I FONT VARIABILI

FINE TUNING

Enfasi nel body text

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

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

Lingue con parole lunghe

FINE TUNING VARIABLE FONTS

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

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

FINE TUNING VARIABLE FONTS

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

FONT PAIRING & VARIABLE FONTS

(New) font pairing

USER EXPERIENCE

L’ASSE GRADE

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

L’ASSE GRADE

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

CITAZIONE

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

UX & SEO (FONT VARIABILI)

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

PROSPETTIVE

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

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

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

VARIABLE COLOR FONTS

ASSI “SUPERSLIDER”

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

STRUMENTI & LUOGHI PER SPERIMENTARE

FONT VARIABILI

VARIABLE FONTS TOOLS

Buon typesetting

GRAZIE PER L’ATTENZIONE

Teniamoci in contatto

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

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