Typeface Font
Total Page:16
File Type:pdf, Size:1020Kb
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 TYPEFACE FONT Carattere tipografico Singolo file Definizioni 2019 © Giulia Laco Giulia © 2019 TYPEFACE FAMILY Famiglia di caratteri tipografici TYPE FAMILIES Famiglie di caratteri tipografici tondo vs. corsivo (italic) tipi inizio 1500 differenti prime famiglie di caratteri 1700 (abbinamento del corsivo al tondo) EVOLUZIONE 1900 abbiamo famiglie allargate (condesed, extended) Laco Giulia © 2019 ITALIANO ENGLISH larghezza carattere STRETTISSIMO COMPRESSED STRETTO CONDENSED NORMALE REGULAR OR MEDIUM LARGO WIDE LARGHISSIMO EXTENDED peso carattere CHIARISSIMO EXTRA LIGHT CHIARO LIGHT OR THIN TERMINOLOGIA NORMALE REGULAR OR MEDIUM Laco Giulia © 2019 NERETTO SEMIBOLD NERO BOLD NERISSIMO EXTRA BOLD OR BLACK 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 FONT STATICO FONT VARIABILE OpenType OpenType 1.8 (con tabelle aggiuntive delle variazioni) DISTINZIONE OTF TTF WOFF WOFF2 -30% 2019 © Giulia Laco Giulia © 2019 Un font variabile è un singolo file di font che si comporta come più font* DEFINIZIONE * «A variable font is a single font file that behaves like multiple fonts.» —John Hudson, Sept. 2016 2019 © Giulia Laco Giulia © 2019 FONT STATICI FONT VARIABILE DIFFERENZE FILE 2019 © Giulia Laco Giulia © 2019 HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html ) FONT STATICI FONT VARIABILE Typeface Roman Typeface Bold Typeface VF Typeface Italic DIFFERENZE Typeface Bold Italic (Typeface Italic VF) FILE … 2019 © Giulia Laco Giulia © 2019 GLI ASSI DI VARIAZIONE 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS ASSI DI VARIAZOINE 2019 © Giulia Laco Giulia © 2019 https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369 ASSI REGISTRATI ASSI PERSONALIZZATI REGISTERED AXES CUSTOM AXES VARIABLE FONTS wdth wght GRAD XHGH DI VARIAZOINE opsz MAHH ASSI ital BOHH slnt Laco Giulia © 2019 COSA ASSI REGISTRATI 2019 © Giulia Laco Giulia © 2019 54 wght 156 PESO asse peso VARIABLE FONTS 2019 © Giulia Laco Giulia © 2019 Nunito VARIABLE FONTS Nunito CSS wght 1 ASSE 1 2019 © Giulia Laco CSS VARIABLE FONTS font-variation-settings Usare la proprietà di basso livello in attesa di CSS4 Font Module Laco Giulia © 2019 VARIABLE FONTS Amstelvar PESO & LARGHEZZA Alpha 401 wdth 60 asse larghezza 38 wght asse peso asse 250 2019 © Giulia Laco 2 ASSI wght wdth CSS VARIABLE FONTS 2019 © Giulia Laco Giulia © 2019 Amstelvar Alpha 95 wght 128 asse peso 0 VARIABLE FONTS wdth asse larghezza* PESO & LARGHEZZA 2019 © Giulia Laco Giulia © 2019 100 Cabin VF Beta * l’asse wdth qui sarebbe meglio descritto come asse di compressione 2 ASSI wght wdth CSS VARIABLE FONTS 2019 © Giulia Laco Giulia © 2019 Cabin VF Beta opsz 10 72 SIZE asse optical-size - VARIABLE FONTS OPTICAl 2019 © Giulia Laco Giulia © 2019 Amstelvar Alpha METAL TYPE METAL OPTICAL SIZE OPTICAL https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/ 2019 © Giulia Laco 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 optical-size + Laco Giulia © 2019 CSS font-size opsz 10 72 SIZE asse optical-size - VARIABLE FONTS OPTICAl 2019 © Giulia Laco Giulia © 2019 Amstelvar Alpha 3 ASSI CSS wght wdth opsz VARIABLE FONTS 2019 © Giulia Laco Giulia © 2019 Amstelvar Alpha ital 0 1 asse del corsivo ITALIC VARIABLE FONTS Bree serif AaGg AGga Times New Roman AaGg AaGg 2019 © Giulia Laco Giulia © 2019 INTERPOLAZIONE …e …e la compatibilità di punti. Image https://www.alphabettes.org/responsive-variable-fonts/ 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 ital slnt asse corsivo + asse inclinazione VARIABLE FONTS ITALIC & SLANT & ITALIC 2019 © Giulia Laco Giulia © 2019 Roslindale Variable Italic 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 Lo voglio di un bel VERDE SOFFICE. 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. Dovrebbe essere una specie di giallo-verde-grigiastro. 2019 © Giulia Laco Giulia © 2019 Continua per altre quattro stanze 2019 © Giulia Laco Hai preso nota? Verde, blu, giallo, rosso 2019 © Giulia Laco Giulia © 2019 e bianco LE ISTANZE 2019 © Giulia Laco Giulia © 2019 VARIABLE FONTS LE ISTANZE Le scelte di chi se ne intende (i 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 Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font? DIPENDE! Laco Giulia © 2019 FONT STATICI FONT VARIABILE KB KB KB VARIABLE FONTS KB KB KB KB KB KB KB PERFORMANCE PESO Laco Giulia © 2019 Ricordati di VARIABLE FONTS - utilizzare il formato fi compressione woff2 - valutare se fare il subsetting (licenza permettendo) - utilizzare buone pratiche di web font loading PERFORMANCE 2019 © Giulia Laco Giulia © 2019 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 font-family: “Typeface VF”, “Typeface”, Helvetica, sans-serif; VARIABLE FONTS FONT STACK Variable Static websafe default system font webfont webfont system font (generic name) 2019 © Giulia Laco Giulia © 2019 NO Feature query body { VARIABLE FONTS font-family: “Typeface”, sans-serif; } FONT STACK @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } 2019 © Giulia Laco Giulia © 2019 @FONT-FACE 2019 © Giulia Laco Giulia © 2019 @font-face { font-family: “Typeface VF”; src: url(‘Typeface_VF.woff2') format('woff2-variations'), FACE /* il prossimo standard, ora per Safari */ - url(‘Typeface_VF.woff2') format('woff2'); VARIABLE FONTS /* per gli altri browser che supportano i VF*/ } @font-face { @FONT font-family: “Typeface”; src: url(‘Typeface_Regular.woff2') format('woff2'); } @font-face { font-family: “Typeface”'; src: url(‘Typeface_Bold.woff2') format('woff2'); Laco Giulia © 2019 font-weight: 700; } 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 FLUID(LIQUID) RESPONSIVE FLUID 2019 © Giulia Laco Giulia © 2019 RESPONSIVE FLUID WEB TYPOGRAPHY WEB TYPOGRAPHY 2019 © Giulia Laco Giulia © 2019 BREAKPOINTS KEYFRAMES 2019 © Giulia Laco Giulia © 2019 TYPETURA design fluido basato sui fotogrammi chiave mappati