Variable Fonts: the future of typography has already begun
•
2 likes•397 views
VIDEO – https://wordpress.tv/2019/12/21/giulia-laco-variable-fonts-the-future-of-typography-has-already-begun/ ABSTRACT – 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. WordCamp Milano #WCMIL 2019, November 23rd – Milan (Italy) https://2019.milano.wordcamp.org/
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Variable Fonts: the future of typography has already begun
- 1. VARIABLE FONTS THEFUTUREOFTYPOGRAPHYHASALREADYBEGUN GIULIA LACO NOVEMBER 23rd , 2019 - WORDCAMP MILANO
- 6. Definitions TYPEFACE FONT concept file TYPEFACEFAMILY font-family (CSS) 2019©GiuliaLaco FONTFAMILY roman, italic, condensed, extended
- 7. EVOLUTION TYPEFACEFAMILIES Roman vs. Italic – different types beginningof 1500 1700 Bigger families (condensed, extended) 1900 First typeface families (Roman and italic pairing) 2019©GiuliaLaco
- 8. TERMINOLOGY ITALIANENGLISH 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 Characterwidth Characterweight 2019©GiuliaLaco
- 10. THE PROPONENTS VARIABLEFONTS ATypI,September 2016 2019©GiuliaLaco OpenType Font Variations
- 17. DEFINITION “A variable font is a single font file THAT BEHAVES LIKE multiple fonts.” 2019©GiuliaLaco — John Hudson, Sept. 2016
- 19. DIFFERENCES STATICFONTS VARIABLEFONT HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html ) FILE 2019©GiuliaLaco many files one file
- 20. DEFINITION 2019©GiuliaLaco A variable font is a single font file THAT BEHAVES LIKE multiple [static] fonts.
- 25. 2019©GiuliaLaco 1. Weight 2. Width 3. Optical Size 4. Slant 5. Italic
- 26. Nunito by Vernon Adams 54 156 wght 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Weight
- 27. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS wght wdth 38 250 40160 Amstelvar Alpha by David Berlow Weight Width
- 28. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Amstelvar Alpha by David Berlow opsz 10 72 Optical size
- 30. optical-size + font-size 2019©GiuliaLaco SMALL BIGCSSfont-size optical-size FORSMALLSIZES FORBIGSIZES
- 31. 2019©GiuliaLaco
- 32. 2019©GiuliaLaco
- 33. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Input Mono Beta by David Jonathan Ross slnt Slant
- 34. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Times New Roman (static fonts) ital 0 1 Italic
- 35. 2019©GiuliaLaco INTERPOLATION VARIABLEFONTS Samsa – inspection tool https://github.com/Lorp/samsa
- 36. ital slnt+ 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Italic + Slant Roslindale Variable Italic by David Jonathan Ross
- 38. Recursive by Arrow Type ASANS&MONOFONT! 2019©GiuliaLaco NEWTYPOGRAPHY
- 49. PERFORMANCE STATICFONTS VARIABILEFONT WEIGHT KB KB KB KB KB KB KB KB KB KB VARIABLEFONTS 2019©GiuliaLaco
- 50. PERFORMANCE REMEMBERTO - use the compressed format: woff2 - consider to do a subsetting (depending on the licence ) - use web font loading best practices VARIABLEFONTS 2019©GiuliaLaco
- 52. 2019©GiuliaLaco
- 63. 1AXIS 2019©GiuliaLaco font-variation-settings: "wght" 54; lowlevelCSS VARIABLEFONTS font-variation-settings: "wght" 38, "wdth" 401; font-variation-settings: "wght" 38, "wdth" 401, "opsz" 203; 2AXES 3AXES
- 64. 2019©GiuliaLaco font-weight: 38; [1-999] font-stretch: 125%; [100% is normal] font-optical-sizing: auto; [auto/none] font-style: oblique 15deg; * [-90deg–90deg] font-style: italic; * [italic/normal] CSS4 Weight Width Optical size Slant Italic "wght" 38 "wdth" 125 "opsz" 51 "slnt" 15 "ital" 1 LOWLEVELCSS font-variation-settings: * Add font-synthesis: none;
- 66. FONTSTACK VARIABLEFONTS font-family: “Typeface VF”, “Typeface”, Helvetica, sans-serif; Static webfont websafe system font Variable webfont default system font (generic name) NO 2019©GiuliaLaco
- 67. FEATUREQUERY VARIABLEFONTS body { font-family: "Typeface", sans-serif; } @supports (font-variation-settings: normal) { body { font-family: "Typeface VF", sans-serif; } } 2019©GiuliaLaco @SUPPORT
- 69. @FONT-FACE VARIABLEFONTS @font-face { font-family: "Typeface VF"; src: url('Typeface_VF.woff2') format('woff2-variations'), url('Typeface_VF.woff2') format('woff2’); … } @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©GiuliaLaco
- 73. 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); 2019©GiuliaLaco WHERETOFIND VARIABLEFONTS
- 74. 2019©GiuliaLaco Announced by Nathan Williams by means of a Codpen: https://codepen.io/nlwilliams/full/JjPJewp Availablewith NEWGOOGLEFONTSAPI WHERETOFIND VARIABLEFONTS
- 75. 2019©GiuliaLaco WHERETOFIND VARIABLEFONTS WordPress TwentyTwentytheme Inter by Rasmus Andersson - https://rsms.me/inter/
- 76. • Check your creative software • Font distributors & market places • … ask your trusted foundry 2019©GiuliaLaco WHERETOFIND VARIABLEFONTS
- 85. INPUT VARIABLEFONTS Audio WEIGHT, WIDTH VARIATIONAXES: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr 2019©GiuliaLaco
- 86. INPUT VARIABLEFONTS pressure sensor DEVICE WEIGHT VARIATIONAXES: ? 2019©GiuliaLaco
- 92. INPUT VARIABLEFONTS Distance from screen GRADE?, X-HEIGHT VARIATIONAXES: ? 2019©GiuliaLaco
- 94. INPUT VARIABLEFONTS Camera, datA … Prospective axes VARIATIONAXES: Fonts for Augmented/Virtual Reality Alessia Nicotra & Bruno Maag Kerning conference, Faenza - June 8°, 2018 2019©GiuliaLaco
- 96. INPUT VARIABLEFONTS Big Data WEIGHT SLANT VARIATIONAXES: A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr 2019©GiuliaLaco
- 100. EXPRESSIVENESS VARIABLEFONTS active static calmanxious sound sound sound sound sound 2019©GiuliaLaco Exercise inspired by the work of Sarah Hyndman
- 101. EXPRESSIVENESS VARIABLEFONTS Sleep Think Calm down Laugh Wake up Act now +calm+energy 2019©GiuliaLaco Exercise inspired by the work of Sarah Hyndman
- 102. 2019©GiuliaLaco Thank you for your attention
- 103. @webmatter_it giulialaco giulia.laco FOLLOW / CONTACT Keepintouch and show me your creations with variable fonts ! Subscribetomynewsletter www.typestrategy.com
- 104. BALBOA PLUS FILL BalboaCondesed BalboaExtraCondesed Balboa UltraLight Balboa Light Balboa Medium Balboa Bold Balboa ExtraBold Balboa Black Balboa ExtraBlack Carl Marx regular CarlMarxbold Bree serif regular Bree serif italic IBM Plesk Mono medium 2019©GiuliaLaco