A presentation at WordCamp Milano in in Milan, Metropolitan City of Milan, Italy by Giulia Laco
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
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
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]
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
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
Variable fonts represent an innovation that is changing the history of typography and web design. Excellent for optimizing performance and responsive design, the format has a great potential for optimal typography and creative use. In a single file a typographic arsenal waiting to be used.
Here’s what was said about this presentation on social media.
for free. You
can too.