Font variabili? Sì grazie.

A presentation at CSSday IT 2020 by Giulia Laco

FONT VARIABILI? Sì, grazie.

FONT VARIABILI? Sì, grazie.

#CSSday

#CSSday

FONT VARIABILI: DEFINIZIONE

FONT VARIABILI: DEFINIZIONE

VARIABLE FONTS - animazione

VARIABLE FONTS - animazione

INHALE/EXHALE - animazione

INHALE/EXHALE - animazione

CONTRACT/EXPAND - animazione

CONTRACT/EXPAND - animazione

PREMESSA

PREMESSA

TYPEFACE vs. FONT

TYPEFACE vs. FONT

TYPEFACE FAMILIES - EVOLUZIONE

TYPEFACE FAMILIES - EVOLUZIONE

CHE COS’È UN FONT VARIABILE?

CHE COS’È UN FONT VARIABILE?

FORMATO FONT: OpenType 1.8

FORMATO FONT: OpenType 1.8

Un font variabile è un singolo file di font che SI COMPORTA COME più font.

Un font variabile è un singolo file di font che SI COMPORTA COME più font.

FONT “STATICI” VS. FONT VARIABiLI

FONT “STATICI” VS. FONT VARIABiLI

FONT STATICI VS. FONT VARIABILE

FONT STATICI VS. FONT VARIABILE

Un font variabile è un singolo file di font che SI COMPORTA COME più font [statici].

Un font variabile è un singolo file di font che SI COMPORTA COME più font [statici].

Chi ha voluto i font variabili?

Chi ha voluto i font variabili?

FONT VARIABILI OpenType Font Variations

FONT VARIABILI OpenType Font Variations

AMBITI D’USO FONT VARIABILI

AMBITI D’USO FONT VARIABILI

DESKTOP FONTS

DESKTOP FONTS

Programmi “OFFICE”

Programmi “OFFICE”

Programmi di grafica

Programmi di grafica

IN PHOTOSHOP

IN PHOTOSHOP

IN ILLUSTRATOR

IN ILLUSTRATOR

IN INDESIGN

IN INDESIGN

SYSTEM FONTS

SYSTEM FONTS

UI SYSTEM FONTS

UI SYSTEM FONTS

UI SYSTEM FONTS

UI SYSTEM FONTS

FONTSTACK

FONTSTACK

UI SYSTEM FONTS - VARIABLE FONTS

UI SYSTEM FONTS - VARIABLE FONTS

WEB FONTS

WEB FONTS

SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER

SUPPORTO DEI BROWSER

ASSI DI VARIAZIONE

ASSI DI VARIAZIONE

ASSI REGISTRATI vs. ASSI PERSONALIZZATI

ASSI REGISTRATI vs. ASSI PERSONALIZZATI

ASSI REGISTRATI VARIABLE FONTS

ASSI REGISTRATI VARIABLE FONTS

ASSI REGISTRATI Asse WEIGHT

ASSI REGISTRATI Asse WEIGHT

ASSI REGISTRATI Assi WIDTH e WEIGHT

ASSI REGISTRATI Assi WIDTH e WEIGHT

ASSI REGISTRATI Asse OPTICAL SIZE

ASSI REGISTRATI Asse OPTICAL SIZE

ASSI REGISTRATI OPTICAL SIZE + FONT SIZE

ASSI REGISTRATI OPTICAL SIZE + FONT SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

ASSI REGISTRATI Asse slant

ASSI REGISTRATI Asse slant

ASSI REGISTRATI Asse ITALIC

ASSI REGISTRATI Asse ITALIC

COMBINAZIONE DI ASSI Italic + Slant

COMBINAZIONE DI ASSI Italic + Slant

ASSI PERSONALIZZATI

ASSI PERSONALIZZATI

NUOVA TIPOGRAFIA

NUOVA TIPOGRAFIA

IMPLEMENTAZIONE FONT VARIABILI

IMPLEMENTAZIONE FONT VARIABILI

PROPRIETÀ CSS (LOWLEVEL)

PROPRIETÀ CSS (LOWLEVEL)

PROPRIETÀ DI BASSO LIVELLO

PROPRIETÀ DI BASSO LIVELLO

PROPRIETÀ CSS MAPPATE

PROPRIETÀ CSS MAPPATE

Mappatura proprietà css

Mappatura proprietà css

BUGS VARIABLE FONTS

BUGS VARIABLE FONTS

Attenzione ai valori da usare

Attenzione ai valori da usare

PROGRESSIVE ENHANCEMENT

PROGRESSIVE ENHANCEMENT

@FONT-FACE

@FONT-FACE

codice

codice

FEATURE QUERY CSS

FEATURE QUERY CSS

FEATURE QUERY @SUPPORTS

FEATURE QUERY @SUPPORTS

