Variable Fonts: the future of typography has already begun

A presentation at WordCamp Milano in November 2019 in Milan, Metropolitan City of Milan, Italy by Giulia Laco

Slide 1

Slide 1

GIULIA LACO VARIABLE FONTS THE FUTURE OF TYPOGRAPHY HAS ALREADY BEGUN NOVEMBER 23rd , 2019 - WORDCAMP MILANO

Slide 2

Slide 2

WORDCAMP MILANO 2019

Slide 3

Slide 3

VARIABLE FONTS 2019 © Giulia Laco DEFINITION

Slide 4

Slide 4

Jason Pamental https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/

Slide 5

Slide 5

2019 © Giulia Laco PREMISE

Slide 6

Slide 6

FONT concept file TYPEFACE FAMILY FONT FAMILY 2019 © Giulia Laco Definitions TYPEFACE roman, italic, condensed, extended font-family (CSS)

Slide 7

Slide 7

beginning of 1500 Roman vs. Italic – different types 1700 First typeface families (Roman and italic pairing) 1900 Bigger families (condensed, extended) 2019 © Giulia Laco EVOLUTION TYPEFACE FAMILIES

Slide 8

Slide 8

Character width COMPRESSED CONDENSED REGULAR OR MEDIUM WIDE EXTENDED ITALIAN STRETTISSIMO STRETTO NORMALE LARGO LARGHISSIMO Character weight EXTRA LIGHT LIGHT OR THIN REGULAR OR MEDIUM SEMIBOLD BOLD EXTRA BOLD OR BLACK CHIARISSIMO CHIARO NORMALE NERETTO NERO NERISSIMO 2019 © Giulia Laco TERMINOLOGY ENGLISH

Slide 9

Slide 9

2019 © Giulia Laco WHO ASKED FOR VARIABLE FONTS?

Slide 10

Slide 10

VARIABLE FONTS THE PROPONENTS 2019 © Giulia Laco OpenType Font Variations ATypI, September 2016

Slide 11

Slide 11

2019 © Giulia Laco BROWSER SUPPORT

Slide 12

Slide 12

BROWSER SUPPORT (source: CAN I USE) March 2018 9,54% Global usage 2019 © Giulia Laco Variable Fonts

Slide 13

Slide 13

BROWSER SUPPORT (source: CAN I USE) March 2019 78,26% Global usage 2019 © Giulia Laco Variable Fonts

Slide 14

Slide 14

BROWSER SUPPORT (source: CAN I USE) November 2019 87,01% Global usage 2019 © Giulia Laco Variable Fonts

Slide 15

Slide 15

2019 © Giulia Laco WHAT IS A VARIABLE FONT?

Slide 16

Slide 16

2019 © Giulia Laco EVOLUTION OpenType OpenType 1.8

Slide 17

Slide 17

— John Hudson, Sept. 2016 2019 © Giulia Laco DEFINITION “A variable font is a single font file THAT BEHAVES LIKE multiple fonts.”

Slide 18

Slide 18

VARIABLE FONTS 2019 © Giulia Laco OPPOSITION “STATIC” FONTS

Slide 19

Slide 19

STATIC FONTS many files VARIABLE FONT one file HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html ) 2019 © Giulia Laco DIFFERENCES FILE

Slide 20

Slide 20

2019 © Giulia Laco DEFINITION A variable font is a single font file THAT BEHAVES LIKE multiple [static] fonts.

Slide 21

Slide 21

2019 © Giulia Laco VARIATION AXES

Slide 22

Slide 22

2019 © Giulia Laco VARIABLE FONTS VARIATIONAXES https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

Slide 23

Slide 23

wght CUSTOMAXES wdth GRAD XHGH MAHH opsz ital slnt BOHH COSA 2019 © Giulia Laco VARIATION AXES VARIABLE FONTS REGISTERED AXES

Slide 24

Slide 24

2019 © Giulia Laco REGISTERED AXES

