SlideShare a Scribd company logo
1 of 113
Download to read offline
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 / FONT STRATEGIST
Web typography
Font optimisation
Typography strategy
@webmatter_it
Giulia Laco
2019©GiuliaLaco
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 tipografici
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)
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
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
TTFOTF WOFF WOFF2
-30%
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
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
DIFFERENZE
2019©GiuliaLaco
FONTSTATICI FONTVARIABILE
Typeface VF
Typeface Roman
Typeface Bold
Typeface Italic
Typeface Bold Italic
…
(Typeface Italic VF)
FILE
GLIASSIDIVARIAZIONE
2019©GiuliaLaco
2019©GiuliaLaco
https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369
ASSIDIVARIAZOINE
VARIABLEFONTS
ASSIDIVARIAZOINE
ASSIPERSONALIZZATIASSIREGISTRATI
CUSTOM AXESREGISTERED AXES
VARIABLEFONTS
wght wdth
ital
slnt
opsz
XHGH
GRAD
COSA
BOHH
MAHH
2019©GiuliaLaco
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 qui sarebbe meglio descritto come asse di compressione
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://dashboard.typography.com/user-guide/choosing-fonts
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òsiverifica
fraduestilidifonttradizionalmente
inseritinellastessafamiglia
tipografica.
2019©GiuliaLaco
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-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©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?
DIPENDE!
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 (licenza permettendo)
- utilizzare buone pratiche di web font loading
VARIABLEFONTS
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
websafe
system font
Variable
webfont
default system font
(generic name)
NO
FONTSTACK
VARIABLEFONTS
2019©GiuliaLaco
body {
font-family: “Typeface”, sans-serif;
}
@supports (font-variation-settings: normal) {
body {
font-family: “Typeface VF”, sans-serif;
}
}
Feature query
@FONT-FACE
2019©GiuliaLaco
@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;
}
DOVELITROVO?
2019©GiuliaLaco
DOVELITROVO?
2019©GiuliaLaco
• CREATIVECLOUDDIADOBE
• GOOGLEFONTSEARLYACCESS
• DISTRIBUTORIDIFONT
• FONDERIEINDIPENDENTI
• Chiediallatuafonderiadifiducia
VARIABLEFONTS
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
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 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;
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/full/yGeMxr
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ÀVIRTUALEOAUMENTATA
Alessia Nicotra e Bruno Maag
Kerning conference, Faenza 8 giugno 2018
INFOGRAFICHE
2019©GiuliaLaco
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Big Data
WEIGHT
SLANT
ASSIDIVARIAZIONE:
A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr
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
calmoansioso
suono
suono
suono
suono
suono
2019©GiuliaLaco
ESPRESSIVITà
VARIABLEFONTS
Esercizio liberamente ispirato a
Sara Hyndman, Why Fonts Matter
Vai a dormire
Pensa
Calmati
Ridi
Svegliati
Agisci ora
+calma+energia
@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
FEEDBACK
https://joind.in/talk/c7c27
Buon
typesetting
2019©GiuliaLaco
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

More Related Content

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Variable Fonts: il futuro della tipografia è già cominciato