Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
VARIABLE FONTS
ILFUTURODELLATIPOGRAFIAÈGIÀCOMINCIATO
GIULIALACO
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 / FO...
DEFINIZIONE
2019©GiuliaLaco
VARIABLE FONTS
JasonPamental
https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
PREMESSA
2019©GiuliaLaco
Definizioni TYPEFACE FONTCarattere tipografico Singolo file
2019©GiuliaLaco
TYPEFACEFAMILY
Famiglia di
caratteri tipografi...
EVOLUZIONE TYPEFAMILIESFamiglie di caratteri tipografici
2019©GiuliaLaco
tondo vs. corsivo (italic) tipi
differentiinizio ...
TERMINOLOGIA ITALIANO
2019©GiuliaLaco
ENGLISH
STRETTISSIMO
STRETTO
NORMALE
LARGO
LARGHISSIMO
COMPRESSED
CONDENSED
REGULAR ...
CHIHAVOLUTO
iVARIABLEFONTS?
2019©GiuliaLaco
VARIABLEFONTS
OpenTypeFontVariations
2019©GiuliaLaco
ATypI,settembre2016
SUPPORTODEIBROWSER
2019©GiuliaLaco
Variable Fonts
SUPPORTO DEIBROWSER(FONTECANIUSE)
9,54%
Marzo2018
2019©GiuliaLaco
Variable Fonts
SUPPORTO DEIBROWSER(FONTECANIUSE)
70,94%
Ottobre2018
2019©GiuliaLaco
Variable Fonts
SUPPORTO DEIBROWSER(FONTECANIUSE)
78,26%
Marzo2019
2019©GiuliaLaco
COS’èUNVARIABLEFONT?
2019©GiuliaLaco
DISTINZIONE FONT VARIABILE
2019©GiuliaLaco
FONTSTATICO
OpenType 1.8
(con tabelle aggiuntive delle variazioni)
OpenType
TTF...
DEFINIZIONE
2019©GiuliaLaco
Un font variabile è un singolo file di font
che si comporta come più font*
* «A variable font ...
DIFFERENZE
2019©GiuliaLaco
FONTSTATICI FONTVARIABILE
HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/ho...
DIFFERENZE
2019©GiuliaLaco
FONTSTATICI FONTVARIABILE
Typeface VF
Typeface Roman
Typeface Bold
Typeface Italic
Typeface Bol...
GLIASSIDIVARIAZIONE
2019©GiuliaLaco
2019©GiuliaLaco
https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369
AS...
ASSIDIVARIAZOINE
ASSIPERSONALIZZATIASSIREGISTRATI
CUSTOM AXESREGISTERED AXES
VARIABLEFONTS
wght wdth
ital
slnt
opsz
XHGH
G...
ASSIREGISTRATI
2019©GiuliaLaco
PESO
VARIABLEFONTS
2019©GiuliaLaco
Nunito
asse peso
54 156
wght
CSS
VARIABLEFONTS
2019©GiuliaLaco
Nunito
wght
1ASSE
CSS
VARIABLEFONTS
2019©GiuliaLaco
Usare la proprietà di basso livello in attesa di CSS4 Font Module
font-variation-settings
PESO&LARGHEZZA
VARIABLEFONTS
2019©GiuliaLaco
Amstelvar Alpha
asse peso
asselarghezza
wght
wdth
38 250
40160
CSS
VARIABLEFONTS
2019©GiuliaLaco
wght wdth
Amstelvar Alpha
2ASSI
PESO&LARGHEZZA
VARIABLEFONTS
2019©GiuliaLaco
Cabin VF Beta
asse peso
asselarghezza*
wght
wdth
95 128
1000
* l’asse wdth qu...
CSS
VARIABLEFONTS
2019©GiuliaLaco
wght wdth
Cabin VF Beta
2ASSI
OPTICAl-SIZE
VARIABLEFONTS
2019©GiuliaLaco
Amstelvar Alpha
asse optical-size
10 72
opsz
METALTYPE
2019©GiuliaLaco
OPTICALSIZE
https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/
FONTEDIMENSIONI
2019©GiuliaLaco
OPTICALSIZE
https://www.myfonts.com/fonts/positype/scotch/https://www.webtype.com/https://...
2019©GiuliaLaco
asse optical-size
+
CSS font-size
OPTICAl-SIZE
VARIABLEFONTS
2019©GiuliaLaco
Amstelvar Alpha
asse optical-size
10 72
opsz
CSS
VARIABLEFONTS
2019©GiuliaLaco
Amstelvar Alpha
3ASSI
wght wdth opsz
ITALIC
VARIABLEFONTS
2019©GiuliaLaco
Bree serif
asse del corsivo
0 1
ital
AaGg AGga
AaGg AaGgTimes New Roman
INTERPOLAZIONE
Imagehttps://www.alphabettes.org/responsive-variable-fonts/
…elacompatibilitàdipunti.
INTERPOLAZIONE
Perunacorrettainterpolazionefra
diversitracciatioccorreavereuna
compatibilitàdipunti.
Nonnecessariamenteciò...
ITALIC&SLANT
VARIABLEFONTS
2019©GiuliaLaco
asse corsivo
ital
asse inclinazione
slnt
+
Roslindale Variable Italic
ASSIPERSONALIZZATI
2019©GiuliaLaco
>64.000
2019©GiuliaLaco
GLI ASSI DI VARIAZIONE POSSIBILI
RicardoMagalhães
https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
DavidJonathanRoss:https://djr.com/notes/first-variable-font/
DavidJonathanRoss:https://djr.com/notes/first-variable-font/
https://create.adobe.com/2018/5/22/variable_fonts_are_t.html
2019©GiuliaLaco
2019©GiuliaLaco
Lo voglio di un bel VERDE SOFFICE.
Non un verde-blu come le uova del pettirosso,
ma neppure un verde-giall...
2019©GiuliaLaco
Continua per altre quattro stanze
2019©GiuliaLaco
Hai preso nota?
Verde,
blu,
giallo,
rosso
e bianco
LEISTANZE
2019©GiuliaLaco
LEISTANZE
VARIABLEFONTS
2019©GiuliaLaco
Lesceltedichiseneintende(itypedesigner)
https://www.axis-praxis.org/
https://www.axis-praxis.org/
IVANTAGGI
VARIABLE FONTS
2019©GiuliaLaco
PERFORMANCE
2019©GiuliaLaco
2019©GiuliaLaco
Le «font variations» del
formato OpenType 1.8
migliorano la performance
di caricamento dei web
font?
DIPEN...
PERFORMANCE
2019©GiuliaLaco
FONTSTATICI FONTVARIABILE
PESO
KB
KB KB KB
KB KB KB
KB KB KB
VARIABLEFONTS
PERFORMANCE
2019©GiuliaLaco
Ricordatidi
- utilizzare il formato fi compressione woff2
- valutare se fare il subsetting (li...
OPTICALSIZE
2019©GiuliaLaco
2019©GiuliaLaco
FINETUNING
2019©GiuliaLaco
ADATTAMENTOALLELINGUE
2019©GiuliaLaco
RESPONSIVE/FLUIDWEB
2019©GiuliaLaco
GLISVANTAGGI
VARIABLE FONTS
2019©GiuliaLaco
LASCELTA
2019©GiuliaLaco
ILCOSTO
2019©GiuliaLaco
ILPOTENZIALECRIMINALEJ
2019©GiuliaLaco
Criminitipografici
L’IMPLEMENTAZIONE
2019©GiuliaLaco
VARIABLE FONTS
FALLBACK:FONTSTACK
2019©GiuliaLaco
FONTSTACK
VARIABLEFONTS
2019©GiuliaLaco
font-family:
“Typeface VF”, “Typeface”, Helvetica, sans-serif;
Static
webfont
webs...
FONTSTACK
VARIABLEFONTS
2019©GiuliaLaco
body {
font-family: “Typeface”, sans-serif;
}
@supports (font-variation-settings: ...
@FONT-FACE
2019©GiuliaLaco
@FONT-FACE
VARIABLEFONTS
2019©GiuliaLaco
@font-face {
font-family: “Typeface VF”;
src: url(‘Typeface_VF.woff2') format('wo...
DOVELITROVO?
2019©GiuliaLaco
DOVELITROVO?
2019©GiuliaLaco
• CREATIVECLOUDDIADOBE
• GOOGLEFONTSEARLYACCESS
• DISTRIBUTORIDIFONT
• FONDERIEINDIPENDENTI
•...
DOVELITROVO?
2019©GiuliaLaco
GOOGLEFONTSEARLYACCESS
@import url(https://fonts.googleapis.com/earlyaccess/cabinvfbeta.css);...
STRUMENTI
2019©GiuliaLaco
STRUMENTI
2019©GiuliaLaco
axis-praxis.org
VARIABLEFONTS
STRUMENTI
2019©GiuliaLaco
v-fonts.com
VARIABLEFONTS
STRUMENTI
2019©GiuliaLaco
play.typedetail.com
VARIABLEFONTS
STRUMENTI
2019©GiuliaLaco
wakamaifondue.com
VARIABLEFONTS
STRUMENTI
2019©GiuliaLaco
typetura.com
VARIABLEFONTS
typetura.js
2019©GiuliaLaco
RESPONSIVE FLUID
FLUID(LIQUID)
2019©GiuliaLaco
RESPONSIVE
WEBTYPOGRAPHY
FLUID
WEBTYPOGRAPHY
2019©GiuliaLaco
BREAKPOINTS KEYFRAMES
TYPETURA
2019©GiuliaLaco
KEYFRAMES
mappati su qualcosa
di diverso dal TEMPO BROWSER WIDTH
“All the JavaScript does is writ...
LEPOTENZIALITÀ
2019©GiuliaLaco
VARIABLE FONTS
INTERFACCEMULTIMEDIALI
2019©GiuliaLaco
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Movimento del
telefono
WEIGHT WIDTH
ASSIDIVARIAZIONE:
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Audio
WEIGHT WIDTH
ASSIDIVARIAZIONE: A pen by Peter Barr https://codepen.io/petebarr/f...
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Pressione
WEIGHT
ASSIDIVARIAZIONE:
?
ADATTAMENTOALL’AMBIENTE
2019©GiuliaLaco
2019©GiuliaLaco
L’asseGRADE
VARIABLEFONTS
L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/
L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Luce ambiente
GRADE
ASSEDIVARIAZIONE:
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Distanza dallo
schermo
GRADE?,
X-HEIGHT
ASSIDIVARIAZIONE:
?
NUOVIAMBIENTI
2019©GiuliaLaco
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Camera,
dati, etc.
Assi
prospettici?
ASSIDIVARIAZIONE:
FONTPERLAREALTÀVIRTUALEOAUMENTA...
INFOGRAFICHE
2019©GiuliaLaco
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Big Data
WEIGHT
SLANT
ASSIDIVARIAZIONE:
A pen by François Poizet https://codepen.io/Fr...
ANIMAZIONI(semantiche?)
2019©GiuliaLaco
ACCESSIBILITà,
BISOGNIPARTICOLARI
2019©GiuliaLaco
ESPRESSIVITà
2019©GiuliaLaco
2019©GiuliaLaco
ESPRESSIVITà
VARIABLEFONTS
Esercizio liberamente ispirato a
Sara Hyndman, Why Fonts Matter
attivo statico
...
2019©GiuliaLaco
ESPRESSIVITà
VARIABLEFONTS
Esercizio liberamente ispirato a
Sara Hyndman, Why Fonts Matter
Vai a dormire
P...
@webmatter_it
giulialaco
giulia.laco
SEGUIMI
e segnalami i tuoi
esperimenti con i VF
GRAZIEPERL’ATTENZIONE
ISCRIVITI ALLA ...
FEEDBACK
https://joind.in/talk/c7c27
Buon
typesetting
2019©GiuliaLaco
BALBOA PLUS FILL
BalboaCondesed
BalboaExtraCondesed
Balboa UltraLight
Balboa Light
Balboa Medium
Balboa Bold
Balboa ExtraB...
Variable Fonts: il futuro della tipografia è già cominciato
Upcoming SlideShare
Loading in …5
×

of

Variable Fonts: il futuro della tipografia è già cominciato Slide 1 Variable Fonts: il futuro della tipografia è già cominciato Slide 2 Variable Fonts: il futuro della tipografia è già cominciato Slide 3 Variable Fonts: il futuro della tipografia è già cominciato Slide 4 Variable Fonts: il futuro della tipografia è già cominciato Slide 5 Variable Fonts: il futuro della tipografia è già cominciato Slide 6 Variable Fonts: il futuro della tipografia è già cominciato Slide 7 Variable Fonts: il futuro della tipografia è già cominciato Slide 8 Variable Fonts: il futuro della tipografia è già cominciato Slide 9 Variable Fonts: il futuro della tipografia è già cominciato Slide 10 Variable Fonts: il futuro della tipografia è già cominciato Slide 11 Variable Fonts: il futuro della tipografia è già cominciato Slide 12 Variable Fonts: il futuro della tipografia è già cominciato Slide 13 Variable Fonts: il futuro della tipografia è già cominciato Slide 14 Variable Fonts: il futuro della tipografia è già cominciato Slide 15 Variable Fonts: il futuro della tipografia è già cominciato Slide 16 Variable Fonts: il futuro della tipografia è già cominciato Slide 17 Variable Fonts: il futuro della tipografia è già cominciato Slide 18 Variable Fonts: il futuro della tipografia è già cominciato Slide 19 Variable Fonts: il futuro della tipografia è già cominciato Slide 20 Variable Fonts: il futuro della tipografia è già cominciato Slide 21 Variable Fonts: il futuro della tipografia è già cominciato Slide 22 Variable Fonts: il futuro della tipografia è già cominciato Slide 23 Variable Fonts: il futuro della tipografia è già cominciato Slide 24 Variable Fonts: il futuro della tipografia è già cominciato Slide 25 Variable Fonts: il futuro della tipografia è già cominciato Slide 26 Variable Fonts: il futuro della tipografia è già cominciato Slide 27 Variable Fonts: il futuro della tipografia è già cominciato Slide 28 Variable Fonts: il futuro della tipografia è già cominciato Slide 29 Variable Fonts: il futuro della tipografia è già cominciato Slide 30 Variable Fonts: il futuro della tipografia è già cominciato Slide 31 Variable Fonts: il futuro della tipografia è già cominciato Slide 32 Variable Fonts: il futuro della tipografia è già cominciato Slide 33 Variable Fonts: il futuro della tipografia è già cominciato Slide 34 Variable Fonts: il futuro della tipografia è già cominciato Slide 35 Variable Fonts: il futuro della tipografia è già cominciato Slide 36 Variable Fonts: il futuro della tipografia è già cominciato Slide 37 Variable Fonts: il futuro della tipografia è già cominciato Slide 38 Variable Fonts: il futuro della tipografia è già cominciato Slide 39 Variable Fonts: il futuro della tipografia è già cominciato Slide 40 Variable Fonts: il futuro della tipografia è già cominciato Slide 41 Variable Fonts: il futuro della tipografia è già cominciato Slide 42 Variable Fonts: il futuro della tipografia è già cominciato Slide 43 Variable Fonts: il futuro della tipografia è già cominciato Slide 44 Variable Fonts: il futuro della tipografia è già cominciato Slide 45 Variable Fonts: il futuro della tipografia è già cominciato Slide 46 Variable Fonts: il futuro della tipografia è già cominciato Slide 47 Variable Fonts: il futuro della tipografia è già cominciato Slide 48 Variable Fonts: il futuro della tipografia è già cominciato Slide 49 Variable Fonts: il futuro della tipografia è già cominciato Slide 50 Variable Fonts: il futuro della tipografia è già cominciato Slide 51 Variable Fonts: il futuro della tipografia è già cominciato Slide 52 Variable Fonts: il futuro della tipografia è già cominciato Slide 53 Variable Fonts: il futuro della tipografia è già cominciato Slide 54 Variable Fonts: il futuro della tipografia è già cominciato Slide 55 Variable Fonts: il futuro della tipografia è già cominciato Slide 56 Variable Fonts: il futuro della tipografia è già cominciato Slide 57 Variable Fonts: il futuro della tipografia è già cominciato Slide 58 Variable Fonts: il futuro della tipografia è già cominciato Slide 59 Variable Fonts: il futuro della tipografia è già cominciato Slide 60 Variable Fonts: il futuro della tipografia è già cominciato Slide 61 Variable Fonts: il futuro della tipografia è già cominciato Slide 62 Variable Fonts: il futuro della tipografia è già cominciato Slide 63 Variable Fonts: il futuro della tipografia è già cominciato Slide 64 Variable Fonts: il futuro della tipografia è già cominciato Slide 65 Variable Fonts: il futuro della tipografia è già cominciato Slide 66 Variable Fonts: il futuro della tipografia è già cominciato Slide 67 Variable Fonts: il futuro della tipografia è già cominciato Slide 68 Variable Fonts: il futuro della tipografia è già cominciato Slide 69 Variable Fonts: il futuro della tipografia è già cominciato Slide 70 Variable Fonts: il futuro della tipografia è già cominciato Slide 71 Variable Fonts: il futuro della tipografia è già cominciato Slide 72 Variable Fonts: il futuro della tipografia è già cominciato Slide 73 Variable Fonts: il futuro della tipografia è già cominciato Slide 74 Variable Fonts: il futuro della tipografia è già cominciato Slide 75 Variable Fonts: il futuro della tipografia è già cominciato Slide 76 Variable Fonts: il futuro della tipografia è già cominciato Slide 77 Variable Fonts: il futuro della tipografia è già cominciato Slide 78 Variable Fonts: il futuro della tipografia è già cominciato Slide 79 Variable Fonts: il futuro della tipografia è già cominciato Slide 80 Variable Fonts: il futuro della tipografia è già cominciato Slide 81 Variable Fonts: il futuro della tipografia è già cominciato Slide 82 Variable Fonts: il futuro della tipografia è già cominciato Slide 83 Variable Fonts: il futuro della tipografia è già cominciato Slide 84 Variable Fonts: il futuro della tipografia è già cominciato Slide 85 Variable Fonts: il futuro della tipografia è già cominciato Slide 86 Variable Fonts: il futuro della tipografia è già cominciato Slide 87 Variable Fonts: il futuro della tipografia è già cominciato Slide 88 Variable Fonts: il futuro della tipografia è già cominciato Slide 89 Variable Fonts: il futuro della tipografia è già cominciato Slide 90 Variable Fonts: il futuro della tipografia è già cominciato Slide 91 Variable Fonts: il futuro della tipografia è già cominciato Slide 92 Variable Fonts: il futuro della tipografia è già cominciato Slide 93 Variable Fonts: il futuro della tipografia è già cominciato Slide 94 Variable Fonts: il futuro della tipografia è già cominciato Slide 95 Variable Fonts: il futuro della tipografia è già cominciato Slide 96 Variable Fonts: il futuro della tipografia è già cominciato Slide 97 Variable Fonts: il futuro della tipografia è già cominciato Slide 98 Variable Fonts: il futuro della tipografia è già cominciato Slide 99 Variable Fonts: il futuro della tipografia è già cominciato Slide 100 Variable Fonts: il futuro della tipografia è già cominciato Slide 101 Variable Fonts: il futuro della tipografia è già cominciato Slide 102 Variable Fonts: il futuro della tipografia è già cominciato Slide 103 Variable Fonts: il futuro della tipografia è già cominciato Slide 104 Variable Fonts: il futuro della tipografia è già cominciato Slide 105 Variable Fonts: il futuro della tipografia è già cominciato Slide 106 Variable Fonts: il futuro della tipografia è già cominciato Slide 107 Variable Fonts: il futuro della tipografia è già cominciato Slide 108 Variable Fonts: il futuro della tipografia è già cominciato Slide 109 Variable Fonts: il futuro della tipografia è già cominciato Slide 110 Variable Fonts: il futuro della tipografia è già cominciato Slide 111 Variable Fonts: il futuro della tipografia è già cominciato Slide 112 Variable Fonts: il futuro della tipografia è già cominciato Slide 113
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Variable Fonts: il futuro della tipografia è già cominciato

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Variable Fonts: il futuro della tipografia è già cominciato

  1. 1. VARIABLE FONTS ILFUTURODELLATIPOGRAFIAÈGIÀCOMINCIATO GIULIALACO 15 marzo 2019 – FAENZA (RA)
  2. 2. #CSSday #CSSday19
  3. 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
  4. 4. DEFINIZIONE 2019©GiuliaLaco VARIABLE FONTS
  5. 5. JasonPamental https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
  6. 6. PREMESSA 2019©GiuliaLaco
  7. 7. Definizioni TYPEFACE FONTCarattere tipografico Singolo file 2019©GiuliaLaco TYPEFACEFAMILY Famiglia di caratteri tipografici
  8. 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. 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
  10. 10. CHIHAVOLUTO iVARIABLEFONTS? 2019©GiuliaLaco
  11. 11. VARIABLEFONTS OpenTypeFontVariations 2019©GiuliaLaco ATypI,settembre2016
  12. 12. SUPPORTODEIBROWSER 2019©GiuliaLaco
  13. 13. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 9,54% Marzo2018 2019©GiuliaLaco
  14. 14. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 70,94% Ottobre2018 2019©GiuliaLaco
  15. 15. Variable Fonts SUPPORTO DEIBROWSER(FONTECANIUSE) 78,26% Marzo2019 2019©GiuliaLaco
  16. 16. COS’èUNVARIABLEFONT? 2019©GiuliaLaco
  17. 17. DISTINZIONE FONT VARIABILE 2019©GiuliaLaco FONTSTATICO OpenType 1.8 (con tabelle aggiuntive delle variazioni) OpenType TTFOTF WOFF WOFF2 -30%
  18. 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. 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. 20. DIFFERENZE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE Typeface VF Typeface Roman Typeface Bold Typeface Italic Typeface Bold Italic … (Typeface Italic VF) FILE
  21. 21. GLIASSIDIVARIAZIONE 2019©GiuliaLaco
  22. 22. 2019©GiuliaLaco https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369 ASSIDIVARIAZOINE VARIABLEFONTS
  23. 23. ASSIDIVARIAZOINE ASSIPERSONALIZZATIASSIREGISTRATI CUSTOM AXESREGISTERED AXES VARIABLEFONTS wght wdth ital slnt opsz XHGH GRAD COSA BOHH MAHH 2019©GiuliaLaco
  24. 24. ASSIREGISTRATI 2019©GiuliaLaco
  25. 25. PESO VARIABLEFONTS 2019©GiuliaLaco Nunito asse peso 54 156 wght
  26. 26. CSS VARIABLEFONTS 2019©GiuliaLaco Nunito wght 1ASSE
  27. 27. CSS VARIABLEFONTS 2019©GiuliaLaco Usare la proprietà di basso livello in attesa di CSS4 Font Module font-variation-settings
  28. 28. PESO&LARGHEZZA VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse peso asselarghezza wght wdth 38 250 40160
  29. 29. CSS VARIABLEFONTS 2019©GiuliaLaco wght wdth Amstelvar Alpha 2ASSI
  30. 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. 31. CSS VARIABLEFONTS 2019©GiuliaLaco wght wdth Cabin VF Beta 2ASSI
  32. 32. OPTICAl-SIZE VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse optical-size 10 72 opsz
  33. 33. METALTYPE 2019©GiuliaLaco OPTICALSIZE https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/
  34. 34. FONTEDIMENSIONI 2019©GiuliaLaco OPTICALSIZE https://www.myfonts.com/fonts/positype/scotch/https://www.webtype.com/https://dashboard.typography.com/user-guide/choosing-fonts
  35. 35. 2019©GiuliaLaco asse optical-size + CSS font-size
  36. 36. OPTICAl-SIZE VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha asse optical-size 10 72 opsz
  37. 37. CSS VARIABLEFONTS 2019©GiuliaLaco Amstelvar Alpha 3ASSI wght wdth opsz
  38. 38. ITALIC VARIABLEFONTS 2019©GiuliaLaco Bree serif asse del corsivo 0 1 ital AaGg AGga AaGg AaGgTimes New Roman
  39. 39. INTERPOLAZIONE Imagehttps://www.alphabettes.org/responsive-variable-fonts/ …elacompatibilitàdipunti.
  40. 40. INTERPOLAZIONE Perunacorrettainterpolazionefra diversitracciatioccorreavereuna compatibilitàdipunti. Nonnecessariamenteciòsiverifica fraduestilidifonttradizionalmente inseritinellastessafamiglia tipografica. 2019©GiuliaLaco
  41. 41. ITALIC&SLANT VARIABLEFONTS 2019©GiuliaLaco asse corsivo ital asse inclinazione slnt + Roslindale Variable Italic
  42. 42. ASSIPERSONALIZZATI 2019©GiuliaLaco
  43. 43. >64.000 2019©GiuliaLaco GLI ASSI DI VARIAZIONE POSSIBILI
  44. 44. RicardoMagalhães https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
  45. 45. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  46. 46. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  47. 47. https://create.adobe.com/2018/5/22/variable_fonts_are_t.html
  48. 48. 2019©GiuliaLaco
  49. 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. 50. 2019©GiuliaLaco Continua per altre quattro stanze
  51. 51. 2019©GiuliaLaco Hai preso nota? Verde, blu, giallo, rosso e bianco
  52. 52. LEISTANZE 2019©GiuliaLaco
  53. 53. LEISTANZE VARIABLEFONTS 2019©GiuliaLaco Lesceltedichiseneintende(itypedesigner)
  54. 54. https://www.axis-praxis.org/
  55. 55. https://www.axis-praxis.org/
  56. 56. IVANTAGGI VARIABLE FONTS 2019©GiuliaLaco
  57. 57. PERFORMANCE 2019©GiuliaLaco
  58. 58. 2019©GiuliaLaco Le «font variations» del formato OpenType 1.8 migliorano la performance di caricamento dei web font? DIPENDE!
  59. 59. PERFORMANCE 2019©GiuliaLaco FONTSTATICI FONTVARIABILE PESO KB KB KB KB KB KB KB KB KB KB VARIABLEFONTS
  60. 60. 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
  61. 61. OPTICALSIZE 2019©GiuliaLaco
  62. 62. 2019©GiuliaLaco
  63. 63. FINETUNING 2019©GiuliaLaco
  64. 64. ADATTAMENTOALLELINGUE 2019©GiuliaLaco
  65. 65. RESPONSIVE/FLUIDWEB 2019©GiuliaLaco
  66. 66. GLISVANTAGGI VARIABLE FONTS 2019©GiuliaLaco
  67. 67. LASCELTA 2019©GiuliaLaco
  68. 68. ILCOSTO 2019©GiuliaLaco
  69. 69. ILPOTENZIALECRIMINALEJ 2019©GiuliaLaco Criminitipografici
  70. 70. L’IMPLEMENTAZIONE 2019©GiuliaLaco VARIABLE FONTS
  71. 71. FALLBACK:FONTSTACK 2019©GiuliaLaco
  72. 72. 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
  73. 73. FONTSTACK VARIABLEFONTS 2019©GiuliaLaco body { font-family: “Typeface”, sans-serif; } @supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } Feature query
  74. 74. @FONT-FACE 2019©GiuliaLaco
  75. 75. @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; }
  76. 76. DOVELITROVO? 2019©GiuliaLaco
  77. 77. DOVELITROVO? 2019©GiuliaLaco • CREATIVECLOUDDIADOBE • GOOGLEFONTSEARLYACCESS • DISTRIBUTORIDIFONT • FONDERIEINDIPENDENTI • Chiediallatuafonderiadifiducia VARIABLEFONTS
  78. 78. 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
  79. 79. STRUMENTI 2019©GiuliaLaco
  80. 80. STRUMENTI 2019©GiuliaLaco axis-praxis.org VARIABLEFONTS
  81. 81. STRUMENTI 2019©GiuliaLaco v-fonts.com VARIABLEFONTS
  82. 82. STRUMENTI 2019©GiuliaLaco play.typedetail.com VARIABLEFONTS
  83. 83. STRUMENTI 2019©GiuliaLaco wakamaifondue.com VARIABLEFONTS
  84. 84. STRUMENTI 2019©GiuliaLaco typetura.com VARIABLEFONTS typetura.js
  85. 85. 2019©GiuliaLaco RESPONSIVE FLUID FLUID(LIQUID)
  86. 86. 2019©GiuliaLaco RESPONSIVE WEBTYPOGRAPHY FLUID WEBTYPOGRAPHY
  87. 87. 2019©GiuliaLaco BREAKPOINTS KEYFRAMES
  88. 88. 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;
  89. 89. LEPOTENZIALITÀ 2019©GiuliaLaco VARIABLE FONTS
  90. 90. INTERFACCEMULTIMEDIALI 2019©GiuliaLaco
  91. 91. 2019©GiuliaLaco INPUT VARIABLEFONTS Movimento del telefono WEIGHT WIDTH ASSIDIVARIAZIONE:
  92. 92. 2019©GiuliaLaco INPUT VARIABLEFONTS Audio WEIGHT WIDTH ASSIDIVARIAZIONE: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr
  93. 93. 2019©GiuliaLaco INPUT VARIABLEFONTS Pressione WEIGHT ASSIDIVARIAZIONE: ?
  94. 94. ADATTAMENTOALL’AMBIENTE 2019©GiuliaLaco
  95. 95. 2019©GiuliaLaco L’asseGRADE VARIABLEFONTS
  96. 96. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  97. 97. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  98. 98. 2019©GiuliaLaco INPUT VARIABLEFONTS Luce ambiente GRADE ASSEDIVARIAZIONE:
  99. 99. 2019©GiuliaLaco INPUT VARIABLEFONTS Distanza dallo schermo GRADE?, X-HEIGHT ASSIDIVARIAZIONE: ?
  100. 100. NUOVIAMBIENTI 2019©GiuliaLaco
  101. 101. 2019©GiuliaLaco INPUT VARIABLEFONTS Camera, dati, etc. Assi prospettici? ASSIDIVARIAZIONE: FONTPERLAREALTÀVIRTUALEOAUMENTATA Alessia Nicotra e Bruno Maag Kerning conference, Faenza 8 giugno 2018
  102. 102. INFOGRAFICHE 2019©GiuliaLaco
  103. 103. 2019©GiuliaLaco INPUT VARIABLEFONTS Big Data WEIGHT SLANT ASSIDIVARIAZIONE: A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr
  104. 104. ANIMAZIONI(semantiche?) 2019©GiuliaLaco
  105. 105. ACCESSIBILITà, BISOGNIPARTICOLARI 2019©GiuliaLaco
  106. 106. ESPRESSIVITà 2019©GiuliaLaco
  107. 107. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter attivo statico calmoansioso suono suono suono suono suono
  108. 108. 2019©GiuliaLaco ESPRESSIVITà VARIABLEFONTS Esercizio liberamente ispirato a Sara Hyndman, Why Fonts Matter Vai a dormire Pensa Calmati Ridi Svegliati Agisci ora +calma+energia
  109. 109. @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
  110. 110. FEEDBACK https://joind.in/talk/c7c27
  111. 111. Buon typesetting 2019©GiuliaLaco
  112. 112. 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

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

Views

Total views

765

On Slideshare

0

From embeds

0

Number of embeds

17

Actions

Downloads

9

Shares

0

Comments

0

Likes

0

×