Variable Fonts: il futuro della tipografia è già cominciato

GIULIA LACO VARIABLE FONTS IL FUTURO DELLA TIPOGRAFIA È GIÀ COMINCIATO 15 marzo 2019 – FAENZA (RA)

#CSSday #CSSday19

Mi presento Web typography Font optimisation Typography strategy Giulia Laco @webmatter_it 2019 © Giulia Laco Sono una web designer/developer, che ha iniziato con l’HTML 2.0, quindi in epoca pre-CSS. WEB TYPOGRAPHER / FONT STRATEGIST

VARIABLE FONTS 2019 © Giulia Laco DEFINIZIONE

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

2019 © Giulia Laco PREMESSA

Carattere tipografico FONT Singolo file 2019 © Giulia Laco Definizioni TYPEFACE TYPEFACE FAMILY Famiglia di caratteri tipografici

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 (condesed, extended) 2019 © Giulia Laco EVOLUZIONE TYPE FAMILIES

ENGLISH larghezza carattere COMPRESSED CONDENSED REGULAR OR MEDIUM WIDE EXTENDED STRETTISSIMO STRETTO NORMALE LARGO LARGHISSIMO peso carattere CHIARISSIMO CHIARO NORMALE NERETTO NERO NERISSIMO EXTRA LIGHT LIGHT OR THIN REGULAR OR MEDIUM SEMIBOLD BOLD EXTRA BOLD OR BLACK 2019 © Giulia Laco TERMINOLOGIA ITALIANO

2019 © Giulia Laco CHI HA VOLUTO i VARIABLE FONTS?

OpenType Font Variations 2019 © Giulia Laco VARIABLE FONTS ATypI, settembre 2016

2019 © Giulia Laco SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER (FONTE CAN I USE) Marzo 2018 9,54% 2019 © Giulia Laco Variable Fonts

SUPPORTO DEI BROWSER (FONTE CAN I USE) Ottobre 2018 70,94% 2019 © Giulia Laco Variable Fonts

SUPPORTO DEI BROWSER (FONTE CAN I USE) Marzo 2019 78,26% 2019 © Giulia Laco Variable Fonts

2019 © Giulia Laco COS’èUN VARIABLE FONT?

FONT VARIABILE OpenType OpenType 1.8 (con tabelle aggiuntive delle variazioni) OTF TTF WOFF WOFF2 -30% 2019 © Giulia Laco DISTINZIONE FONT STATICO

«A variable font is a single font file that behaves like multiple fonts.» —John Hudson, Sept. 2016 2019 © Giulia Laco DEFINIZIONE Un font variabile è un singolo file di font che si comporta come più font*

FONT VARIABILE 2019 © Giulia Laco DIFFERENZE FONT STATICI FILE HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html )

FONT VARIABILE Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic … Typeface VF (Typeface Italic VF) 2019 © Giulia Laco DIFFERENZE FILE FONT STATICI

2019 © Giulia Laco GLI ASSI DI VARIAZIONE

ASSI DI VARIAZOINE 2019 © Giulia Laco VARIABLE FONTS https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

REGISTERED AXES wght ASSIPERSONALIZZATI CUSTOM AXES wdth GRAD XHGH MAHH opsz ital slnt BOHH COSA 2019 © Giulia Laco ASSIDI VARIAZOINE VARIABLE FONTS ASSI REGISTRATI

2019 © Giulia Laco ASSI REGISTRATI

Nunito 2019 © Giulia Laco PESO VARIABLE FONTS 54 wght asse peso 156

2019 © Giulia Laco CSS VARIABLE FONTS 1 AS Nunito SE wght

CSS VARIABLE FONTS Usare la proprietà di basso livello in attesa di CSS4 Font Module 2019 © Giulia Laco font-variation-settings

Amstelvar Alpha asse larghezza wdth 60 wght asse peso 2019 © Giulia Laco 401 PESO & LARGHEZZA VARIABLE FONTS 38 250

Amstelvar Alpha 2019 © Giulia Laco CSS VARIABLE FONTS wght wdth 2 AS SI

wght asse peso 128 Cabin VF Beta * l’asse wdth qui sarebbe meglio descritto come asse di compressione 2019 © Giulia Laco asse larghezza* 0 100 wdth PESO & LARGHEZZA VARIABLE FONTS 95

Cabin VF Beta 2019 © Giulia Laco CSS VARIABLE FONTS wght wdth 2 AS SI

2019 © Giulia Laco OPTICAl-SIZE VARIABLE FONTS 10 Amstelvar Alpha opsz 72 asse optical-size

2019 © Giulia Laco https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/ OPTICAL SIZE METAL TYPE

OPTICAL SIZE 2019 © Giulia Laco FONT E DIMENSIONI https://dashboard.typography.com/user-guide/choosing-fonts https://www.webtype.com/ https://www.myfonts.com/fonts/positype/scotch/

CSS font-size 2019 © Giulia Laco asse optical-size

2019 © Giulia Laco OPTICAl-SIZE VARIABLE FONTS 10 Amstelvar Alpha opsz 72 asse optical-size

2019 © Giulia Laco CSS VARIABLE FONTS 3 AS Amstelvar Alpha wght wdth SI opsz

Times New Roman 1 asse del corsivo AaGg AaGg AGga AaGg 2019 © Giulia Laco ITALIC VARIABLE FONTS Bree serif ital 0

INTERPOLAZIONE Image https://www.alphabettes.org/responsive-variable-fonts/ …e la compatibilità di punti.

Per una corretta interpolazione fra diversi tracciati occorre avere una compatibilità di punti. Non necessariamente ciò si verifica fra due stili di font tradizionalmente inseriti nella stessa famiglia tipografica. 2019 © Giulia Laco INTERPOLAZIONE