Slide 25

Slide 25

2019 © Giulia Laco

  1. Weight 2. Width 3. Optical Size 4. Slant 5. Italic

Slide 26

Slide 26

54 2019 © Giulia Laco REGISTERED AXES VARIABLE FONTS Weight wght Nunito by Vernon Adams 156

Slide 27

Slide 27

60 38 2019 © Giulia Laco wdth Width 401 REGISTERED AXES VARIABLE FONTS Weight wght Amstelvar Alpha by David Berlow 250

Slide 28

Slide 28

10 opsz 72 2019 © Giulia Laco REGISTERED AXES VARIABLE FONTS Optical size Amstelvar Alpha by David Berlow

Slide 29

Slide 29

2019 © Giulia Laco https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/ OPTICAL SIZE METAL TYPES

Slide 30

Slide 30

optical-size + font-size CSS font-size BIG 2019 © Giulia Laco SMALL optical-size FOR SMALL SIZES FOR BIG SIZES

Slide 31

Slide 31

2019 © Giulia Laco

Slide 32

Slide 32

2019 © Giulia Laco

Slide 33

Slide 33

slnt 2019 © Giulia Laco REGISTERED AXES VARIABLE FONTS Slant Input Mono Beta by David Jonathan Ross

Slide 34

Slide 34

0 2019 © Giulia Laco REGISTERED AXES VARIABLE FONTS Italic ital Times New Roman (static fonts) 1

Slide 35

Slide 35

2019 © Giulia Laco VARIABLE FONTS INTERPOLATION Samsa – inspection tool https://github.com/Lorp/samsa

Slide 36

Slide 36

ital slnt + 2019 © Giulia Laco REGISTERED AXES VARIABLE FONTS Italic + Slant Roslindale Variable Italic by David Jonathan Ross

Slide 37

Slide 37

2019 © Giulia Laco CUSTOM AXES

Slide 38

Slide 38

2019 © Giulia Laco NEW TYPOGRAPHY A SANS & MONO FONT ! Recursive by Arrow Type

Slide 39

Slide 39

64.000 2019 © Giulia Laco POSSIBLE VARIATION AXES

Slide 40

Slide 40

Ricardo Magalhães https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497

Slide 41

Slide 41

David Jonathan Ross: https://djr.com/notes/first-variable-font/

Slide 42

Slide 42

https://create.adobe.com/2018/5/22/variable_fonts_are_t.html

Slide 43

Slide 43

2019 © Giulia Laco TOO MANY?

Slide 44

Slide 44

2019 © Giulia Laco NAMED INSTANCES

Slide 45

Slide 45

2019 © Giulia Laco VARIABLE FONTS NAMED INSTANCES The choices of those who know (i.e.type designers)

Slide 46

Slide 46

https://www.axis-praxis.org/

Slide 47

Slide 47

VARIABLE FONTS 2019 © Giulia Laco ADVANTAGES

Slide 48

Slide 48

2019 © Giulia Laco PERFORMANCE

Slide 49

Slide 49

VARIABILE FONT KB KB KB KB KB KB KB KB KB KB 2019 © Giulia Laco VARIABLE FONTS PERFORMANCE WEIGHT STATIC FONTS

Slide 50

Slide 50

  • use the compressed format: woff2 - consider to do a subsetting (depending on the licence ) - use web font loading best practices 2019 © Giulia Laco PERFORMANCE VARIABLE FONTS REMEMBER TO

Slide 51

Slide 51

2019 © Giulia Laco OPTICAL SIZE

Slide 52

Slide 52

2019 © Giulia Laco

Slide 53

Slide 53

2019 © Giulia Laco Fine tuning

Slide 54

Slide 54

https://www.axis-praxis.org/

Slide 55

Slide 55

2019 © Giulia Laco ADAPTATION TO LANGUAGES

Slide 56

Slide 56

2019 © Giulia Laco RESPONSIVE / FLUID WEB

