Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
VARIABLE FONTS
THEFUTUREOFTYPOGRAPHYHASALREADYBEGUN
GIULIA LACO
NOVEMBER 23rd , 2019 - WORDCAMP MILANO
#
WORDCAMP MILANO 2019
DEFINITION
VARIABLE FONTS
2019©GiuliaLaco
JasonPamental
https://www.monotype.com/resources/articles/the-evolution-of-typography-with-variable-fonts/
PREMISE
2019©GiuliaLaco
Definitions TYPEFACE FONT
concept file
TYPEFACEFAMILY
font-family (CSS)
2019©GiuliaLaco
FONTFAMILY
roman, italic, condense...
EVOLUTION TYPEFACEFAMILIES
Roman vs. Italic – different types
beginningof 1500
1700
Bigger families (condensed,
extended)
...
TERMINOLOGY ITALIANENGLISH
STRETTISSIMO
STRETTO
NORMALE
LARGO
LARGHISSIMO
COMPRESSED
CONDENSED
REGULAR OR MEDIUM
WIDE
EXTE...
WHO
ASKEDFORVARIABLEFONTS?
2019©GiuliaLaco
THE PROPONENTS
VARIABLEFONTS
ATypI,September 2016
2019©GiuliaLaco
OpenType Font Variations
BROWSERSUPPORT
2019©GiuliaLaco
Variable Fonts
BROWSERSUPPORT(source:CANIUSE)
9,54%
Globalusage
March2018
2019©GiuliaLaco
Variable Fonts
78,26%
Globalusage
March2019
2019©GiuliaLaco
BROWSERSUPPORT(source:CANIUSE)
Variable Fonts
87,01%
Globalusage
November2019
2019©GiuliaLaco
BROWSERSUPPORT(source:CANIUSE)
WHATISAVARIABLEFONT?
2019©GiuliaLaco
EVOLUTION
OpenType 1.8OpenType
2019©GiuliaLaco
DEFINITION “A variable font is
a single font file
THAT BEHAVES LIKE
multiple fonts.”
2019©GiuliaLaco
— John Hudson, Sept. ...
OPPOSITION VARIABLEFONTS“STATIC”FONTS
2019©GiuliaLaco
DIFFERENCES STATICFONTS VARIABLEFONT
HT to Oliver Schöndorfer (https://www.zeichenschatz.net/typografie/how-to-start-with-...
DEFINITION
2019©GiuliaLaco
A variable font is
a single font file
THAT BEHAVES LIKE
multiple [static] fonts.
VARIATIONAXES
2019©GiuliaLaco
https://medium.com/variable-fonts/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369
VARIATIONAXES
VARI...
VARIATIONAXES CUSTOMAXESREGISTEREDAXES
VARIABLEFONTS
wght wdth
ital
slnt
opsz
XHGH
GRAD
COSA
BOHH
MAHH
2019©GiuliaLaco
REGISTEREDAXES
2019©GiuliaLaco
2019©GiuliaLaco
1. Weight
2. Width
3. Optical Size
4. Slant
5. Italic
Nunito by Vernon Adams
54 156
wght
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS
Weight
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS
wght
wdth
38 250
40160
Amstelvar Alpha by David Berlow
Weight
Width
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS
Amstelvar Alpha by David Berlow
opsz
10 72
Optical size
METALTYPES
OPTICALSIZE
https://pixabay.com/photos/typecases-letters-lead-set-font-set-417693/
2019©GiuliaLaco
optical-size + font-size
2019©GiuliaLaco
SMALL BIGCSSfont-size
optical-size
FORSMALLSIZES FORBIGSIZES
2019©GiuliaLaco
2019©GiuliaLaco
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS
Input Mono Beta by David Jonathan Ross
slnt
Slant
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS
Times New Roman (static fonts)
ital
0 1
Italic
2019©GiuliaLaco
INTERPOLATION
VARIABLEFONTS
Samsa – inspection tool https://github.com/Lorp/samsa
ital slnt+
2019©GiuliaLaco
REGISTEREDAXES
VARIABLEFONTS Italic + Slant
Roslindale Variable Italic by David Jonathan Ross
CUSTOMAXES
2019©GiuliaLaco
Recursive by Arrow Type
ASANS&MONOFONT!
2019©GiuliaLaco
NEWTYPOGRAPHY
>64.000
POSSIBLE VARIATION AXES
2019©GiuliaLaco
RicardoMagalhães
https://blog.prototypr.io/what-does-variable-fonts-mean-for-web-developers-2e2b96c66497
DavidJonathanRoss:https://djr.com/notes/first-variable-font/
https://create.adobe.com/2018/5/22/variable_fonts_are_t.html
TOO MANY?
2019©GiuliaLaco
NAMEDINSTANCES
2019©GiuliaLaco
NAMEDINSTANCES
VARIABLEFONTS
Thechoicesofthosewhoknow(i.e.typedesigners)
2019©GiuliaLaco
https://www.axis-praxis.org/
ADVANTAGES
VARIABLE FONTS
2019©GiuliaLaco
PERFORMANCE
2019©GiuliaLaco
PERFORMANCE STATICFONTS VARIABILEFONT
WEIGHT
KB
KB KB KB
KB KB KB
KB KB KB
VARIABLEFONTS
2019©GiuliaLaco
PERFORMANCE REMEMBERTO
- use the compressed format: woff2
- consider to do a subsetting (depending on the licence )
- use ...
OPTICALSIZE
2019©GiuliaLaco
2019©GiuliaLaco
Finetuning
2019©GiuliaLaco
https://www.axis-praxis.org/
ADAPTATIONTOLANGUAGES
2019©GiuliaLaco
RESPONSIVE/FLUIDWEB
2019©GiuliaLaco
DISADVANTAGES
VARIABLE FONTS
2019©GiuliaLaco
CHOICE
2019©GiuliaLaco
PRICE
2019©GiuliaLaco
CRIMINALPOTENTIALJ
typographiccrimes
2019©GiuliaLaco
IMPLEMENTATION
VARIABLE FONTS
2019©GiuliaLaco
CSSPROPERTIES
2019©GiuliaLaco
1AXIS
2019©GiuliaLaco
font-variation-settings:
"wght" 54;
lowlevelCSS
VARIABLEFONTS
font-variation-settings:
"wght" 38, "w...
2019©GiuliaLaco
font-weight: 38; [1-999]
font-stretch: 125%; [100% is normal]
font-optical-sizing: auto; [auto/none]
font-...
FALLBACK:FONTSTACK
2019©GiuliaLaco
FONTSTACK
VARIABLEFONTS
font-family:
“Typeface VF”, “Typeface”, Helvetica, sans-serif;
Static webfont websafe system
font
...
FEATUREQUERY
VARIABLEFONTS
body {
font-family: "Typeface", sans-serif;
}
@supports (font-variation-settings: normal) {
bod...
@FONT-FACE
2019©GiuliaLaco
@FONT-FACE
VARIABLEFONTS
@font-face {
font-family: "Typeface VF";
src: url('Typeface_VF.woff2') format('woff2-variations')...
GOOGLEFONTSAPI
2019©GiuliaLaco
GOOGLEFONTSAPI
VARIABLEFONTS
//fonts.googleapis.com/css2?family=Roboto:wght@700
2019©GiuliaLaco
//fonts.googleapis.com/css...
WHERECANIFINDTHEM?
2019©GiuliaLaco
GOOGLEFONTSEARLYACCESS
@import url(https://fonts.googleapis.com/earlyaccess/cabinvfbeta.css);
@import url(https://fonts.go...
2019©GiuliaLaco
Announced by Nathan Williams by means of a Codpen: https://codepen.io/nlwilliams/full/JjPJewp
Availablewit...
2019©GiuliaLaco
WHERETOFIND
VARIABLEFONTS
WordPress
TwentyTwentytheme
Inter by Rasmus Andersson - https://rsms.me/inter/
• Check your creative software
• Font distributors & market places
• … ask your trusted foundry
2019©GiuliaLaco
WHERETOFIN...
TOOLS
VARIABLE FONTS
2019©GiuliaLaco
TOOLS axis-praxis.org
VARIABLEFONTS
2019©GiuliaLaco
TOOLS v-fonts.com
VARIABLEFONTS
2019©GiuliaLaco
TOOLS play.typedetail.com
VARIABLEFONTS
2019©GiuliaLaco
TOOLS wakamaifondue.com
VARIABLEFONTS
2019©GiuliaLaco
POTENTIALS
VARIABLE FONTS
2019©GiuliaLaco
MULTIMEDIAINTERFACES
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Phone mOvement
WEIGHT, WIDTH
VARIATIONAXES:
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Audio
WEIGHT, WIDTH
VARIATIONAXES: A pen by Peter Barr https://codepen.io/petebarr/full/yGeMxr
2019©Gi...
INPUT
VARIABLEFONTS
pressure sensor DEVICE
WEIGHT
VARIATIONAXES: ?
2019©GiuliaLaco
adaptation
totheenvironment
2019©GiuliaLaco
GRADEAXIS
VARIABLEFONTS
2019©GiuliaLaco
L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/
L’asseGRADE
Gliassidivariazione
https://www.axis-praxis.org/
INPUT
VARIABLEFONTS
AMBIENT LIGHT
GRADE
VARIATIONAXES:
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Distance from screen
GRADE?,
X-HEIGHT
VARIATIONAXES: ?
2019©GiuliaLaco
NEWENVIRONMENTS
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Camera,
datA …
Prospective
axes
VARIATIONAXES:
Fonts for Augmented/Virtual Reality
Alessia Nicotra & B...
INFOGRAPHICS
2019©GiuliaLaco
INPUT
VARIABLEFONTS
Big Data
WEIGHT
SLANT
VARIATIONAXES:
A pen by François Poizet https://codepen.io/FranzPoize/pen/ayYevr...
ANIMATIONS(semantiC?)
2019©GiuliaLaco
ACCESSIBILITY,
PARTICULARNEEDS
2019©GiuliaLaco
EXPRESSIVENESS
2019©GiuliaLaco
EXPRESSIVENESS
VARIABLEFONTS
active static
calmanxious
sound
sound
sound
sound
sound
2019©GiuliaLaco
Exercise inspired by ...
EXPRESSIVENESS
VARIABLEFONTS
Sleep
Think
Calm down
Laugh
Wake up
Act now
+calm+energy
2019©GiuliaLaco
Exercise inspired by...
2019©GiuliaLaco
Thank you
for your attention
@webmatter_it
giulialaco
giulia.laco
FOLLOW / CONTACT
Keepintouch
and show me your creations with variable fonts !
Subscri...
BALBOA PLUS FILL
BalboaCondesed
BalboaExtraCondesed
Balboa UltraLight
Balboa Light
Balboa Medium
Balboa Bold
Balboa ExtraB...
Upcoming SlideShare
Loading in …5
×

of

Variable Fonts: the future of typography has already begun Slide 1 Variable Fonts: the future of typography has already begun Slide 2 Variable Fonts: the future of typography has already begun Slide 3 Variable Fonts: the future of typography has already begun Slide 4 Variable Fonts: the future of typography has already begun Slide 5 Variable Fonts: the future of typography has already begun Slide 6 Variable Fonts: the future of typography has already begun Slide 7 Variable Fonts: the future of typography has already begun Slide 8 Variable Fonts: the future of typography has already begun Slide 9 Variable Fonts: the future of typography has already begun Slide 10 Variable Fonts: the future of typography has already begun Slide 11 Variable Fonts: the future of typography has already begun Slide 12 Variable Fonts: the future of typography has already begun Slide 13 Variable Fonts: the future of typography has already begun Slide 14 Variable Fonts: the future of typography has already begun Slide 15 Variable Fonts: the future of typography has already begun Slide 16 Variable Fonts: the future of typography has already begun Slide 17 Variable Fonts: the future of typography has already begun Slide 18 Variable Fonts: the future of typography has already begun Slide 19 Variable Fonts: the future of typography has already begun Slide 20 Variable Fonts: the future of typography has already begun Slide 21 Variable Fonts: the future of typography has already begun Slide 22 Variable Fonts: the future of typography has already begun Slide 23 Variable Fonts: the future of typography has already begun Slide 24 Variable Fonts: the future of typography has already begun Slide 25 Variable Fonts: the future of typography has already begun Slide 26 Variable Fonts: the future of typography has already begun Slide 27 Variable Fonts: the future of typography has already begun Slide 28 Variable Fonts: the future of typography has already begun Slide 29 Variable Fonts: the future of typography has already begun Slide 30 Variable Fonts: the future of typography has already begun Slide 31 Variable Fonts: the future of typography has already begun Slide 32 Variable Fonts: the future of typography has already begun Slide 33 Variable Fonts: the future of typography has already begun Slide 34 Variable Fonts: the future of typography has already begun Slide 35 Variable Fonts: the future of typography has already begun Slide 36 Variable Fonts: the future of typography has already begun Slide 37 Variable Fonts: the future of typography has already begun Slide 38 Variable Fonts: the future of typography has already begun Slide 39 Variable Fonts: the future of typography has already begun Slide 40 Variable Fonts: the future of typography has already begun Slide 41 Variable Fonts: the future of typography has already begun Slide 42 Variable Fonts: the future of typography has already begun Slide 43 Variable Fonts: the future of typography has already begun Slide 44 Variable Fonts: the future of typography has already begun Slide 45 Variable Fonts: the future of typography has already begun Slide 46 Variable Fonts: the future of typography has already begun Slide 47 Variable Fonts: the future of typography has already begun Slide 48 Variable Fonts: the future of typography has already begun Slide 49 Variable Fonts: the future of typography has already begun Slide 50 Variable Fonts: the future of typography has already begun Slide 51 Variable Fonts: the future of typography has already begun Slide 52 Variable Fonts: the future of typography has already begun Slide 53 Variable Fonts: the future of typography has already begun Slide 54 Variable Fonts: the future of typography has already begun Slide 55 Variable Fonts: the future of typography has already begun Slide 56 Variable Fonts: the future of typography has already begun Slide 57 Variable Fonts: the future of typography has already begun Slide 58 Variable Fonts: the future of typography has already begun Slide 59 Variable Fonts: the future of typography has already begun Slide 60 Variable Fonts: the future of typography has already begun Slide 61 Variable Fonts: the future of typography has already begun Slide 62 Variable Fonts: the future of typography has already begun Slide 63 Variable Fonts: the future of typography has already begun Slide 64 Variable Fonts: the future of typography has already begun Slide 65 Variable Fonts: the future of typography has already begun Slide 66 Variable Fonts: the future of typography has already begun Slide 67 Variable Fonts: the future of typography has already begun Slide 68 Variable Fonts: the future of typography has already begun Slide 69 Variable Fonts: the future of typography has already begun Slide 70 Variable Fonts: the future of typography has already begun Slide 71 Variable Fonts: the future of typography has already begun Slide 72 Variable Fonts: the future of typography has already begun Slide 73 Variable Fonts: the future of typography has already begun Slide 74 Variable Fonts: the future of typography has already begun Slide 75 Variable Fonts: the future of typography has already begun Slide 76 Variable Fonts: the future of typography has already begun Slide 77 Variable Fonts: the future of typography has already begun Slide 78 Variable Fonts: the future of typography has already begun Slide 79 Variable Fonts: the future of typography has already begun Slide 80 Variable Fonts: the future of typography has already begun Slide 81 Variable Fonts: the future of typography has already begun Slide 82 Variable Fonts: the future of typography has already begun Slide 83 Variable Fonts: the future of typography has already begun Slide 84 Variable Fonts: the future of typography has already begun Slide 85 Variable Fonts: the future of typography has already begun Slide 86 Variable Fonts: the future of typography has already begun Slide 87 Variable Fonts: the future of typography has already begun Slide 88 Variable Fonts: the future of typography has already begun Slide 89 Variable Fonts: the future of typography has already begun Slide 90 Variable Fonts: the future of typography has already begun Slide 91 Variable Fonts: the future of typography has already begun Slide 92 Variable Fonts: the future of typography has already begun Slide 93 Variable Fonts: the future of typography has already begun Slide 94 Variable Fonts: the future of typography has already begun Slide 95 Variable Fonts: the future of typography has already begun Slide 96 Variable Fonts: the future of typography has already begun Slide 97 Variable Fonts: the future of typography has already begun Slide 98 Variable Fonts: the future of typography has already begun Slide 99 Variable Fonts: the future of typography has already begun Slide 100 Variable Fonts: the future of typography has already begun Slide 101 Variable Fonts: the future of typography has already begun Slide 102 Variable Fonts: the future of typography has already begun Slide 103 Variable Fonts: the future of typography has already begun Slide 104
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

2 Likes

Share

Download to read offline

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/

Related Books

Free with a 30 day trial from Scribd

See all

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
  • sitaazzopardi

    Feb. 6, 2020
  • CharlesCrowder7

    Dec. 6, 2019

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/

Views

Total views

495

On Slideshare

0

From embeds

0

Number of embeds

5

Actions

Downloads

1

Shares

0

Comments

0

Likes

2

×