asse corsivo + slnt asse inclinazione 2019 © Giulia Laco ITALIC &SLANT VARIABLE FONTS ital Roslindale Variable Italic

2019 © Giulia Laco ASSI PERSONALIZZATI

64.000 2019 © Giulia Laco GLI ASSI DI VARIAZIONE POSSIBILI

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

David Jonathan Ross: https://djr.com/notes/first-variable-font/

https://create.adobe.com/2018/5/22/variable_fonts_are_t.html

2019 © Giulia Laco

Lo voglio di un bel VERDE SOFFICE. Dovrebbe essere una specie di giallo-verde-grigiastro. 2019 © Giulia Laco Non un verde-blu come le uova del pettirosso, ma neppure un verde-giallastro come i boccioli del narciso. Ora l’unico campione che ho qui è un po’ troppo giallo, ma non vorrei che si andasse all’estremo opposto e si facesse troppo blu.

2019 © Giulia Laco Continua per altre quattro stanze

Verde, blu, giallo, rosso e bianco 2019 © Giulia Laco Hai preso nota?

2019 © Giulia Laco LE ISTANZE

LE ISTANZE 2019 © Giulia Laco VARIABLE FONTS Le scelte di chi se ne intende (i type designer)

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

VARIABLE FONTS 2019 © Giulia Laco I VANTAGGI

2019 © Giulia Laco PERFORMANCE

DIPENDE! 2019 © Giulia Laco Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font?

FONT VARIABILE KB KB KB KB KB KB KB KB KB KB 2019 © Giulia Laco VARIABLE FONTS PERFORMANCE PESO FONT STATICI

utilizzare il formato fi compressione woff2 - valutare se fare il subsetting (licenza permettendo) - utilizzare buone pratiche di web font loading 2019 © Giulia Laco PERFORMANCE VARIABLE FONTS Ricordati di

2019 © Giulia Laco OPTICAL SIZE

2019 © Giulia Laco

2019 © Giulia Laco FINE TUNING

2019 © Giulia Laco ADATTAMENTO ALLE LINGUE

2019 © Giulia Laco RESPONSIVE / FLUID WEB

VARIABLE FONTS 2019 © Giulia Laco GLI SVANTAGGI

2019 © Giulia Laco LA SCELTA

2019 © Giulia Laco IL COSTO

IL POTENZIALE CRIMINALE J 2019 © Giulia Laco Crimini tipografici

VARIABLE FONTS 2019 © Giulia Laco L’IMPLEMENTAZIONE

2019 © Giulia Laco FALLBACK: FONT STACK

“Typeface VF”, “Typeface”, Helvetica, sans-serif; Variable webfont Static webfont NO websafe system font default system font (generic name) 2019 © Giulia Laco FONT STACK VARIABLE FONTS font-family:

body { font-family: “Typeface”, sans-serif; } @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } 2019 © Giulia Laco FONT STACK VARIABLE FONTS Feature query

2019 © Giulia Laco @FONT-FACE

2019 © Giulia Laco @FONT-FACE VARIABLE FONTS @font-face { font-family: “Typeface VF”; src: url(‘Typeface_VF.woff2’) format(‘woff2-variations’), /* il prossimo standard, ora per Safari / url(‘Typeface_VF.woff2’) format(‘woff2’); / per gli altri browser che supportano i VF*/ } @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; }

2019 © Giulia Laco DOVE LI TROVO?

VARIABLE FONTS • • • • • CREATIVE CLOUD DI ADOBE GOOGLE FONTS EARLY ACCESS DISTRIBUTORI DI FONT FONDERIE INDIPENDENTI Chiedi alla tua fonderia di fiducia 2019 © Giulia Laco DOVE LI TROVO?

VARIABLE FONTS DOVE LI TROVO? GOOGLE FONTS EARLY ACCESS @import url(https://fonts.googleapis.com/earlyaccess/cabinvfbeta.css); @import url(https://fonts.googleapis.com/earlyaccess/nunitovfbeta.css); 2019 © Giulia Laco @import url(https://fonts.googleapis.com/earlyaccess/amstelvaralpha.css);

KEYFRAMES design fluido basato sui fotogrammi chiave mappati su qualcosa di diverso dal TEMPO BROWSER WIDTH scroll depth cursor position device orientation animation: var(—tt-key) 1s var(—tt-ease) 1 calc(-1s*var(—tt-bind)/var(—tt-max)) paused; “All the JavaScript does is write the width as a CSS variable and package the static CSS assets. ” –– Scott Kellum 2019 © Giulia Laco TYPETURA

VARIABLE FONTS INPUT ASSI DI VARIAZIONE: WEIGHT WIDTH A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr 2019 © Giulia Laco Audio

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

VARIABLE FONTS INPUT FONT PER LA REALTÀ VIRTUALE O AUMENTATA 2019 © Giulia Laco Camera, dati, etc. ASSI DI VARIAZIONE: Assi prospettici? Alessia Nicotra e Bruno Maag Kerning conference, Faenza 8 giugno 2018

VARIABLE FONTS INPUT 2019 © Giulia Laco Big Data ASSI DI VARIAZIONE: WEIGHT SLANT A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr

VARIABLE FONTS ansioso ESPRESSIVITà Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter suono suono attivo statico 2019 © Giulia Laco suono suono calmo suono

VARIABLE FONTS ESPRESSIVITà Agisci ora Svegliati

energia Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter Calmati Vai a dormire

GRAZIE PER L’ATTENZIONE SEGUIMI e segnalami i tuoi esperimenti con i VF @webmatter_it giulialaco giulia.laco ISCRIVITI ALLA NEWSLETTER lascia la tua mail per aggiornamenti

FEEDBACK https://joind.in/talk/c7c27

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 serif italic