Slide 57

Slide 57

VARIABLE FONTS 2019 © Giulia Laco DISADVANTAGES

Slide 58

Slide 58

2019 © Giulia Laco CHOICE

Slide 59

Slide 59

2019 © Giulia Laco PRICE

Slide 60

Slide 60

CRIMINAL POTENTIAL J 2019 © Giulia Laco typographic crimes

Slide 61

Slide 61

VARIABLE FONTS 2019 © Giulia Laco IMPLEMENTATION

Slide 62

Slide 62

2019 © Giulia Laco CSS PROPERTIES

Slide 63

Slide 63

font-variation-settings: “wght” 38, “wdth” 401; 2 AX ES 3 AX ES font-variation-settings: “wght” 38, “wdth” 401, “opsz” 203; 2019 © Giulia Laco lowlevelCSS VARIABLE FONTS font-variation-settings: “wght” 54; 1 AX IS

Slide 64

Slide 64

LOW LEVEL CSS CSS4 vari Weight “wght” 38 font-weight: 38; [1-999] Width “wdth” 125 font-stretch: 125%; [100% is normal] Optical size “opsz” 51 font-optical-sizing: auto; [auto/none] Slant “slnt” 15 font-style: oblique 15deg; * [-90deg–90deg] Italic “ital” 1 font-style: italic; * [italic/normal]

  • Add font-synthesis: none; 2019 © Giulia Laco font- s: ing -sett ation

Slide 65

Slide 65

2019 © Giulia Laco FALLBACK: FONT STACK

Slide 66

Slide 66

“Typeface VF”, “Typeface”, Helvetica, sans-serif; Variable webfont Static webfont NO websafe system font default system font (generic name) 2019 © Giulia Laco FONT STACK VARIABLE FONTS font-family:

Slide 67

Slide 67

@supports (font-variation-settings: normal) { body { font-family: “Typeface VF”, sans-serif; } } 2019 © Giulia Laco FEATURE QUERY VARIABLE FONTS @SUPPORT body { font-family: “Typeface”, sans-serif; }

Slide 68

Slide 68

2019 © Giulia Laco @FONT-FACE

Slide 69

Slide 69

@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; } 2019 © Giulia Laco @FONT-FACE VARIABLE FONTS @font-face { font-family: “Typeface VF”; src: url(‘Typeface_VF.woff2’) format(‘woff2-variations’), url(‘Typeface_VF.woff2’) format(‘woff2’); … }

Slide 70

Slide 70

2019 © Giulia Laco GOOGLE FONTS API

Slide 71

Slide 71

//fonts.googleapis.com/css?family=Roboto:700 NEW API FORVARIABILE&STATICFONTS //fonts.googleapis.com/css2?family=Roboto:wght@700 2019 © Giulia Laco GOOGLE FONTS API VARIABLE FONTS CURRENT API FORSTATICFONTS

Slide 72

Slide 72

2019 © Giulia Laco WHERE CAN I FIND THEM?

Slide 73

Slide 73

@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); 2019 © Giulia Laco WHERE TO FIND VARIABLE FONTS GOOGLE FONTS EARLY ACCESS

Slide 74

Slide 74

2019 © Giulia Laco WHERE TO FIND VARIABLE FONTS A NEW vailabl GOO e wi t GLE FON h TS A PI Announced by Nathan Williams by means of a Codpen: https://codepen.io/nlwilliams/full/JjPJewp

Slide 75

Slide 75

e 2019 © Giulia Laco WHERE TO FIND VARIABLE FONTS Twe WordP nty Twe ress nty them Inter by Rasmus Andersson - https://rsms.me/inter/

Slide 76

Slide 76

• Font distributors & market places • … ask your trusted foundry 2019 © Giulia Laco WHERE TO FIND VARIABLE FONTS • Check your creative software

Slide 77

Slide 77

