A presentation at CSSday IT 2019 in in 48018 Faenza, Province of Ravenna, Italy by Giulia Laco
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
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/
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/
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
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);
2019 © Giulia Laco STRUMENTI
VARIABLE FONTS axis-praxis.org 2019 © Giulia Laco STRUMENTI
VARIABLE FONTS v-fonts.com 2019 © Giulia Laco STRUMENTI
VARIABLE FONTS play.typedetail.com 2019 © Giulia Laco STRUMENTI
VARIABLE FONTS wakamaifondue.com 2019 © Giulia Laco STRUMENTI
VARIABLE FONTS typetura.com a.js typetur 2019 © Giulia Laco STRUMENTI
FLUID (LIQUID) FLUID 2019 © Giulia Laco RESPONSIVE
FLUID WEB TYPOGRAPHY WEB TYPOGRAPHY 2019 © Giulia Laco RESPONSIVE
KEYFRAMES 2019 © Giulia Laco BREAKPOINTS
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 2019 © Giulia Laco LE POTENZIALITÀ
2019 © Giulia Laco INTERFACCE MULTIMEDIALI
VARIABLE FONTS INPUT ASSI DI VARIAZIONE: WEIGHT WIDTH 2019 © Giulia Laco Movimento del telefono
VARIABLE FONTS INPUT ASSI DI VARIAZIONE: WEIGHT WIDTH A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr 2019 © Giulia Laco Audio
INPUT Pressione ASSI DI VARIAZIONE: WEIGHT ? 2019 © Giulia Laco VARIABLE FONTS
2019 © Giulia Laco ADATTAMENTO ALL’AMBIENTE
VARIABLE FONTS 2019 © Giulia Laco L’asse GRADE
Gli assi di variazione https://www.axis-praxis.org/ L’asse GRADE
Gli assi di variazione https://www.axis-praxis.org/ L’asse GRADE
VARIABLE FONTS INPUT ASSE DI VARIAZIONE: GRADE 2019 © Giulia Laco Luce ambiente
INPUT Distanza dallo schermo ASSI DI VARIAZIONE: GRADE?, X-HEIGHT ? 2019 © Giulia Laco VARIABLE FONTS
2019 © Giulia Laco NUOVI AMBIENTI
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
2019 © Giulia Laco INFOGRAFICHE
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
2019 © Giulia Laco ANIMAZIONI (semantiche?)
2019 © Giulia Laco ACCESSIBILITà, BISOGNI PARTICOLARI
2019 © Giulia Laco ESPRESSIVITà
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
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
typesetting 2019 © Giulia Laco Buon
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
L’innovativo formato di font che sta cambiando la storia della tipografia e del web design. Incredibilmente efficace in un’ottica di ottimizzazione della performance e della progettazione responsive, il formato ha potenzialità di utilizzo creativo che spaziano dalle interfacce digitali, all’animazione del testo, all’espressione del brand in modi nuovi, prima impensabili. In un unico file un armamentario tipografico che aspetta di essere usato.
Here’s what was said about this presentation on social media.
for free. You
can too.