Font variabili? Sì grazie.

A presentation at CSSday IT 2020 by Giulia Laco

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

#CSSday

FONT VARIABILI: DEFINIZIONE — FONT VARIABILI: DEFINIZIONE
2020 © Giulia Laco

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

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

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

PREMESSA — PREMESSA
2020 © Giulia Laco

TYPEFACE vs. FONT — 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 — 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? — CHE COS’È UN FONT VARIABILE?
2020 © Giulia Laco

FORMATO FONT: OpenType 1.8 — FORMATO FONT: OpenType 1.8
2020 © Giulia Laco

Un font variabile è un singolo file di font che SI COMPORTA COME più font. — 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 — FONT “STATICI” VS. FONT VARIABiLI
2020 © Giulia Laco

FONT STATICI VS. FONT VARIABILE — 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]. — 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? — Chi ha voluto i font variabili?
2020 © Giulia Laco

FONT VARIABILI OpenType Font Variations — FONT VARIABILI OpenType Font Variations
MICROSOFT, APPLE, ADOBE, GOOGLE e diverse fonderie ATypI, settembre 2016 2020 © Giulia Laco

AMBITI D’USO FONT VARIABILI — 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 — DESKTOP FONTS
FONT VARIABILI 2020 © Giulia Laco

Programmi “OFFICE” — Programmi “OFFICE”
Videoscrittura, Presentazioni, ecc. Apple e Microsoft SUPPORTO PARZIALE 2020 © Giulia Laco

Programmi di grafica — Programmi di grafica
AdobePhotoshop Adobe Illustrator Adobe InDesign Sketch QuarkXPress Figma (soon) 2020 © Giulia Laco

IN PHOTOSHOP — IN PHOTOSHOP
2020 © Giulia Laco

IN ILLUSTRATOR — IN ILLUSTRATOR
Pannello carattere 2020 © Giulia Laco

IN INDESIGN — IN INDESIGN
Pannello Carattere 2020 © Giulia Laco

SYSTEM FONTS — SYSTEM FONTS
FONT VARIABILI 2020 © Giulia Laco

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

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

FONTSTACK — FONTSTACK
2020 © Giulia Laco

UI SYSTEM FONTS - VARIABLE FONTS — 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 — WEB FONTS
FONT VARIABILI 2020 © Giulia Laco

SUPPORTO DEI BROWSER — SUPPORTO DEI BROWSER
2020 © Giulia Laco

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

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

ASSI DI VARIAZIONE — ASSI DI VARIAZIONE
FONT VARIABILI 2020 © Giulia Laco

ASSI REGISTRATI vs. ASSI PERSONALIZZATI — ASSI REGISTRATI vs. ASSI PERSONALIZZATI
VARIABLE FONTS ital wdth wght opsz slnt GRAD XHGH MAHH BOHH COSA 2020 © Giulia Laco

ASSI REGISTRATI VARIABLE FONTS — 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 — ASSI REGISTRATI Asse WEIGHT
Nunito by Vernon Adams 2020 © Giulia Laco

ASSI REGISTRATI Assi WIDTH e WEIGHT — ASSI REGISTRATI Assi WIDTH e WEIGHT
Amstelvar Alpha by David Berlow 2020 © Giulia Laco

ASSI REGISTRATI Asse OPTICAL SIZE — ASSI REGISTRATI Asse OPTICAL SIZE
Amstelvar Alpha by David Berlow 2020 © Giulia Laco

ASSI REGISTRATI OPTICAL SIZE + FONT SIZE — ASSI REGISTRATI OPTICAL SIZE + FONT SIZE
Amstelvar Alpha by David Berlow 2020 © Giulia Laco

OPTICAL SIZE — OPTICAL SIZE
2020 © Giulia Laco

OPTICAL SIZE — OPTICAL SIZE
2020 © Giulia Laco

OPTICAL SIZE — OPTICAL SIZE
2020 © Giulia Laco

OPTICAL SIZE — OPTICAL SIZE
2020 © Giulia Laco