VARIABLE FONTS 2019 © Giulia Laco TOOLS

Slide 78

Slide 78

VARIABLE FONTS axis-praxis.org 2019 © Giulia Laco TOOLS

Slide 79

Slide 79

VARIABLE FONTS v-fonts.com 2019 © Giulia Laco TOOLS

Slide 80

Slide 80

VARIABLE FONTS play.typedetail.com 2019 © Giulia Laco TOOLS

Slide 81

Slide 81

VARIABLE FONTS wakamaifondue.com 2019 © Giulia Laco TOOLS

Slide 82

Slide 82

VARIABLE FONTS 2019 © Giulia Laco POTENTIALS

Slide 83

Slide 83

2019 © Giulia Laco MULTIMEDIA INTERFACES

Slide 84

Slide 84

VARIABLE FONTS INPUT VARIATION AXES: WEIGHT, WIDTH 2019 © Giulia Laco Phone mOvement

Slide 85

Slide 85

VARIABLE FONTS INPUT VARIATION AXES: WEIGHT, WIDTH A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr 2019 © Giulia Laco Audio

Slide 86

Slide 86

INPUT pressure sensor DEVICE VARIATION AXES: WEIGHT ? 2019 © Giulia Laco VARIABLE FONTS

Slide 87

Slide 87

2019 © Giulia Laco adaptation to the environment

Slide 88

Slide 88

VARIABLE FONTS 2019 © Giulia Laco GRADE AXIS

Slide 89

Slide 89

Gli assi di variazione https://www.axis-praxis.org/ L’asse GRADE

Slide 90

Slide 90

Gli assi di variazione https://www.axis-praxis.org/ L’asse GRADE

Slide 91

Slide 91

VARIABLE FONTS INPUT VARIATION AXES: GRADE 2019 © Giulia Laco AMBIENT LIGHT

Slide 92

Slide 92

INPUT Distance from screen VARIATION AXES: GRADE?, X-HEIGHT ? 2019 © Giulia Laco VARIABLE FONTS

Slide 93

Slide 93

2019 © Giulia Laco NEW ENVIRONMENTS

Slide 94

Slide 94

VARIABLE FONTS Fonts for Augmented/Virtual Reality INPUT 2019 © Giulia Laco Camera, datA … VARIATION AXES: Prospective axes Alessia Nicotra & Bruno Maag Kerning conference, Faenza - June 8°, 2018

Slide 95

Slide 95

2019 © Giulia Laco INFOGRAPHICS

Slide 96

Slide 96

VARIABLE FONTS INPUT VARIATION AXES: WEIGHT SLANT A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr 2019 © Giulia Laco Big Data

Slide 97

Slide 97

2019 © Giulia Laco ANIMATIONS (semantiC?)

Slide 98

Slide 98

2019 © Giulia Laco ACCESSIBILITY, PARTICULAR NEEDS

Slide 99

Slide 99

2019 © Giulia Laco EXPRESSIVENESS

Slide 100

Slide 100

VARIABLE FONTS sound sound sound sound active static 2019 © Giulia Laco sound calm anxious EXPRESSIVENESS Exercise inspired by the work of Sarah Hyndman

Slide 101

Slide 101

VARIABLE FONTS EXPRESSIVENESS Act now Wake up Laugh

  • energy Exercise inspired by the work of Sarah Hyndman Sleep 2019 © Giulia Laco Calm down
  • calm Think

Slide 102

Slide 102

Thank you 2019 © Giulia Laco for your attention

Slide 103

Slide 103

Keep in touch FOLLOW / CONTACT Subscribeto mynewsletter @webmatter_it giulialaco giulia.laco www.typestrategy.com and show me your creations with variable fonts !

Slide 104

Slide 104

BALBOA PLUS FILL Carl Marx regular Carl Marx bold Bree serif regular Bree serif italic IBM Plesk Mono medium 2019 © Giulia Laco Balboa Condesed Balboa ExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack