GIULIA LACO
VARIABLE FONTS IL FUTURO DELLA TIPOGRAFIA È GIÀ COMINCIATO
15 marzo 2019 – FAENZA (RA) #CSSday #CSSday19 Mi presento
Sono una web designer/developer, che ha iniziato con l’HTML 2.0, quindi in epoca pre-CSS. WEB TYPOGRAPHER / FONT STRATEGIST
Web typography Font optimisation Typography strategy
Giulia Laco @webmatter_it 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS DEFINIZIONE 2019 © Giulia Laco Giulia © 2019 Jason Pamental https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/ PREMESSA 2019 © Giulia Laco Giulia © 2019 Definizioni TYPEFACE Carattere tipografico Carattere caratteri tipografici di Famiglia TYPEFACE FAMILY FONT Singolo Singolo file
2019 © Giulia Laco EVOLUZIONE TYPE FAMILIESTYPE Famiglie di caratteri tipografici caratteri di Famiglie inizio 1900 1700 1500 ( allargate famiglie abbiamo (abbinamento del corsivo al tondo) dicaratteri famiglie prime differenti ( tondo corsivo vs. condesed , extended italic ) ) tipi
2019 © Giulia Laco TERMINOLOGIA NERISSIMO NERO NERETTO NORMALE CHIARO CHIARISSIMO LARGHISSIMO LARGO NORMALE STRETTO STRETTISSIMO ITALIANO larghezza carattere larghezza peso carattere ENGLISH EXTRA BOLD BOLD SEMIBOLD REGULAR LIGHT LIGHT EXTRA LIGHT REGULAR REGULAR CONDENSED COMPRESSED EXTENDED WIDE ORTHIN ORMEDIUM ORMEDIUM ORBLACK
2019 © Giulia Laco CHI HA VOLUTO i VARIABLE FONTS? 2019 © Giulia Laco Giulia © 2019 OpenTypeFont Variations VARIABLE FONTS 2019 © Giulia Laco Giulia © 2019
ATypI, settembre 2016 SUPPORTO DEI BROWSER 2019 © Giulia Laco Giulia © 2019 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Marzo 2018 9,54% 2019 © Giulia Laco Giulia © 2019 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Ottobre 2018 70,94% 2019 © Giulia Laco Giulia © 2019 SUPPORTO DEI BROWSER (FONTE CAN I USE) Variable Fonts Marzo 2019 78,26% 2019 © Giulia Laco Giulia © 2019 COS’èUN VARIABLE FONT? 2019 © Giulia Laco Giulia © 2019 DISTINZIONE FONT STATICO OpenType OTF TTF WOFF (con tabelle aggiuntive delle variazioni) FONT VARIABILE WOFF2 - OpenType 30% 1.8
2019 © Giulia Laco DEFINIZIONE che si font di è file un singolo variabile Un font * «A «A * variable comporta font font is a single font file font single a come come più font* that behaves —JohnHudson, like multiple fonts Sept . 2016. .»
2019 © Giulia Laco FILE DIFFERENZE HT to Oliver Schöndorfer FONT STATICI ( https://www.zeichenschatz.net/typografie/how FONT VARIABILE - to- start - with - variable - fonts - on - the - web.html )
2019 © Giulia Laco FILE DIFFERENZE Typeface Typeface Typeface Typeface … FONT STATICI Italic Roman Bold Bold Italic FONT VARIABILE ( Typeface Typeface Italic VF VF)
2019 © Giulia Laco GLI ASSI DI VARIAZIONE 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS ASSI DI VARIAZOINE https://medium.com/variable - fonts/https - medium - com - tiro - introducing - opentype - variable - fonts - 12ba6cd2369
2019 © Giulia Laco VARIABLE FONTS ASSIDI VARIAZOINE opsz ASSI REGISTRATI ASSI wght REGISTERED AXES REGISTERED slnt wdth ital ASSI PERSONALIZZATI ASSI COSA BOHH CUSTOM AXES MAHH XHGH GRAD
2019 © Giulia Laco ASSI REGISTRATI 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
Nunito PESO 54 wght asse peso 156
2019 © Giulia Laco VARIABLE FONTS
Nunito CSS
wght 1 ASSE 1
2019 © Giulia Laco VARIABLE FONTS CSS font Usare la proprietà di basso livello in attesa di CSS4 Font - variation - settings Module
2019 © Giulia Laco VARIABLE FONTS
Amstelvar PESO & LARGHEZZA Alpha
401 wdth 60 asse larghezza 38 wght asse peso 250
2019 © Giulia Laco VARIABLE FONTS
Amstelvar CSS Alpha wght
wdth 2 ASSI 2
2019 © Giulia Laco VARIABLE FONTS Cabin * l’asse wdth PESO & LARGHEZZA VFBeta qui sarebbe meglioqui descritto sarebbe di come compressione asse
100 wdth 0 asse larghezza* 95 wght asse peso 128
2019 © Giulia Laco VARIABLE FONTS
Cabin CSS VFBeta wght
wdth 2 ASSI 2
2019 © Giulia Laco VARIABLE FONTS
Amstelvar OPTICAl-SIZE Alpha 10 asse opsz optical - size 72
2019 © Giulia Laco OPTICAL SIZE METAL TYPE 417693/ - set - font - set - lead - letters - 2019 © Giulia Laco Giulia © 2019 https://pixabay.com/photos/typecases OPTICAL SIZE FONT E DIMENSIONI 2019 © Giulia Laco Giulia © 2019
https://dashboard.typography.com/user-guide/choosing-fonts https://www.webtype.com/ https://www.myfonts.com/fonts/positype/scotch/ asse CSS font CSS optical + - size - size
2019 © Giulia Laco VARIABLE FONTS
Amstelvar OPTICAl-SIZE Alpha 10 asse opsz optical - size 72
2019 © Giulia Laco VARIABLE FONTS
Amstelvar CSS Alpha wght wdth
opsz 3 ASSI 3
2019 © Giulia Laco VARIABLE FONTS Times New Roman Bree ITALIC serif AaGg AaGg 0 asse del corsivo del asse ital AaGg AGga 1
2019 © Giulia Laco INTERPOLAZIONE fonts/
…e la compatibilità di punti. - variable - Image https://www.alphabettes.org/responsive Image INTERPOLAZIONE
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 Giulia © 2019 VARIABLE FONTS
Roslindale ITALIC & SLANT Variable Italic asse corsivo asse ital + asse inclinazione asse slnt
2019 © Giulia Laco ASSI PERSONALIZZATI 2019 © Giulia Laco Giulia © 2019 GLI ASSI DI VARIAZIONE POSSIBILI > 64.000 2019 © Giulia Laco Giulia © 2019 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/ 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 andasse all’estremo opposto e si facesse facesse si e opposto all’estremo andasse ma neppure un un neppure ma giallo Dovrebbe essere una specie di troppo blu unNon bel un di voglio Lo è unè po’ Ora l’unico campione che ho qui narciso. del boccioli - - verde troppo giallo verde . blu - verde - grigiastro come le uovacomele delpettirosso, , ma non vorrei che si si che vorrei non ma , giallastro VERDE SOFFICE . comei .
2019 © Giulia Laco Continua per altre quattro stanze quattro altre per Continua
2019 © Giulia Laco Hai preso nota? e bianco e giallo, blu, Verde, rosso
2019 © Giulia Laco
LE ISTANZE 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS LE ISTANZE Le scelte di chi se ne intende (i (i intende ne se chi di scelte Le type designer)
2019 © Giulia Laco https://www.axis-praxis.org/ https://www.axis-praxis.org/ VARIABLE FONTS I VANTAGGI 2019 © Giulia Laco Giulia © 2019 PERFORMANCE 2019 © Giulia Laco Giulia © 2019 font? di caricamento dei web migliorano la OpenTypeformato Le «font variations DIPENDE performance 1.8 1.8 » del !
2019 © Giulia Laco VARIABLE FONTS PESO PERFORMANCE FONT STATICI KB KB KB KB KB KB KB KB KB FONT VARIABILE KB
2019 © Giulia Laco VARIABLE FONTS PERFORMANCE - - - utilizzare buone pratiche di buone utilizzare se fare subsetting valutare il utilizzare il il formato compressioneutilizzare fi Ricordati di web web font (licenza permettendo) (licenza woff2 loading
2019 © Giulia Laco OPTICAL SIZE 2019 © Giulia Laco Giulia © 2019 2019 © Giulia Laco FINE TUNING 2019 © Giulia Laco Giulia © 2019 ADATTAMENTO ALLE LINGUE 2019 © Giulia Laco Giulia © 2019 RESPONSIVE / FLUID WEB 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS GLI SVANTAGGI 2019 © Giulia Laco Giulia © 2019 LA SCELTA 2019 © Giulia Laco Giulia © 2019 IL COSTO 2019 © Giulia Laco Giulia © 2019 IL POTENZIALE CRIMINALE J Crimini tipografici 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS L’IMPLEMENTAZIONE 2019 © Giulia Laco Giulia © 2019 FALLBACK: FONT STACK 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS FONT STACK webfont Variable font “ Typeface - family: VF webfont ”, ”, “Typeface Static NO ”, ”, system Helvetica websafe font font , sans - default default serif ( generic ; system name font )
2019 © Giulia Laco VARIABLE FONTS FONT STACK Feature } body { body } @ font } body { body font supports - family: “ family: - family: “ family: query (font Typeface Typeface - variation- ”, ”, sans VF ”, ”, sans settings - serif - serif ; : normal ; ) {
2019 © Giulia Laco @FONT-FACE 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS @FONT-FACE @font } } @font } @font src font font src font font src /* per gli altri browser che supportano i VF*/ i supportano che browser altri gli /*per url standard, per ora Safari/* */ prossimo il : : : - - - - url url url family: “ family: weight family: “ family: family: “ family: - - - (‘ face { face { face { Typeface_VF.woff2 (‘ (‘ (‘ Typeface_Bold.woff2 Typeface_Regular.woff2 Typeface_VF.woff2 : 700; Typeface Typeface Typeface ”'; ”; VF ”; ') format('woff2'); ') ') format('woff2 ') ') format('woff2'); ') ') format('woff2'); ') - variations'),
2019 © Giulia Laco DOVE LI TROVO? 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS DOVE LI TROVO?
• CREATIVE CLOUD DI ADOBE • GOOGLE FONTS EARLY ACCESS • DISTRIBUTORI DI FONT • FONDERIE INDIPENDENTI • Chiedi alla tua fonderia di fiducia 2019 © Giulia Laco Giulia © 2019 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/amstelvaralpha.css); @import url(https://fonts.googleapis.com/earlyaccess/nunitovfbeta.css); 2019 © Giulia Laco Giulia © 2019 STRUMENTI 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
STRUMENTI axis-praxis.org 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
STRUMENTI v-fonts.com 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
STRUMENTI play.typedetail.com 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
STRUMENTI wakamaifondue.com 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS
STRUMENTI typetura.com
typetura.js 2019 © Giulia Laco Giulia © 2019 RESPONSIVE FLUID (LIQUID) FLUID
2019 © Giulia Laco WEB TYPOGRAPHY WEB RESPONSIVE WEB TYPOGRAPHY WEB FLUID
2019 © Giulia Laco BREAKPOINTS KEYFRAMES
2019 © Giulia Laco TYPETURA design fluido basato sui fotogrammi chiave
mappati su qualcosa KEYFRAMES di diverso dal TEMPO BROWSER WIDTH
scroll depth cursor position device orientation 2019 © Giulia Laco Giulia © 2019
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 VARIABLE FONTS LE POTENZIALITÀ 2019 © Giulia Laco Giulia © 2019 INTERFACCE MULTIMEDIALI 2019 © Giulia Laco Giulia © 2019 WEIGHT WIDTH WEIGHT VARIAZIONE: ASSI DI telefono Movimento INPUT VARIABLE FONTS VARIABLE del
2019 © Giulia Laco WEIGHT WIDTH WEIGHT VARIAZIONE: ASSI DI Audio INPUT VARIABLE FONTS VARIABLE A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr
2019 © Giulia Laco WEIGHT VARIAZIONE: ASSI DI Pressione INPUT VARIABLE FONTS VARIABLE ?
2019 © Giulia Laco ADATTAMENTO ALL’AMBIENTE 2019 © Giulia Laco Giulia © 2019 L’asse GRADE L’asse VARIABLE FONTS VARIABLE
2019 © Giulia Laco Gli assi di variazione L’asse GRADE praxis.org/ - https://www.axis Gli assi di variazione L’asse GRADE praxis.org/ - https://www.axis GRADE ASSEVARIAZIONE: DI Luce INPUT VARIABLE FONTS VARIABLE ambiente
2019 © Giulia Laco X- GRADE?, VARIAZIONE: ASSI DI schermo Distanza INPUT VARIABLE FONTS VARIABLE HEIGHT dallo ?
2019 © Giulia Laco NUOVI AMBIENTI 2019 © Giulia Laco Giulia © 2019 prospettici A VARIAZIONE: ASSI DI dati Camera, INPUT VARIABLE FONTS VARIABLE ssi , etc., ? FONT PER LA REALTÀ VIRTUALE O AUMENTATA O VIRTUALE PER REALTÀ FONT LA Kerning conference, Faenza 8 giugno 2018conference, 8 giugno Faenza Alessia Nicotra e Bruno Maag e Bruno
2019 © Giulia Laco INFOGRAFICHE 2019 © Giulia Laco Giulia © 2019 SLANT WEIGHT VARIAZIONE: ASSI DI Big Data INPUT VARIABLE FONTS VARIABLE A pen by François by François Poizet https://codepen.io/FranzPoize/pen/ayYevr
2019 © Giulia Laco ANIMAZIONI (semantiche?) 2019 © Giulia Laco Giulia © 2019 ACCESSIBILITà, BISOGNI PARTICOLARI 2019 © Giulia Laco Giulia © 2019 ESPRESSIVITà 2019 © Giulia Laco Giulia © 2019 ESPRESSIVITà VARIABLE FONTS VARIABLE attivo attivo statico suono suono suono suono suono Sara Esercizio liberamente ispirato a ispirato liberamente Esercizio Hyndman calmo ansioso , Why Fonts Matter
2019 © Giulia Laco ESPRESSIVITà VARIABLE FONTS VARIABLE Vai a dormire a Vai Calmati Pensa Ridi Svegliati Agisci ora Sara
+ calma + energia a ispirato liberamente Esercizio Hyndman , Why Fonts Matter
2019 © Giulia Laco GRAZIE PER L’ATTENZIONE SEGUIMI e segnalami i tuoi esperimenti con i VF
@webmatter_it
giulialaco ISCRIVITI ALLA NEWSLETTER giulia.laco lascia la tua mail per aggiornamenti FEEDBACK https://joind.in/talk/c7c27 Buon typesetting Laco Giulia © 2019 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 Marxbold
Bree serif regular Bree serif italic