OPTICAL SIZE — OPTICAL SIZE
OK 2020 © Giulia Laco OK

ASSI REGISTRATI Asse slant — ASSI REGISTRATI Asse slant
Input Mono Beta by David Jonathan Ross 2020 © Giulia Laco

ASSI REGISTRATI Asse ITALIC — ASSI REGISTRATI Asse ITALIC
Times New Roman (static fonts) 2020 © Giulia Laco

COMBINAZIONE DI ASSI Italic + Slant — COMBINAZIONE DI ASSI Italic + Slant
Roslindale Variable Italic by David Jonathan Ross 2020 © Giulia Laco

ASSI PERSONALIZZATI — ASSI PERSONALIZZATI
2020 © Giulia Laco

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

IMPLEMENTAZIONE FONT VARIABILI — IMPLEMENTAZIONE FONT VARIABILI
2020 © Giulia Laco

PROPRIETÀ CSS (LOWLEVEL) — PROPRIETÀ CSS (LOWLEVEL)
2020 © Giulia Laco

PROPRIETÀ DI BASSO LIVELLO — 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 — PROPRIETÀ CSS MAPPATE
2020 © Giulia Laco

Mappatura proprietà css — 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 — BUGS VARIABLE FONTS
2020 © Giulia Laco https://arrowtype.github.io/vf-slnt-test/slnt-ital-tests/index.html

Attenzione ai valori da usare — 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 — PROGRESSIVE ENHANCEMENT
2020 © Giulia Laco

@FONT-FACE — @FONT-FACE
2020 © Giulia Laco

codice — 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 — FEATURE QUERY CSS
2020 © Giulia Laco

FEATURE QUERY @SUPPORTS — 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 — 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 — GOOGLE FONTS
2020 © Giulia Laco

GOOGLE FONTS UI VARIABLE FONTS — GOOGLE FONTS UI VARIABLE FONTS
2020 © Giulia Laco

NUOVA API GOOGLE FONT — 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 — FONT VARIABILI E PERFORMANCE
2020 © Giulia Laco

IL PESO DEI WEB FONT — IL PESO DEI WEB FONT
2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO — VARIABLE FONTS PERFORMANCE - PESO
FONT STATICI VS. FONT VARIABILE 2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO — VARIABLE FONTS PERFORMANCE - PESO
2020 © Giulia Laco

VARIABLE FONTS PERFORMANCE - PESO — VARIABLE FONTS PERFORMANCE - PESO
2020 © Giulia Laco

UNA GAMMA DI POSSIBILITÀ — UNA GAMMA DI POSSIBILITÀ
NAMED INSTANCES https://www.axis-praxis.org/

FORMATI COMPRESSI WOFF / WOFF2 — FORMATI COMPRESSI WOFF / WOFF2
2020 © Giulia Laco

FORMATI WOFF E WOFF 2.0 — FORMATI WOFF E WOFF 2.0
2020 © Giulia Laco

WEB FONT LOADING — WEB FONT LOADING
FOUT/FOIT 2020 © Giulia Laco

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

GOOGLE FONTS API VARIABLE FONTS — 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 — WEB FONT LOADING Font-display
2020 © Giulia Laco

WEB FONT LOADER — 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 — SUBSETTING
2020 © Giulia Laco

SUBSETTING LIMITARE IL NUMERO DI GLIFI — SUBSETTING LIMITARE IL NUMERO DI GLIFI
Controllare che la licenza lo consenta. 2020 © Giulia Laco

ANIMAZIONI CON I FONT VARIABILI — ANIMAZIONI CON I FONT VARIABILI
2020 © Giulia Laco

ANIMARE USANDO GLI ASSI — ANIMARE USANDO GLI ASSI
2020 © Giulia Laco

ANIMARE USANDO GLI ASSI — ANIMARE USANDO GLI ASSI
https://codepen.io/webmatter/pen/OJMVwEq 2020 © Giulia Laco

ANIMARE USANDO GLI ASSI — ANIMARE USANDO GLI ASSI
animazioni asse wght asse ital asse wght 2020 © Giulia Laco

