Variable Fonts: il futuro della tipografia è già cominciato
•
0 likes•825 views
Intervento al CSSday 15/03/2019 Faenza (Italy) ABSTRACT - 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. YouTube: https://www.youtube.com/watch?v=D2Uta2jW0GY Vimeo: https://vimeo.com/332610955 Facebook: https://www.facebook.com/watch/?v=337857423560579
Recommended
Recommended
More Related Content
Featured
Featured (20)
Variable Fonts: il futuro della tipografia è già cominciato
- 1. VARIABLE FONTS ILFUTURODELLATIPOGRAFIAÈGIÀCOMINCIATO GIULIALACO 15 marzo 2019 – FAENZA (RA)
- 3. 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 @webmatter_it Giulia Laco 2019©GiuliaLaco
- 7. Definizioni TYPEFACE FONTCarattere tipografico Singolo file 2019©GiuliaLaco TYPEFACEFAMILY Famiglia di caratteri tipografici
- 8. EVOLUZIONE TYPEFAMILIESFamiglie di caratteri tipografici 2019©GiuliaLaco tondo vs. corsivo (italic) tipi differentiinizio 1500 1700 abbiamo famiglie allargate (condesed, extended) 1900 prime famiglie di caratteri (abbinamento del corsivo al tondo)
- 9. TERMINOLOGIA ITALIANO 2019©GiuliaLaco ENGLISH STRETTISSIMO STRETTO NORMALE LARGO LARGHISSIMO COMPRESSED CONDENSED REGULAR OR MEDIUM WIDE EXTENDED CHIARISSIMO CHIARO NORMALE NERETTO NERO NERISSIMO EXTRA LIGHT LIGHT OR THIN REGULAR OR MEDIUM SEMIBOLD BOLD EXTRA BOLD OR BLACK larghezza carattere peso carattere
- 17. DISTINZIONE FONT VARIABILE 2019©GiuliaLaco FONTSTATICO OpenType 1.8 (con tabelle aggiuntive delle variazioni) OpenType TTFOTF WOFF WOFF2 -30%
- 18. DEFINIZIONE 2019©GiuliaLaco Un font variabile è un singolo file di font che si comporta come più font* * «A variable font is a single font file that behaves like multiple fonts.» —John Hudson, Sept. 2016
- 19. DIFFERENZE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html ) FILE
- 20. DIFFERENZE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE Typeface VF Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic … (Typeface Italic VF) FILE
- 23. ASSIDIVARIAZOINE ASSIPERSONALIZZATIASSIREGISTRATI CUSTOM AXESREGISTERED AXES VARIABLEFONTS wght wdth ital slnt opsz XHGH GRAD COSA BOHH MAHH 2019©GiuliaLaco
- 27. CSS VARIABLEFONTS 2019©GiuliaLaco Usare la proprietà di basso livello in attesa di CSS4 Font Module font-variation-settings
- 28. PESO&LARGHEZZA VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse peso asselarghezza wght wdth 38 250 40160
- 30. PESO&LARGHEZZA VARIABLEFONTS 2019©GiuliaLaco Cabin VF Beta asse peso asselarghezza* wght wdth 95 128 1000 * l’asse wdth qui sarebbe meglio descritto come asse di compressione
- 31. CSS VARIABLEFONTS 2019©GiuliaLaco wght wdth Cabin VF Beta 2ASSI
- 38. ITALIC VARIABLEFONTS 2019©GiuliaLaco Bree serif asse del corsivo 0 1 ital AaGg AGga AaGg AaGgTimes New Roman
- 39. INTERPOLAZIONE Imagehttps://www.alphabettes.org/responsive-variable-fonts/ …elacompatibilitàdipunti.
- 41. ITALIC&SLANT VARIABLEFONTS 2019©GiuliaLaco asse corsivo ital asse inclinazione slnt + Roslindale Variable Italic
- 43. >64.000 2019©GiuliaLaco GLI ASSI DI VARIAZIONE POSSIBILI
- 48. 2019©GiuliaLaco
- 49. 2019©GiuliaLaco 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.
- 50. 2019©GiuliaLaco Continua per altre quattro stanze
- 59. 2019©GiuliaLaco Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font? DIPENDE!
- 60. PERFORMANCE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE PESO KB KB KB KB KB KB KB KB KB KB VARIABLEFONTS
- 61. PERFORMANCE 2019©GiuliaLaco Ricordatidi - utilizzare il formato fi compressione woff2 - valutare se fare il subsetting (licenza permettendo) - utilizzare buone pratiche di web font loading VARIABLEFONTS
- 63. 2019©GiuliaLaco
- 73. FONTSTACK VARIABLEFONTS 2019©GiuliaLaco font-family: “Typeface VF”, “Typeface”, Helvetica, sans-serif; Static webfont websafe system font Variable webfont default system font (generic name) NO
- 74. FONTSTACK VARIABLEFONTS 2019©GiuliaLaco body { font-family: “Typeface”, sans-serif; } @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } Feature query
- 76. @FONT-FACE VARIABLEFONTS 2019©GiuliaLaco @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; }
- 78. DOVELITROVO? 2019©GiuliaLaco • CREATIVECLOUDDIADOBE • GOOGLEFONTSEARLYACCESS • DISTRIBUTORIDIFONT • FONDERIEINDIPENDENTI • Chiediallatuafonderiadifiducia VARIABLEFONTS
- 79. DOVELITROVO? 2019©GiuliaLaco GOOGLEFONTSEARLYACCESS @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); VARIABLEFONTS
- 89. TYPETURA 2019©GiuliaLaco KEYFRAMES mappati su qualcosa di diverso dal TEMPO BROWSER WIDTH “All the JavaScript does is write the width as a CSS variable and package the static CSS assets. ” –– Scott Kellum design fluido basato sui fotogrammi chiave cursor position scroll depth device orientation animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
- 93. 2019©GiuliaLaco INPUT VARIABLEFONTS Audio WEIGHT WIDTH ASSIDIVARIAZIONE: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr
- 100. 2019©GiuliaLaco INPUT VARIABLEFONTS Distanza dallo schermo GRADE?, X-HEIGHT ASSIDIVARIAZIONE: ?
- 102. 2019©GiuliaLaco INPUT VARIABLEFONTS Camera, dati, etc. Assi prospettici? ASSIDIVARIAZIONE: FONTPERLAREALTÀVIRTUALEOAUMENTATA Alessia Nicotra e Bruno Maag Kerning conference, Faenza 8 giugno 2018
- 104. 2019©GiuliaLaco INPUT VARIABLEFONTS Big Data WEIGHT SLANT ASSIDIVARIAZIONE: A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr
- 108. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter attivo statico calmoansioso suono suono suono suono suono
- 109. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter Vai a dormire Pensa Calmati Ridi Svegliati Agisci ora +calma+energia
- 110. @webmatter_it giulialaco giulia.laco SEGUIMI e segnalami i tuoi esperimenti con i VF GRAZIEPERL’ATTENZIONE ISCRIVITI ALLA NEWSLETTER lascia la tua mail per aggiornamenti
- 113. BALBOA PLUS FILL BalboaCondesed BalboaExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack CarlMarxregular CarlMarxbold Bree serif regular Bree serif italic