FONT VARIABILI? Sì, grazie.
#CSSday
FONT VARIABILI: DEFINIZIONE
VARIABLE FONTS - animazione
INHALE/EXHALE - animazione
CONTRACT/EXPAND - animazione
PREMESSA
TYPEFACE vs. FONT
TYPEFACE FAMILIES - EVOLUZIONE
CHE COS’È UN FONT VARIABILE?
FORMATO FONT: OpenType 1.8
Un font variabile è un singolo file di font che SI COMPORTA COME più font.
FONT “STATICI” VS. FONT VARIABiLI
FONT STATICI VS. FONT VARIABILE
Un font variabile è un singolo file di font che SI COMPORTA COME più font [statici].
Chi ha voluto i font variabili?
FONT VARIABILI OpenType Font Variations
AMBITI D’USO FONT VARIABILI
DESKTOP FONTS
Programmi “OFFICE”
Programmi di grafica
IN PHOTOSHOP
IN ILLUSTRATOR
IN INDESIGN
SYSTEM FONTS
UI SYSTEM FONTS
UI SYSTEM FONTS
FONTSTACK
UI SYSTEM FONTS - VARIABLE FONTS
WEB FONTS
SUPPORTO DEI BROWSER
SUPPORTO DEI BROWSER
SUPPORTO DEI BROWSER
ASSI DI VARIAZIONE
ASSI REGISTRATI vs. ASSI PERSONALIZZATI
ASSI REGISTRATI VARIABLE FONTS
ASSI REGISTRATI Asse WEIGHT
ASSI REGISTRATI Assi WIDTH e WEIGHT
ASSI REGISTRATI Asse OPTICAL SIZE
ASSI REGISTRATI OPTICAL SIZE + FONT SIZE
OPTICAL SIZE
OPTICAL SIZE
OPTICAL SIZE
OPTICAL SIZE
OPTICAL SIZE
ASSI REGISTRATI Asse slant
ASSI REGISTRATI Asse ITALIC
COMBINAZIONE DI ASSI Italic + Slant
ASSI PERSONALIZZATI
NUOVA TIPOGRAFIA
IMPLEMENTAZIONE FONT VARIABILI
PROPRIETÀ CSS (LOWLEVEL)
PROPRIETÀ DI BASSO LIVELLO
PROPRIETÀ CSS MAPPATE
Mappatura proprietà css
BUGS VARIABLE FONTS
Attenzione ai valori da usare
PROGRESSIVE ENHANCEMENT
@FONT-FACE
codice
FEATURE QUERY CSS
FEATURE QUERY @SUPPORTS
FEATURE QUERY @SUPPORTS
GOOGLE FONTS
GOOGLE FONTS UI VARIABLE FONTS
NUOVA API GOOGLE FONT
FONT VARIABILI E PERFORMANCE
IL PESO DEI WEB FONT
VARIABLE FONTS PERFORMANCE - PESO
VARIABLE FONTS PERFORMANCE - PESO
VARIABLE FONTS PERFORMANCE - PESO
UNA GAMMA DI POSSIBILITÀ
FORMATI COMPRESSI WOFF / WOFF2
FORMATI WOFF E WOFF 2.0
WEB FONT LOADING
WEB FONT LOADING FONT-DISPLAY
GOOGLE FONTS API VARIABLE FONTS
WEB FONT LOADING Font-display
WEB FONT LOADER
SUBSETTING
SUBSETTING LIMITARE IL NUMERO DI GLIFI
ANIMAZIONI CON I FONT VARIABILI
ANIMARE USANDO GLI ASSI
ANIMARE USANDO GLI ASSI
ANIMARE USANDO GLI ASSI
FLUID WEB TYPOGRAPHY
FLUID WEB TYPOGRAPHY
KEYFRAMES AL POSTO DEI BREAKPOINTS
TYPETURA.JS
TYPESETTING CON I FONT VARIABILI
FINE TUNING
Enfasi nel body text
Headline lunghe su schermi piccoli
Lingue con parole lunghe
FINE TUNING VARIABLE FONTS
OPTICAL SIZE
OPTICAL SIZE
FONT PAIRING & VARIABLE FONTS
(New) font pairing
(New) font pairing
USER EXPERIENCE
L’ASSE GRADE
L’ASSE GRADE
L’ASSE GRADE
CITAZIONE
UX & SEO (FONT VARIABILI)
Core Web Vitals
PROSPETTIVE
IL MERCATO DEI VARIABLE FONTS
IL MERCATO DEI VARIABLE FONTS
IL MERCATO DEI VARIABLE FONTS
VARIABLE COLOR FONTS
VARIABLE COLOR FONTS
ASSI “SUPERSLIDER”
IL MERCATO DEI VARIABLE FONTS
STRUMENTI & LUOGHI PER SPERIMENTARE
VARIABLE FONTS TOOLS
VARIABLE FONTS TOOLS
VARIABLE FONTS TOOLS
VARIABLE FONTS TOOLS
Buon typesetting
GRAZIE PER L’ATTENZIONE
Teniamoci in contatto
COLOPHON