FLUID WEB TYPOGRAPHY — FLUID WEB TYPOGRAPHY
2020 © Giulia Laco

FLUID WEB TYPOGRAPHY — FLUID WEB TYPOGRAPHY
RESPONSIVE WEB TYPOGRAPHY FLUID WEB TYPOGRAPHY 2020 © Giulia Laco

KEYFRAMES AL POSTO DEI BREAKPOINTS — KEYFRAMES AL POSTO DEI BREAKPOINTS
2020 © Giulia Laco

TYPETURA.JS — TYPETURA.JS
design fluido basato sui fotogrammi chiave 2020 © Giulia Laco

TYPESETTING CON I FONT VARIABILI — TYPESETTING CON I FONT VARIABILI
2020 © Giulia Laco

FINE TUNING — FINE TUNING
2020 © Giulia Laco

Enfasi nel body text — 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 — 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 — Lingue con parole lunghe
FINE TUNING VARIABLE FONTS
p { font-stretch: 100%; /tutte le lingue/}
.german p{ font-stretch: 90%; }
2020 © Giulia Laco

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

OPTICAL SIZE — OPTICAL SIZE
2020 © Giulia Laco

OPTICAL SIZE — 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
2020 © Giulia Laco

FONT PAIRING & VARIABLE FONTS — FONT PAIRING & VARIABLE FONTS
NUOVE OPPORTUNITÀ 2020 © Giulia Laco

(New) font pairing — (New) font pairing
2020 © Giulia Laco

(New) font pairing — (New) font pairing
2020 © Giulia Laco

USER EXPERIENCE — USER EXPERIENCE
2020 © Giulia Laco

L’ASSE GRADE — L’ASSE GRADE
VARIABLE FONTS 2020 © Giulia Laco

L’ASSE GRADE — L’ASSE GRADE
Gli assi di variazione https://www.axis-praxis.org/

L’ASSE GRADE — L’ASSE GRADE
Gli assi di variazione https://www.axis-praxis.org/

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

UX & SEO (FONT VARIABILI) — UX & SEO (FONT VARIABILI)
BREAKING NEWS 2020 © Giulia Laco

Core Web Vitals — 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
2020 © Giulia Laco

PROSPETTIVE — PROSPETTIVE
FONT VARIABILI 2020 © Giulia Laco

IL MERCATO DEI VARIABLE FONTS — 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
2020 © Giulia Laco

IL MERCATO DEI VARIABLE FONTS — 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 — 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 — VARIABLE COLOR FONTS
COMING SOON 2020 © Giulia Laco

VARIABLE COLOR FONTS — VARIABLE COLOR FONTS
2020 © Giulia Laco

ASSI “SUPERSLIDER” — ASSI “SUPERSLIDER”
2020 © Giulia Laco

IL MERCATO DEI VARIABLE FONTS — 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 — STRUMENTI & LUOGHI PER SPERIMENTARE
FONT VARIABILI
2020 © Giulia Laco

VARIABLE FONTS TOOLS — VARIABLE FONTS TOOLS
axis-praxis.org 2020 © Giulia Laco

VARIABLE FONTS TOOLS — VARIABLE FONTS TOOLS
v-fonts.com 2020 © Giulia Laco

VARIABLE FONTS TOOLS — VARIABLE FONTS TOOLS
FONT PLAYGROUND: play.typedetail.com 2020 © Giulia Laco

VARIABLE FONTS TOOLS — VARIABLE FONTS TOOLS
wakamaifondue.com 2020 © Giulia Laco

Buon typesetting — Buon typesetting
2020 © Giulia Laco

GRAZIE PER L’ATTENZIONE — GRAZIE PER L’ATTENZIONE
2020 © Giulia Laco

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

COLOPHON — 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

Giulia Laco
@giulialaco

1 / 126

[ITALIAN] 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.

Video

Buzz and feedback

Here’s what was said about this presentation on social media.

Font variabili? Sì grazie. – #CSSday20