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

WORDCAMP MILANO 2019

VARIABLE FONTS 2019 © Giulia Laco DEFINITION

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

2019 © Giulia Laco PREMISE

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

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

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

2019 © Giulia Laco WHO ASKED FOR VARIABLE FONTS?

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

2019 © Giulia Laco BROWSER SUPPORT

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

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

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

2019 © Giulia Laco WHAT IS A VARIABLE FONT?

2019 © Giulia Laco EVOLUTION OpenType OpenType 1.8

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

VARIABLE FONTS 2019 © Giulia Laco OPPOSITION “STATIC” FONTS

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

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

2019 © Giulia Laco VARIATION AXES

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

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

2019 © Giulia Laco REGISTERED AXES

2019 © Giulia Laco

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

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

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

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

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

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

2019 © Giulia Laco

2019 © Giulia Laco

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

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

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

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

2019 © Giulia Laco CUSTOM AXES

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

64.000 2019 © Giulia Laco POSSIBLE VARIATION AXES

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

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

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

2019 © Giulia Laco TOO MANY?

2019 © Giulia Laco NAMED INSTANCES

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

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

VARIABLE FONTS 2019 © Giulia Laco ADVANTAGES

2019 © Giulia Laco PERFORMANCE

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

  • 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

2019 © Giulia Laco OPTICAL SIZE

2019 © Giulia Laco

2019 © Giulia Laco Fine tuning

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

2019 © Giulia Laco ADAPTATION TO LANGUAGES

2019 © Giulia Laco RESPONSIVE / FLUID WEB

VARIABLE FONTS 2019 © Giulia Laco DISADVANTAGES

2019 © Giulia Laco CHOICE

2019 © Giulia Laco PRICE

CRIMINAL POTENTIAL J 2019 © Giulia Laco typographic crimes

VARIABLE FONTS 2019 © Giulia Laco IMPLEMENTATION

2019 © Giulia Laco CSS PROPERTIES

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

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

2019 © Giulia Laco FALLBACK: FONT STACK

“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:

@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; }

2019 © Giulia Laco @FONT-FACE

@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’); … }

2019 © Giulia Laco GOOGLE FONTS API

//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

2019 © Giulia Laco WHERE CAN I FIND THEM?

@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

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

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

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

VARIABLE FONTS 2019 © Giulia Laco TOOLS

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

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

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

VARIABLE FONTS wakamaifondue.com 2019 © Giulia Laco TOOLS

VARIABLE FONTS 2019 © Giulia Laco POTENTIALS

2019 © Giulia Laco MULTIMEDIA INTERFACES

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

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

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

2019 © Giulia Laco adaptation to the environment

VARIABLE FONTS 2019 © Giulia Laco GRADE AXIS

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

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

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

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

2019 © Giulia Laco NEW ENVIRONMENTS

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

2019 © Giulia Laco INFOGRAPHICS

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

2019 © Giulia Laco ANIMATIONS (semantiC?)

2019 © Giulia Laco ACCESSIBILITY, PARTICULAR NEEDS

2019 © Giulia Laco EXPRESSIVENESS

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

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

Thank you 2019 © Giulia Laco for your attention

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

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