Successfully reported this slideshow.
Your SlideShare is downloading. ×

Variable Fonts: the future of typography has already begun

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Font variabili? Sì grazie.
Font variabili? Sì grazie.
Loading in …3
×

Check these out next

1 of 104 Ad

Variable Fonts: the future of typography has already begun

Download to read offline

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/

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/

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

Variable Fonts: the future of typography has already begun

  1. 1. VARIABLE FONTS THEFUTUREOFTYPOGRAPHYHASALREADYBEGUN GIULIA LACO NOVEMBER 23rd , 2019 - WORDCAMP MILANO
  2. 2. # WORDCAMP MILANO 2019
  3. 3. DEFINITION VARIABLE FONTS 2019©GiuliaLaco
  4. 4. JasonPamental https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
  5. 5. PREMISE 2019©GiuliaLaco
  6. 6. Definitions TYPEFACE FONT concept file TYPEFACEFAMILY font-family (CSS) 2019©GiuliaLaco FONTFAMILY roman, italic, condensed, extended
  7. 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. 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
  9. 9. WHO ASKEDFORVARIABLEFONTS? 2019©GiuliaLaco
  10. 10. THE PROPONENTS VARIABLEFONTS ATypI,September 2016 2019©GiuliaLaco OpenType Font Variations
  11. 11. BROWSERSUPPORT 2019©GiuliaLaco
  12. 12. Variable Fonts BROWSERSUPPORT(source:CANIUSE) 9,54% Globalusage March2018 2019©GiuliaLaco
  13. 13. Variable Fonts 78,26% Globalusage March2019 2019©GiuliaLaco BROWSERSUPPORT(source:CANIUSE)
  14. 14. Variable Fonts 87,01% Globalusage November2019 2019©GiuliaLaco BROWSERSUPPORT(source:CANIUSE)
  15. 15. WHATISAVARIABLEFONT? 2019©GiuliaLaco
  16. 16. EVOLUTION OpenType 1.8OpenType 2019©GiuliaLaco
  17. 17. DEFINITION “A variable font is a single font file THAT BEHAVES LIKE multiple fonts.” 2019©GiuliaLaco — John Hudson, Sept. 2016
  18. 18. OPPOSITION VARIABLEFONTS“STATIC”FONTS 2019©GiuliaLaco
  19. 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. 20. DEFINITION 2019©GiuliaLaco A variable font is a single font file THAT BEHAVES LIKE multiple [static] fonts.
  21. 21. VARIATIONAXES 2019©GiuliaLaco
  22. 22. https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369 VARIATIONAXES VARIABLEFONTS 2019©GiuliaLaco
  23. 23. VARIATIONAXES CUSTOMAXESREGISTEREDAXES VARIABLEFONTS wght wdth ital slnt opsz XHGH GRAD COSA BOHH MAHH 2019©GiuliaLaco
  24. 24. REGISTEREDAXES 2019©GiuliaLaco
  25. 25. 2019©GiuliaLaco 1. Weight 2. Width 3. Optical Size 4. Slant 5. Italic
  26. 26. Nunito by Vernon Adams 54 156 wght 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Weight
  27. 27. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS wght wdth 38 250 40160 Amstelvar Alpha by David Berlow Weight Width
  28. 28. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Amstelvar Alpha by David Berlow opsz 10 72 Optical size
  29. 29. METALTYPES OPTICALSIZE https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/ 2019©GiuliaLaco
  30. 30. optical-size + font-size 2019©GiuliaLaco SMALL BIGCSSfont-size optical-size FORSMALLSIZES FORBIGSIZES
  31. 31. 2019©GiuliaLaco
  32. 32. 2019©GiuliaLaco
  33. 33. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Input Mono Beta by David Jonathan Ross slnt Slant
  34. 34. 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Times New Roman (static fonts) ital 0 1 Italic
  35. 35. 2019©GiuliaLaco INTERPOLATION VARIABLEFONTS Samsa – inspection tool https://github.com/Lorp/samsa
  36. 36. ital slnt+ 2019©GiuliaLaco REGISTEREDAXES VARIABLEFONTS Italic + Slant Roslindale Variable Italic by David Jonathan Ross
  37. 37. CUSTOMAXES 2019©GiuliaLaco
  38. 38. Recursive by Arrow Type ASANS&MONOFONT! 2019©GiuliaLaco NEWTYPOGRAPHY
  39. 39. >64.000 POSSIBLE VARIATION AXES 2019©GiuliaLaco
  40. 40. RicardoMagalhães https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
  41. 41. DavidJonathanRoss:https://djr.com/notes/first-variable-font/
  42. 42. https://create.adobe.com/2018/5/22/variable_fonts_are_t.html
  43. 43. TOO MANY? 2019©GiuliaLaco
  44. 44. NAMEDINSTANCES 2019©GiuliaLaco
  45. 45. NAMEDINSTANCES VARIABLEFONTS Thechoicesofthosewhoknow(i.e.typedesigners) 2019©GiuliaLaco
  46. 46. https://www.axis-praxis.org/
  47. 47. ADVANTAGES VARIABLE FONTS 2019©GiuliaLaco
  48. 48. PERFORMANCE 2019©GiuliaLaco
  49. 49. PERFORMANCE STATICFONTS VARIABILEFONT WEIGHT KB KB KB KB KB KB KB KB KB KB VARIABLEFONTS 2019©GiuliaLaco
  50. 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
  51. 51. OPTICALSIZE 2019©GiuliaLaco
  52. 52. 2019©GiuliaLaco
  53. 53. Finetuning 2019©GiuliaLaco
  54. 54. https://www.axis-praxis.org/
  55. 55. ADAPTATIONTOLANGUAGES 2019©GiuliaLaco
  56. 56. RESPONSIVE/FLUIDWEB 2019©GiuliaLaco
  57. 57. DISADVANTAGES VARIABLE FONTS 2019©GiuliaLaco
  58. 58. CHOICE 2019©GiuliaLaco
  59. 59. PRICE 2019©GiuliaLaco
  60. 60. CRIMINALPOTENTIALJ typographiccrimes 2019©GiuliaLaco
  61. 61. IMPLEMENTATION VARIABLE FONTS 2019©GiuliaLaco
  62. 62. CSSPROPERTIES 2019©GiuliaLaco
  63. 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. 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;
  65. 65. FALLBACK:FONTSTACK 2019©GiuliaLaco
  66. 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. 67. FEATUREQUERY VARIABLEFONTS body { font-family: "Typeface", sans-serif; } @supports (font-variation-settings: normal) { body { font-family: "Typeface VF", sans-serif; } } 2019©GiuliaLaco @SUPPORT
  68. 68. @FONT-FACE 2019©GiuliaLaco
  69. 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
  70. 70. GOOGLEFONTSAPI 2019©GiuliaLaco
  71. 71. GOOGLEFONTSAPI VARIABLEFONTS //fonts.googleapis.com/css2?family=Roboto:wght@700 2019©GiuliaLaco //fonts.googleapis.com/css?family=Roboto:700 CURRENTAPIFORSTATICFONTS NEWAPIFORVARIABILE&STATICFONTS
  72. 72. WHERECANIFINDTHEM? 2019©GiuliaLaco
  73. 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. 74. 2019©GiuliaLaco Announced by Nathan Williams by means of a Codpen: https://codepen.io/nlwilliams/full/JjPJewp Availablewith NEWGOOGLEFONTSAPI WHERETOFIND VARIABLEFONTS
  75. 75. 2019©GiuliaLaco WHERETOFIND VARIABLEFONTS WordPress TwentyTwentytheme Inter by Rasmus Andersson - https://rsms.me/inter/
  76. 76. • Check your creative software • Font distributors & market places • … ask your trusted foundry 2019©GiuliaLaco WHERETOFIND VARIABLEFONTS
  77. 77. TOOLS VARIABLE FONTS 2019©GiuliaLaco
  78. 78. TOOLS axis-praxis.org VARIABLEFONTS 2019©GiuliaLaco
  79. 79. TOOLS v-fonts.com VARIABLEFONTS 2019©GiuliaLaco
  80. 80. TOOLS play.typedetail.com VARIABLEFONTS 2019©GiuliaLaco
  81. 81. TOOLS wakamaifondue.com VARIABLEFONTS 2019©GiuliaLaco
  82. 82. POTENTIALS VARIABLE FONTS 2019©GiuliaLaco
  83. 83. MULTIMEDIAINTERFACES 2019©GiuliaLaco
  84. 84. INPUT VARIABLEFONTS Phone mOvement WEIGHT, WIDTH VARIATIONAXES: 2019©GiuliaLaco
  85. 85. INPUT VARIABLEFONTS Audio WEIGHT, WIDTH VARIATIONAXES: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr 2019©GiuliaLaco
  86. 86. INPUT VARIABLEFONTS pressure sensor DEVICE WEIGHT VARIATIONAXES: ? 2019©GiuliaLaco
  87. 87. adaptation totheenvironment 2019©GiuliaLaco
  88. 88. GRADEAXIS VARIABLEFONTS 2019©GiuliaLaco
  89. 89. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  90. 90. L’asseGRADE Gliassidivariazione https://www.axis-praxis.org/
  91. 91. INPUT VARIABLEFONTS AMBIENT LIGHT GRADE VARIATIONAXES: 2019©GiuliaLaco
  92. 92. INPUT VARIABLEFONTS Distance from screen GRADE?, X-HEIGHT VARIATIONAXES: ? 2019©GiuliaLaco
  93. 93. NEWENVIRONMENTS 2019©GiuliaLaco
  94. 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
  95. 95. INFOGRAPHICS 2019©GiuliaLaco
  96. 96. INPUT VARIABLEFONTS Big Data WEIGHT SLANT VARIATIONAXES: A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr 2019©GiuliaLaco
  97. 97. ANIMATIONS(semantiC?) 2019©GiuliaLaco
  98. 98. ACCESSIBILITY, PARTICULARNEEDS 2019©GiuliaLaco
  99. 99. EXPRESSIVENESS 2019©GiuliaLaco
  100. 100. EXPRESSIVENESS VARIABLEFONTS active static calmanxious sound sound sound sound sound 2019©GiuliaLaco Exercise inspired by the work of Sarah Hyndman
  101. 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. 102. 2019©GiuliaLaco Thank you for your attention
  103. 103. @webmatter_it giulialaco giulia.laco FOLLOW / CONTACT Keepintouch and show me your creations with variable fonts ! Subscribetomynewsletter www.typestrategy.com
  104. 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

×