FEATURE QUERY @SUPPORTS

FEATURE QUERY @SUPPORTS

GOOGLE FONTS

GOOGLE FONTS

GOOGLE FONTS UI VARIABLE FONTS

GOOGLE FONTS UI VARIABLE FONTS

NUOVA API GOOGLE FONT

NUOVA API GOOGLE FONT

FONT VARIABILI E PERFORMANCE

FONT VARIABILI E PERFORMANCE

IL PESO DEI WEB FONT

IL PESO DEI WEB FONT

VARIABLE FONTS PERFORMANCE  - PESO

VARIABLE FONTS PERFORMANCE - PESO

VARIABLE FONTS PERFORMANCE  - PESO

VARIABLE FONTS PERFORMANCE - PESO

VARIABLE FONTS PERFORMANCE  - PESO

VARIABLE FONTS PERFORMANCE - PESO

UNA GAMMA DI POSSIBILITÀ

UNA GAMMA DI POSSIBILITÀ

FORMATI COMPRESSI WOFF / WOFF2

FORMATI COMPRESSI WOFF / WOFF2

FORMATI WOFF E WOFF 2.0

FORMATI WOFF E WOFF 2.0

WEB FONT LOADING

WEB FONT LOADING

WEB FONT LOADING FONT-DISPLAY

WEB FONT LOADING FONT-DISPLAY

GOOGLE FONTS API VARIABLE FONTS

GOOGLE FONTS API VARIABLE FONTS

WEB FONT LOADING Font-display

WEB FONT LOADING Font-display

WEB FONT LOADER

WEB FONT LOADER

SUBSETTING

SUBSETTING

SUBSETTING LIMITARE IL NUMERO DI GLIFI

SUBSETTING LIMITARE IL NUMERO DI GLIFI

ANIMAZIONI CON I FONT VARIABILI

ANIMAZIONI CON I FONT VARIABILI

ANIMARE USANDO GLI ASSI

ANIMARE USANDO GLI ASSI

ANIMARE USANDO GLI ASSI

ANIMARE USANDO GLI ASSI

ANIMARE USANDO GLI ASSI

ANIMARE USANDO GLI ASSI

FLUID WEB TYPOGRAPHY

FLUID WEB TYPOGRAPHY

FLUID WEB TYPOGRAPHY

FLUID WEB TYPOGRAPHY

KEYFRAMES AL POSTO DEI BREAKPOINTS

KEYFRAMES AL POSTO DEI BREAKPOINTS

TYPETURA.JS

TYPETURA.JS

TYPESETTING CON I FONT VARIABILI

TYPESETTING CON I FONT VARIABILI

FINE TUNING

FINE TUNING

Enfasi nel body text

Enfasi nel body text

Headline lunghe su schermi piccoli

Headline lunghe su schermi piccoli

Lingue con parole lunghe

Lingue con parole lunghe

FINE TUNING VARIABLE FONTS

FINE TUNING VARIABLE FONTS

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

OPTICAL SIZE

FONT PAIRING & VARIABLE FONTS

FONT PAIRING & VARIABLE FONTS

(New) font pairing

(New) font pairing

(New) font pairing

(New) font pairing

USER EXPERIENCE

USER EXPERIENCE

L’ASSE GRADE

L’ASSE GRADE

L’ASSE GRADE

L’ASSE GRADE

L’ASSE GRADE

L’ASSE GRADE

CITAZIONE

CITAZIONE

UX & SEO (FONT VARIABILI)

UX & SEO (FONT VARIABILI)

Core Web Vitals

Core Web Vitals

PROSPETTIVE

PROSPETTIVE

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

VARIABLE COLOR FONTS

VARIABLE COLOR FONTS

VARIABLE COLOR FONTS

VARIABLE COLOR FONTS

ASSI “SUPERSLIDER”

ASSI “SUPERSLIDER”

IL MERCATO DEI VARIABLE FONTS

IL MERCATO DEI VARIABLE FONTS

STRUMENTI & LUOGHI PER SPERIMENTARE

STRUMENTI & LUOGHI PER SPERIMENTARE

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

VARIABLE FONTS TOOLS

Buon typesetting

Buon typesetting

GRAZIE PER L’ATTENZIONE

GRAZIE PER L’ATTENZIONE

Teniamoci in contatto

Teniamoci in contatto

COLOPHON

COLOPHON

[ITALIAN] A tre anni e mezzo dalla loro concezione, i font variabili sembrano essere un formato utilizzabile e proficuo per il web design. Excursus su quello che un font variabile può fare per la tipografia del tuo sito web, per una ulteriore progettazione responsive, per la velocità di caricamento, per le animazioni. E uno sguardo su come sta evolvendo il mercato.

Video

Buzz and feedback

Here’s what was said about this presentation on Twitter.